/* ════════════════════════════════════════════════════════════
   ManyStream — Sistema de diseño
   Duotono rosa/aqua sobre ciruela-noche. Espacio Grotesk display,
   Inter cuerpo, JetBrains Mono datos.
   ════════════════════════════════════════════════════════════ */

:root{
	--bg:        #15111e;
	--bg-2:      #1b1628;
	--surface:   #221b33;
	--surface-2: #2b2240;
	--line:      #372b50;
	--text:      #f3eefa;
	--muted:     #a79fbb;
	--pink:      #ff4f7e;
	--aqua:      #34dfd0;
	--pink-dim:  #ff4f7e22;
	--aqua-dim:  #34dfd022;
	--grad:      linear-gradient(100deg, #ff4f7e 0%, #34dfd0 100%);
	--ok:        #34dfd0;
	--warn:      #ffcf6b;
	--err:       #ff6b8a;
	--radius:    16px;
	--radius-sm: 11px;
	--shadow:    0 18px 50px -20px rgba(0,0,0,.6);
	--maxw:      1120px;
	--font:      'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--display:   'Space Grotesk', var(--font);
	--mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:88px; }
body{
	background:var(--bg);
	color:var(--text);
	font-family:var(--font);
	font-size:16px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	overflow-x:clip;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.01em; }
p{ margin:0; }

/* ── Utilidades ─────────────────────────────────────────────── */
.muted{ color:var(--muted); }
.small{ font-size:13.5px; }
.mono{ font-family:var(--mono); font-size:13.5px; letter-spacing:-.01em; }
.note{ margin-top:10px; }
.link{ color:var(--aqua); font-weight:600; }
.link:hover{ text-decoration:underline; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
	color:var(--aqua);
}
.live-dot,.brand-dot{ width:9px; height:9px; border-radius:50%; background:var(--grad); display:inline-block; }
.live-dot{ box-shadow:0 0 0 0 var(--pink); animation:pulse-dot 2s infinite; }
@keyframes pulse-dot{ 0%{ box-shadow:0 0 0 0 #ff4f7e88 } 70%{ box-shadow:0 0 0 7px #ff4f7e00 } 100%{ box-shadow:0 0 0 0 #ff4f7e00 } }

/* ── Marca ──────────────────────────────────────────────────── */
.brand{ display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; }
.brand-dot{ width:11px; height:11px; }
.brand-name span{ color:var(--pink); }

/* ── Botones ────────────────────────────────────────────────── */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:12px 20px; border-radius:999px; border:1px solid transparent;
	font-weight:600; font-size:15px; line-height:1; white-space:nowrap;
	transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:default; }
.btn-primary{ background:var(--grad); color:#1a0f17; box-shadow:0 10px 28px -10px #ff4f7e88; }
.btn-primary:hover{ box-shadow:0 14px 34px -10px #ff4f7eaa; }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--pink); color:#fff; background:#ffffff08; }
.btn-block{ display:flex; width:100%; }

/* ── Campos ─────────────────────────────────────────────────── */
.field-group{ margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-label{ display:block; font-size:13.5px; font-weight:600; color:var(--muted); margin-bottom:7px; }
.field-label-row{ display:flex; justify-content:space-between; align-items:baseline; }
.field-link{ font-size:13px; color:var(--aqua); font-weight:600; }
.field-link:hover{ text-decoration:underline; }
.field-hint{ display:block; margin-top:6px; }
.field-input{
	width:100%; padding:12px 14px; border-radius:var(--radius-sm);
	background:var(--bg-2); border:1px solid var(--line); color:var(--text);
	font-family:inherit; font-size:15px; transition:border-color .15s ease, box-shadow .15s ease;
}
.field-input:focus{ outline:none; border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-dim); }
.field-input::placeholder{ color:#6f6788; }
.field-input[readonly]{ color:var(--muted); background:#ffffff06; }
select.field-input{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.field-wrap-icon{ position:relative; }
.field-wrap-icon .field-input{ padding-right:46px; }
.field-toggle-pw{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--muted); padding:8px; display:flex; }
.field-toggle-pw:hover{ color:var(--text); }
.field-check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted); margin-bottom:16px; cursor:pointer; }
.field-check input{ width:18px; height:18px; accent-color:var(--pink); margin-top:1px; }
.field-check-label a{ color:var(--aqua); }
.field-check-label a:hover{ text-decoration:underline; }

/* ── Visibilidad de secciones (SPA) ─────────────────────────── */
#landing, #login, #register, #dash, #destinations, #account, #plan, #admin, #terms, #privacy{ display:none; }
#landing.open, #login.open, #register.open, #dash.open, #destinations.open, #account.open, #plan.open, #admin.open, #terms.open, #privacy.open{ display:block; }

/* ════════════════════════════════════════════════════════════
   LANDING
   ════════════════════════════════════════════════════════════ */

/* ── Nav: transparente arriba, glassy al hacer scroll ───────── */
.ms-nav{
	position:sticky; top:0; z-index:60;
	background:transparent; border-bottom:1px solid transparent;
	transition:background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.ms-nav.is-scrolled{
	background:rgba(21,17,30,.6);
	-webkit-backdrop-filter:blur(16px) saturate(1.5);
	backdrop-filter:blur(16px) saturate(1.5);
	border-bottom-color:#372b5088;
	box-shadow:0 12px 34px -20px rgba(0,0,0,.7);
}
.ms-nav-inner{
	max-width:var(--maxw); margin:0 auto; padding:14px 24px;
	display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.ms-nav-links{ display:flex; gap:26px; margin-left:auto; }
.ms-nav-links a{ font-size:14.5px; color:var(--muted); font-weight:500; transition:color .15s ease; }
.ms-nav-links a:hover{ color:var(--text); }
.ms-nav-actions{ display:flex; align-items:center; gap:10px; }
.ms-nav-cta{ padding:9px 18px; }

.ms-burger{
	display:none; width:40px; height:40px; border-radius:11px;
	border:1px solid var(--line); background:transparent;
	flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.ms-burger span{ width:17px; height:2px; border-radius:2px; background:var(--text); transition:transform .25s ease, opacity .2s ease; }
.menu-open .ms-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-open .ms-burger span:nth-child(2){ opacity:0; }
.menu-open .ms-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.ms-main{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero{
	position:relative; isolation:isolate;
	display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
	padding:52px 0 52px;
}
.hero::before{
	/* Abarca todo el viewport: los halos se difuminan solos y no queda
	   el "recorte" rectangular visible en pantallas anchas. */
	content:""; position:absolute; top:-120px; height:540px; z-index:-1;
	left:calc(50% - 50vw); width:100vw;
	background:
		radial-gradient(620px 340px at calc(50% - 320px) 45%, #ff4f7e1c, transparent 68%),
		radial-gradient(700px 390px at calc(50% + 360px) 58%, #34dfd017, transparent 68%);
	pointer-events:none;
}
.hero::after{
	content:""; position:absolute; z-index:-1; right:-30px; top:6%; width:46%; height:86%;
	background-image:radial-gradient(#5a4a80 1px, transparent 1.6px);
	background-size:22px 22px;
	-webkit-mask-image:radial-gradient(closest-side, #000 25%, transparent 100%);
	mask-image:radial-gradient(closest-side, #000 25%, transparent 100%);
	opacity:.45; pointer-events:none;
}
.hero-title{ font-size:clamp(30px,4.2vw,46px); margin:14px 0 14px; letter-spacing:-.025em; text-wrap:balance; }
.hero-sub{ font-size:16.5px; line-height:1.6; color:var(--muted); max-width:30em; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 18px; }
.btn-lg{ padding:15px 26px; font-size:16px; }
.btn-primary:hover{ transform:translateY(-1px); }

.hero-trust{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 24px; }
.hero-trust li{ position:relative; padding-left:21px; font-size:13.5px; color:#9d94b5; font-weight:500; }
.hero-trust li::before{ content:"✓"; position:absolute; left:0; color:var(--aqua); font-weight:700; }

/* Píldora del mes de prueba (hero) */
.trial-pill{
	display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
	margin-top:16px; padding:7px 15px 7px 7px;
	background:var(--surface); border:1px solid var(--line); border-radius:999px;
	font-size:13.5px; font-weight:500;
}
.trial-pill-tag{
	background:var(--grad); color:#1a0f17; font-family:var(--display);
	font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
	padding:4px 12px; border-radius:999px; white-space:nowrap;
}

/* Botón WhatsApp outline (hero / CTA final) */
.btn-wa-o{ background:#25d36614; border-color:#25d36655; color:#c9f7dc; }
.btn-wa-o .btn-ic{ color:#4ce082; }
.btn-wa-o:hover{ background:#25d3662a; border-color:#25d366aa; transform:translateY(-1px); }

/* Entrada del hero */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
#landing.open .hero-copy > *{ animation:rise .65s cubic-bezier(.22,.68,.32,1) both; }
#landing.open .hero-copy > *:nth-child(1){ animation-delay:.05s; }
#landing.open .hero-copy > *:nth-child(2){ animation-delay:.13s; }
#landing.open .hero-copy > *:nth-child(3){ animation-delay:.21s; }
#landing.open .hero-copy > *:nth-child(4){ animation-delay:.30s; }
#landing.open .hero-copy > *:nth-child(5){ animation-delay:.38s; }
@keyframes fan-in{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
#landing.open .fanout{ animation:fan-in .75s .28s cubic-bezier(.22,.68,.32,1) both; }

/* Fan-out */
.fanout{ position:relative; }
.fanout-svg{ width:100%; height:auto; overflow:visible; }
.fanout-lines path{ stroke-dasharray:7 10; animation:flow 1.4s linear infinite; opacity:.9; }
.fanout-lines path:nth-child(2){ animation-delay:.15s } .fanout-lines path:nth-child(3){ animation-delay:.3s } .fanout-lines path:nth-child(4){ animation-delay:.45s } .fanout-lines path:nth-child(5){ animation-delay:.6s }
@keyframes flow{ to{ stroke-dashoffset:-34; } }
.flow-dots circle{ opacity:.95; }
.src-pulse{ fill:var(--pink-dim); animation:src-breathe 2.6s ease-in-out infinite; transform-origin:58px 210px; }
@keyframes src-breathe{ 0%,100%{ transform:scale(1); opacity:.6 } 50%{ transform:scale(1.18); opacity:.25 } }
.src-core{ fill:url(#core); }
.src-label{ font-family:var(--display); font-weight:700; font-size:13px; fill:#1a0f17; }
.fanout-dest circle{ fill:var(--surface-2); stroke:var(--aqua); stroke-width:2; transform-box:fill-box; transform-origin:center; animation:dest-breathe 3s ease-in-out infinite; }
.fanout-dest g:nth-of-type(2) circle{ animation-delay:.3s } .fanout-dest g:nth-of-type(3) circle{ animation-delay:.6s } .fanout-dest g:nth-of-type(4) circle{ animation-delay:.9s } .fanout-dest g:nth-of-type(5) circle{ animation-delay:1.2s }
@keyframes dest-breathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.16) } }
.fanout-dest text{ fill:var(--text); font-size:13px; font-family:var(--font); font-weight:500; dominant-baseline:middle; }
.fanout-lines path.fan-in{ stroke-width:3.2; }
.msn-box{ fill:#1d1830; stroke:url(#flow); stroke-width:2; }
.msn-t{ font-family:var(--display); font-weight:700; font-size:15.5px; text-anchor:middle; }
.msn-t .t1{ fill:var(--text); }
.msn-t .t2{ fill:var(--pink); }
.hero-sub strong{ color:var(--text); font-weight:600; }

/* Bandas */
.band{ padding:clamp(68px,9vw,104px) 0; }
.band-alt{
	margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
	background:linear-gradient(180deg,#1a1527 0%,#15111e 100%);
	border-block:1px solid #372b5045;
}
.kicker{
	text-align:center; font-family:var(--display); font-size:12.5px; font-weight:700;
	letter-spacing:.16em; text-transform:uppercase; color:var(--pink); margin-bottom:12px;
}
.band-alt .kicker{ color:var(--aqua); }
.section-title{ font-size:clamp(26px,3.6vw,36px); text-align:center; margin-bottom:12px; letter-spacing:-.02em; text-wrap:balance; }
.section-lead{ text-align:center; color:var(--muted); max-width:36em; margin:0 auto; font-size:16.5px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.card{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:24px;
}
.card h3{ font-size:18px; margin-bottom:8px; }
.grid-3 .card, .benefit, .step{ transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.grid-3 .card:hover, .benefit:hover, .step:hover{ transform:translateY(-4px); border-color:#4b3a70; box-shadow:0 22px 44px -24px rgba(0,0,0,.75); }
.icard .benefit-ic{ margin-bottom:14px; }
.ic-pink{ background:var(--pink-dim) !important; color:var(--pink) !important; }

/* Pasos */
.steps{ list-style:none; padding:0; margin:44px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:step; }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; position:relative; }
.step-n{
	display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
	border-radius:12px; background:var(--grad); color:#1a0f17; font-family:var(--display); font-weight:700; font-size:18px; margin-bottom:14px;
}
.step:not(:last-child)::after{
	content:""; position:absolute; top:46px; right:-19px; width:20px; height:2px;
	background:linear-gradient(90deg,var(--pink),var(--aqua)); opacity:.45;
}
.step h3{ font-size:18px; margin-bottom:7px; }

/* Beneficios */
.benefits{ margin-top:44px; }
.benefit{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.benefit-ic{
	width:42px; height:42px; border-radius:12px; margin-bottom:12px;
	background:var(--aqua-dim); color:var(--aqua);
	display:flex; align-items:center; justify-content:center;
	transition:background .25s ease, color .25s ease;
}
.benefit-ic svg{ width:21px; height:21px; }
.benefit:hover .benefit-ic{ background:var(--grad); color:#102721; }
.benefit h3{ font-size:16.5px; margin-bottom:5px; }

/* Chips */
.chips{ list-style:none; padding:0; margin:44px auto 0; display:flex; flex-wrap:wrap; gap:11px; justify-content:center; max-width:46em; }
.chips li{ padding:9px 16px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); font-size:14px; font-weight:500; transition:transform .2s ease, border-color .2s ease; }
.chips li:hover{ transform:translateY(-2px); border-color:var(--aqua); }
.chips-more{ background:var(--pink-dim); border-color:var(--pink); color:#ffd0dc; }

/* Mes de prueba */
.trial-band{
	margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
	background:
		radial-gradient(640px 340px at 15% 8%, #ff4f7e10, transparent 70%),
		radial-gradient(640px 340px at 85% 92%, #34dfd00e, transparent 70%);
}
.trial-band .kicker{ color:var(--aqua); }
.trial-cta{ justify-content:center; margin:38px 0 0; }

/* Planes */
.plan-card{ max-width:440px; margin:34px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); position:relative; }
.plan-card::before{ content:""; position:absolute; inset:0; border-radius:var(--radius); padding:1px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none; }
.plan-name{ font-family:var(--display); font-weight:600; font-size:18px; color:var(--muted); }
.plan-price{ font-family:var(--display); font-weight:700; font-size:42px; margin:6px 0 2px; }
.plan-cur{ font-size:18px; color:var(--muted); margin-right:6px; }
.plan-per{ font-size:17px; color:var(--muted); font-weight:500; }
.plan-list{ list-style:none; padding:0; margin:20px 0 24px; }
.plan-list li{ padding:9px 0 9px 28px; position:relative; border-bottom:1px solid var(--line); }
.plan-list li:last-child{ border-bottom:0; }
.plan-list li::before{ content:"✓"; position:absolute; left:0; color:var(--aqua); font-weight:700; }
.plan-fine{ text-align:center; color:var(--muted); font-size:13px; margin-top:18px; }

.plan-grid{
	display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px;
	max-width:780px; margin:46px auto 0; align-items:stretch;
}
.plan-grid .plan-card{ margin:0; max-width:none; display:flex; flex-direction:column; transition:transform .28s ease, box-shadow .28s ease; }
.plan-grid .plan-card:hover{ transform:translateY(-4px); }
.plan-grid .plan-list{ flex:1; }
.plan-grid .plan-card::before{ opacity:.2; }
.plan-grid .plan-featured::before{ opacity:.6; }
.plan-grid .plan-featured{ box-shadow:0 26px 64px -32px #ff4f7e40, var(--shadow); }
.plan-tag{
	position:absolute; top:-13px; left:50%; transform:translateX(-50%);
	background:var(--grad); color:#1a0f17; font-family:var(--display);
	font-weight:700; font-size:12px; letter-spacing:.04em;
	padding:5px 15px; border-radius:999px; white-space:nowrap;
}

/* FAQ */
.acc{ max-width:46em; margin:40px auto 0; }
.acc-item{ border:1px solid var(--line); border-radius:14px; margin-bottom:12px; background:var(--surface); overflow:hidden; transition:border-color .25s ease; }
.acc-item.is-open{ border-color:#ff4f7e55; }
.acc-item summary{ padding:18px 20px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-ic{
	width:30px; height:30px; flex-shrink:0; border-radius:9px;
	background:#ffffff08; color:var(--aqua);
	display:flex; align-items:center; justify-content:center;
	transition:transform .3s ease, background .25s ease;
}
.acc-ic svg{ width:16px; height:16px; }
.acc-item.is-open .acc-ic{ transform:rotate(180deg); background:var(--aqua-dim); }
.acc-body{ overflow:hidden; transition:height .32s cubic-bezier(.4,0,.2,1); }
.acc-body p{ padding:0 20px 18px; }

/* CTA final */
.cta-final{ text-align:center; }
.cta-final h2{ font-size:clamp(28px,4vw,42px); margin-bottom:12px; letter-spacing:-.02em; text-wrap:balance; }
.cta-final-btns{ justify-content:center; margin-top:26px; }

/* Footer */
.ms-foot{ max-width:var(--maxw); margin:0 auto; padding:44px 24px 60px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px; border-top:1px solid var(--line); }
.ms-foot-col{ display:grid; gap:6px; }
.ms-foot-brand{ display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; }
.ms-foot-brand span span{ color:var(--pink); }
.ms-foot-tag{ font-size:13.5px; }
.ms-foot-links{ display:flex; gap:20px; margin-left:auto; padding-top:4px; }
.ms-foot-links a{ color:var(--muted); font-size:14px; }
.ms-foot-links a:hover{ color:var(--text); }
.ms-foot-copy{ width:100%; color:#6f6788; font-size:13px; }

/* Reveal + stagger */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease; }
.reveal.is-in{ opacity:1; transform:none; }
/* Solo opacidad: un translate escalonado congela tarjetas "desalineadas"
   si el usuario captura o percibe el cuadro a mitad de animación. */
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }
.reveal.is-in :is(.grid-3,.steps,.benefits,.plan-grid,.acc) > *{ animation:fadein .45s ease both; }
.reveal.is-in :is(.grid-3,.steps,.benefits,.plan-grid,.acc) > *:nth-child(2){ animation-delay:.06s; }
.reveal.is-in :is(.grid-3,.steps,.benefits,.plan-grid,.acc) > *:nth-child(3){ animation-delay:.12s; }
.reveal.is-in :is(.grid-3,.steps,.benefits,.plan-grid,.acc) > *:nth-child(4){ animation-delay:.18s; }
.reveal.is-in :is(.grid-3,.steps,.benefits,.plan-grid,.acc) > *:nth-child(5){ animation-delay:.24s; }
.reveal.is-in :is(.grid-3,.steps,.benefits,.plan-grid,.acc) > *:nth-child(6){ animation-delay:.30s; }

/* ── Landing responsive ─────────────────────────────────────── */
@media (max-width:960px){
	.hero{ grid-template-columns:1fr; gap:28px; padding:44px 0 40px; }
	.hero::after{ display:none; }
	.fanout{ order:-1; max-width:480px; margin:0 auto; }
	.grid-3, .steps{ grid-template-columns:1fr; }
	.step:not(:last-child)::after{ display:none; }
}
@media (max-width:760px){
	.ms-burger{ display:flex; }
	.ms-nav-links{
		position:absolute; top:calc(100% + 8px); left:14px; right:14px;
		flex-direction:column; gap:4px; padding:10px;
		background:rgba(27,22,40,.92);
		-webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
		border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
		opacity:0; transform:translateY(-6px); pointer-events:none;
		transition:opacity .22s ease, transform .22s ease;
	}
	.ms-nav-links a{ padding:12px 14px; border-radius:10px; font-size:15px; color:var(--text); }
	.ms-nav-links a:hover{ background:#ffffff0a; }
	.menu-open .ms-nav-links{ opacity:1; transform:none; pointer-events:auto; }
	.plan-grid{ grid-template-columns:1fr; max-width:440px; gap:26px; }
}
@media (max-width:560px){
	.ms-nav-inner{ padding:12px 16px; }
	.ms-main{ padding:0 18px; }
	.hero{ padding:30px 0 36px; }
	.hero-cta{ flex-direction:column; align-items:stretch; }
	.cta-final-btns .btn{ width:100%; }
	.fanout-dest text{ font-size:15px; }
	.src-label{ font-size:14px; }
}

/* ════════════════════════════════════════════════════════════
   AUTH (login / registro)
   ════════════════════════════════════════════════════════════ */
.auth-main{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{
	position:relative; width:100%; max-width:880px; display:grid; grid-template-columns:1fr 1fr;
	background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
}
.auth-card-wide{ max-width:940px; }
.auth-close{ position:absolute; top:16px; right:16px; z-index:5; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--muted); background:#ffffff0a; }
.auth-close svg{ width:18px; height:18px; }
.auth-close:hover{ color:#fff; background:#ffffff14; }

.auth-side{ background:linear-gradient(160deg,#2b2240 0%,#1b1628 100%); padding:40px 36px; display:flex; align-items:center; position:relative; }
.auth-side::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:1px; background:var(--line); }
.auth-side-inner .brand{ margin-bottom:26px; }
.auth-side-title{ font-size:26px; margin:12px 0 12px; }
.auth-side-desc{ color:var(--muted); margin-bottom:22px; }
.auth-feature-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.auth-feature-list li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; }
.auth-feature-icon{ color:var(--aqua); font-weight:700; }

.auth-form-side{ padding:42px 38px; display:flex; align-items:center; }
.auth-form-wrap{ width:100%; }
.auth-form-header{ margin-bottom:22px; }
.auth-form-title{ font-size:24px; margin-bottom:6px; }
.auth-form-sub{ color:var(--muted); font-size:14.5px; }
.auth-form-sub a{ color:var(--aqua); font-weight:600; }
.auth-form-sub a:hover{ text-decoration:underline; }
.auth-divider-text{ text-align:center; color:var(--muted); font-size:13px; margin:16px 0; position:relative; }
.auth-divider-text span{ background:var(--surface); padding:0 12px; position:relative; z-index:1; }
.auth-divider-text::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); }
.auth-footer-note{ color:#857ca0; font-size:12.5px; margin-top:18px; }

.auth-alert{ display:none; padding:11px 14px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:16px; }
.auth-alert.open{ display:block; }
.alert-error{ background:#ff6b8a1a; border:1px solid #ff6b8a55; color:#ffb3c2; }
.alert-success{ background:#34dfd01a; border:1px solid #34dfd055; color:#a8f0e8; }

/* ════════════════════════════════════════════════════════════
   APP SHELL
   ════════════════════════════════════════════════════════════ */
#app{ display:flex; min-height:100vh; }

/* Header móvil */
.nav-mobile-head{ display:none; position:sticky; top:0; z-index:50; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(21,17,30,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-mobile-left{ display:flex; align-items:center; gap:12px; }
.nav-mobile-toggle{ width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.nav-mobile-toggle span{ width:18px; height:2px; background:var(--text); border-radius:2px; transition:.2s; }
.nav-mobile-logout{ color:var(--muted); padding:9px; display:flex; }
.nav-mobile-logout:hover{ color:var(--text); }
.nav-mobile-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:45; }

/* Sidebar */
#nav{
	width:264px; flex-shrink:0; background:var(--bg-2); border-right:1px solid var(--line);
	display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh;
}
.nav-brand{ padding:6px 10px 22px; }
.nav-menu{ list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.nav-link{
	display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px;
	color:var(--muted); font-weight:500; font-size:15px; transition:background .15s ease, color .15s ease;
}
.nav-link:hover{ background:#ffffff08; color:var(--text); }
.nav-link.on{ background:var(--pink-dim); color:#fff; }
.nav-link.on .nav-icon svg{ stroke:var(--pink); }
.nav-icon{ width:20px; height:20px; display:flex; flex-shrink:0; }
.nav-icon svg{ width:20px; height:20px; stroke:currentColor; }
.nav-badge{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--surface-2); color:var(--aqua); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }

.nav-bottom{ margin-top:auto; padding-top:18px; display:grid; gap:14px; }
.nav-sub{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; background:var(--surface); border:1px solid var(--line); }
.nav-sub-dot{ width:9px; height:9px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.nav-sub.is-active .nav-sub-dot{ background:var(--ok); box-shadow:0 0 8px var(--aqua); }
.nav-sub.is-inactive .nav-sub-dot{ background:var(--warn); }
.nav-sub-text{ font-size:13.5px; font-weight:600; }
.nav-sub.is-active .nav-sub-text{ color:#a8f0e8; }
.nav-sub.is-inactive .nav-sub-text{ color:var(--warn); }

.nav-user{ display:flex; align-items:center; gap:11px; padding:10px 8px; border-top:1px solid var(--line); }
.nav-user-avatar{ width:38px; height:38px; border-radius:11px; background:var(--grad); color:#1a0f17; font-weight:700; font-family:var(--display); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.nav-user-info{ display:flex; flex-direction:column; min-width:0; flex:1; }
.nav-user-name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-user-email{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-logout{ color:var(--muted); padding:8px; display:flex; }
.nav-logout:hover{ color:var(--err); }

/* Contexto */
#ctx{ flex:1; min-width:0; padding:38px 40px; }

/* ── Vistas ─────────────────────────────────────────────────── */
.view{ max-width:860px; margin:0 auto; }
.view-narrow{ max-width:640px; }
.view-head{ margin-bottom:26px; }
.view-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.view-title{ font-size:28px; margin-bottom:6px; }
.view-sub{ font-size:15px; }

.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.card-title{ font-size:18px; }
.card .card-title + .small{ margin-bottom:14px; }

.pill{ font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; background:var(--aqua-dim); color:var(--aqua); }

/* Copiar campos (ingest) */
.copy-field{ margin-bottom:16px; }
.copy-row{ display:flex; gap:8px; }
.copy-row .field-input{ flex:1; }
.btn-copy,.btn-eye{ padding:10px 14px; font-size:13.5px; }

/* Stat destinos */

/* Banner */
.banner{ display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:var(--radius); background:linear-gradient(100deg,#ff4f7e1a,#34dfd01a); border:1px solid #ff4f7e44; margin-bottom:20px; flex-wrap:wrap; }
.banner-body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:200px; }
.banner-body strong{ font-family:var(--display); font-size:16px; }
.banner .btn{ flex-shrink:0; }

/* Cómo conectar */
.help-steps{ margin:12px 0 0; padding-left:22px; display:grid; gap:9px; color:var(--muted); }
.help-steps li{ padding-left:4px; }
.help-steps strong{ color:var(--text); }

/* ════════════════════════════════════════════════════════════
   DESTINOS
   ════════════════════════════════════════════════════════════ */

/* Switch */
/* Switch: verde encendido, gris apagado, knob con rebote elástico */
.switch{ width:46px; height:26px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); position:relative; padding:0; transition:background .22s ease, border-color .22s ease, box-shadow .22s ease; flex-shrink:0; cursor:pointer; }
.switch-knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--muted); transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .2s ease, scale .12s ease; }
.switch:active .switch-knob{ scale:.88; }
.switch.on{ background:#25d366; border-color:transparent; box-shadow:0 0 14px #25d36638; }
.switch.on .switch-knob{ transform:translateX(20px); background:#0b3620; }

.icon-btn{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:14px; transition:.15s; }
.icon-btn:hover{ color:var(--text); border-color:var(--pink); }
.icon-btn.is-confirming{ border-color:var(--err); color:var(--err); animation:armed-pulse .9s ease-in-out infinite; }
@keyframes armed-pulse{ 0%,100%{ box-shadow:0 0 0 0 #ff6b8a55 } 50%{ box-shadow:0 0 0 5px #ff6b8a00 } }

/* Vacío */
.empty{ text-align:center; padding:54px 24px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); }
.empty-ic{ font-size:40px; margin-bottom:12px; }
.empty h3{ font-size:19px; margin-bottom:8px; }
.empty .btn{ margin-top:18px; }

/* Modal */
.modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(8,5,14,.7); backdrop-filter:blur(3px); }
.modal-card{ position:relative; width:100%; max-width:480px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow:var(--shadow); max-height:90vh; overflow:auto; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-head h2{ font-size:20px; }
.modal-close{ width:34px; height:34px; border-radius:9px; border:0; background:#ffffff0a; color:var(--muted); font-size:16px; }
.modal-close:hover{ color:#fff; background:#ffffff16; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }

/* ════════════════════════════════════════════════════════════
   PLAN / CUENTA
   ════════════════════════════════════════════════════════════ */
/* Tarjetas apiladas SOLO en vistas de la app (.view). Sin el scope,
   la regla alcanzaba a los .card hermanos del grid de la landing y
   desplazaba/achicaba las tarjetas 2 y 3 (margin-top en grid). */
.view .card + .card{ margin-top:18px; }
.plan-status-head{ display:flex; align-items:center; gap:14px; }
.plan-status-dot{ width:12px; height:12px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.plan-status.is-active{ border-color:#34dfd055; }
.plan-status.is-active .plan-status-dot{ background:var(--ok); box-shadow:0 0 10px var(--aqua); }
.plan-status.is-inactive .plan-status-dot{ background:var(--warn); }
.plan-status-head strong{ display:block; font-family:var(--display); font-size:17px; }
.plan-price-tag{ font-family:var(--display); font-weight:700; font-size:20px; }
.plan-incl{ list-style:none; padding:0; margin:14px 0 22px; }
.plan-incl li{ padding:9px 0 9px 26px; position:relative; border-bottom:1px solid var(--line); font-size:15px; }
.plan-incl li:last-child{ border-bottom:0; }
.plan-incl li::before{ content:"✓"; position:absolute; left:0; color:var(--aqua); font-weight:700; }

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,18px); z-index:120; padding:12px 20px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--text); font-size:14px; font-weight:500; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; }
.toast.open{ opacity:1; transform:translate(-50%,0); }
.toast-ok{ border-color:#34dfd066; } .toast-ok #toast-msg{ color:#a8f0e8; }
.toast-err{ border-color:#ff6b8a66; } .toast-err #toast-msg{ color:#ffb3c2; }
.toast-warn{ border-color:#ffcf6b66; } .toast-warn #toast-msg{ color:#ffe1a3; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width:960px){
	.auth-card, .auth-card-wide{ grid-template-columns:1fr; max-width:460px; }
	.auth-side{ display:none; }

	.nav-mobile-head{ display:flex; }
	#app{ flex-direction:column; }
	#nav{
		position:fixed; top:0; left:0; bottom:0; height:100vh; z-index:48;
		transform:translateX(-100%); transition:transform .25s ease; width:280px;
	}
	#app.nav-open #nav{ transform:translateX(0); }
	#app.nav-open .nav-mobile-overlay{ display:block; }
	#ctx{ padding:24px 18px; }
}
@media (max-width:560px){
	.field-row{ grid-template-columns:1fr; }
	.view-head-row{ flex-direction:column; }
}

@media (prefers-reduced-motion: reduce){
	*{ animation:none !important; transition:none !important; }
	html{ scroll-behavior:auto; }
	.reveal{ opacity:1; transform:none; }
	.flow-dots{ display:none; }
}

/* ════════════════════════════════════════════════════════════
   V2 — Glow del hero, planes duales, WhatsApp, Cómo pagar
   ════════════════════════════════════════════════════════════ */

/* ── WhatsApp ───────────────────────────────────────────────── */
.btn-wa{ background:#25d366; color:#08301d; }
.btn-wa:hover{ background:#2fe273; box-shadow:0 10px 26px -12px #25d36688; }
.btn-ic{ width:18px; height:18px; flex-shrink:0; }

.wa-float{
	position:fixed; right:22px; bottom:22px; z-index:90;
	width:56px; height:56px; border-radius:50%;
	background:#25d366; color:#08301d;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 14px 34px -10px rgba(0,0,0,.6);
	transition:transform .15s ease, box-shadow .2s ease;
}
.wa-float svg{ width:28px; height:28px; }
.wa-float:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 18px 40px -10px #25d36655; }

/* Ícono de relleno en el sidebar (el glifo de WhatsApp no es de trazo) */
.nav-icon svg.ico-fill{ stroke:none; fill:currentColor; }

/* ── Cómo pagar (Mi plan) ───────────────────────────────────── */
.pay-grid{ display:grid; grid-template-columns:230px 1fr; gap:22px; margin:18px 0 20px; align-items:start; }
.pay-qr{
	background:#fff; border-radius:14px; padding:12px 12px 10px;
	display:flex; flex-direction:column; align-items:center; gap:8px;
}
.pay-qr img{ width:100%; height:auto; border-radius:8px; }
.pay-qr-label{ color:#5b5470; font-size:12px; font-weight:600; text-align:center; }
.pay-row{
	display:flex; align-items:center; gap:10px; padding:10px 0;
	border-bottom:1px solid var(--line); font-size:14.5px;
}
.pay-k{ width:64px; flex-shrink:0; font-size:13px; }
.pay-v{ font-weight:600; }
.pay-row .pay-v.mono{ flex:1; font-size:15px; letter-spacing:.02em; }
.pay-row .btn{ padding:8px 13px; font-size:13px; }
.pay-steps{ margin-top:14px; }
#plan-pay .btn-wa{ margin-top:4px; }

/* ── Responsive V2 ──────────────────────────────────────────── */
@media (max-width:760px){
	.pay-grid{ grid-template-columns:1fr; }
	.pay-qr{ max-width:250px; margin:0 auto; }
}
@media (max-width:560px){
	.wa-float{ right:16px; bottom:16px; width:52px; height:52px; }
	.wa-float svg{ width:26px; height:26px; }
}

/* ════════════════════════════════════════════════════════════
   ADMIN
   ════════════════════════════════════════════════════════════ */
.view-wide{ max-width:1040px; }

.astats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.astat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.astat-n{ font-family:var(--display); font-weight:700; font-size:26px; line-height:1.1; display:block; }
.astat-l{ font-size:12.5px; color:var(--muted); margin-top:4px; display:block; }

.adm-search{ margin:6px 0 14px; max-width:340px; }

.atable-wrap{ overflow-x:auto; }
.atable{ width:100%; border-collapse:collapse; font-size:14px; min-width:700px; }
.atable th{
	text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
	color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line);
}
.atable td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.atable tbody tr:last-child td{ border-bottom:0; }
.atable tbody tr:hover td{ background:#ffffff05; }
.atable .btn{ padding:8px 14px; font-size:13px; white-space:nowrap; }

.au-user{ font-weight:600; display:block; }
.au-mail{ font-size:12.5px; color:var(--muted); display:block; }
.au-until{ display:block; font-size:12px; color:var(--muted); margin-top:3px; }

.badge{ display:inline-flex; align-items:center; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; }
.badge-ok{ background:#34dfd01a; color:#a8f0e8; border:1px solid #34dfd044; }
.badge-off{ background:#ffcf6b14; color:#ffe1a3; border:1px solid #ffcf6b44; }
.badge-exp{ background:#ff6b8a14; color:#ffb3c2; border:1px solid #ff6b8a44; }

@media (max-width:760px){
	.astats{ grid-template-columns:repeat(2,1fr); }
}


/* ════════════════════════════════════════════════════════════
   LEGAL — Términos y Privacidad
   ════════════════════════════════════════════════════════════ */
.legal-main{ max-width:780px; margin:0 auto; padding:26px 24px 80px; }
.legal-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0 28px; flex-wrap:wrap; }
.legal-doc h1{ font-size:clamp(28px,4vw,38px); letter-spacing:-.02em; margin-bottom:6px; }
.legal-date{ color:var(--muted); font-size:13.5px; margin-bottom:28px; }
.legal-doc h2{ font-size:19px; margin:32px 0 10px; letter-spacing:-.01em; }
.legal-doc p{ color:var(--muted); line-height:1.75; margin-bottom:12px; }
.legal-doc ul{ margin:0 0 14px 20px; padding:0; }
.legal-doc li{ color:var(--muted); line-height:1.7; margin-bottom:8px; }
.legal-doc strong{ color:var(--text); font-weight:600; }
.legal-foot{
	display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
	border-top:1px solid var(--line); margin-top:44px; padding-top:22px;
}


/* ════════════════════════════════════════════════════════════
   EN VIVO — tarjeta de transmisión + salud del relay
   ════════════════════════════════════════════════════════════ */
.live-pill{
	display:inline-flex; align-items:center; gap:7px;
	font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px;
	background:#ffffff08; color:var(--muted); border:1px solid var(--line);
	white-space:nowrap;
}
.live-pill .dot{ width:8px; height:8px; border-radius:50%; background:#8a819f; }
.live-pill.is-on{ background:#34dfd014; color:#a8f0e8; border-color:#34dfd044; }
.live-pill.is-on .dot{ background:var(--aqua); animation:live-ping 1.6s ease-out infinite; }
@keyframes live-ping{ 0%{ box-shadow:0 0 0 0 #34dfd055; } 100%{ box-shadow:0 0 0 9px transparent; } }

.live-rows{ margin-top:12px; }
.live-item{ padding:11px 0; border-bottom:1px solid var(--line); }
.live-item:last-child{ border-bottom:0; }
/* Atenuar el contenido del destino apagado, pero NO su switch:
   tiene que poder volver a prenderlo desde acá. */
.live-item.is-off .lr-dot, .live-item.is-off .lr-name,
.live-item.is-off .lr-state, .live-item.is-off .lr-meta,
.live-item.is-off .live-q{ opacity:.55; }
.live-signal{ padding-bottom:13px; }
.live-signal .lr-name{ color:var(--aqua); }
.live-row{ display:flex; align-items:center; gap:12px; font-size:14px; flex-wrap:wrap; }

.live-q{ display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap; }
.spark{ display:flex; gap:1px; height:9px; flex:1; min-width:180px; max-width:340px; }
.spark i{ flex:1; border-radius:1px; background:#2b2440; }
.spark i.q1{ background:#ff6b8a; }
.spark i.q2{ background:#ffcf6b; }
.spark i.q3{ background:#3ddc97; }
.lq-txt{ font-size:12px; color:var(--muted); }
.lr-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background:#6f6788; }
.lr-dot.ok{ background:#3ddc97; box-shadow:0 0 8px #3ddc9766; }
.lr-dot.warn{ background:#ffcf6b; }
.lr-dot.err{ background:#ff6b8a; }
.lr-name{ font-weight:600; min-width:110px; }
.lr-state{ color:var(--muted); font-size:13px; }
.lr-meta{ margin-left:auto; display:flex; gap:14px; color:var(--muted); font-size:12.5px; white-space:nowrap; }
.live-row .switch{ margin-left:12px; }
.lr-actions{ display:flex; gap:8px; margin-left:10px; }
.lr-actions .icon-btn{ width:31px; height:31px; border-radius:9px; font-size:13px; }

.live-head-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.cupo{ font-size:12px; color:var(--muted); background:#ffffff08; border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-weight:600; white-space:nowrap; }
.btn-add{ padding:9px 15px; font-size:13.5px; }

.obs-guide{ margin-top:6px; }
.obs-guide summary{ cursor:pointer; color:var(--aqua); font-size:13.5px; font-weight:600; padding:6px 0; list-style:none; }
.obs-guide summary::-webkit-details-marker{ display:none; }
.obs-guide summary::after{ content:" ▾"; font-size:11px; }
.obs-guide[open] summary::after{ content:" ▴"; }
.obs-guide .help-steps{ margin-top:8px; }
.badge-low{ background:#ffcf6b14; color:#ffe1a3; border:1px solid #ffcf6b44; }

.regen-warn{
	background:#ffcf6b10; border:1px solid #ffcf6b33; border-radius:12px;
	padding:12px 14px; font-size:13.5px; color:#ffe6b8; line-height:1.6; margin-bottom:14px;
}
.regen-warn strong{ color:#ffd98a; }

.relay-grid{ display:grid; gap:12px; margin-top:6px; }
.relay-srv{ border:1px solid var(--line); border-radius:12px; padding:13px 16px; }
.relay-srv-h{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:600; font-size:14px; margin-bottom:10px; }
.relay-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.relay-chip{
	background:#ffffff06; border:1px solid var(--line); border-radius:9px;
	padding:6px 10px; font-size:12.5px; color:var(--muted);
}
.relay-chip strong{ color:var(--text); font-weight:600; margin-left:5px; }

@media (max-width:560px){
	/* El detalle numérico baja a su propia línea; el switch se queda
	   arriba a la derecha, junto al nombre. */
	.lr-meta{ order:10; margin-left:21px; width:100%; }
	.live-row .switch{ margin-left:auto; }
	.live-head-right{ width:100%; justify-content:flex-start; }
}