/* El atributo [hidden] pierde contra reglas de clase que setean display (ej .app{display:grid}) por
   especificidad -- forzarlo a ganar siempre, es el toggle real de visibilidad de toda la app. */
[hidden]{ display: none !important; }

/* ══════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════ */
:root{
  /* superficies -- base neutra fría con identidad EZ (el acento sigue siendo teal). Antes
     era todo verde militar monocromo ("panel de misiles"): ahora los 3 paneles tienen su
     propio tono para que se distingan de un vistazo -- ver --surface-inbox/conv/profile. */
  --bg-deep:      #070907;
  --bg-app:       #0D1110;
  --surface-1:    #171D1B;   /* panel genérico / modales / config */
  --surface-2:    #212927;   /* cabeceras de panel, elementos elevados */
  --surface-3:    #2C3633;
  --line:         #2B3431;
  --line-strong:  #3D4A45;

  /* un tono por panel: la bandeja se hunde (rail), la conversación es la más clara
     (el escenario), el perfil vira a azul-teal (el panel de datos). */
  --surface-inbox:   #101614;
  --surface-conv:    #1B2320;
  --surface-profile: #121A20;

  /* acento */
  --teal:         #34D17C;
  --teal-bright:  #5CF0A0;
  --teal-deep:    #1F8F55;
  --teal-soft:    rgba(52,209,124,.16);

  /* texto */
  --text:         #F2F7EF;
  --text-dim:     #9DB093;
  --text-faint:   #66795C;

  /* señales */
  --alert:        #FF5C6B;
  --amber:        #F5B342;

  /* forma */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 18px 45px -20px rgba(0,0,0,.75);
  --shadow-panel: 0 10px 30px -18px rgba(0,0,0,.8);

  --sidebar-w: 208px;
  --inbox-w:   282px;
  --profile-w: 268px;

  /* tintes que cambian por tema (valores default = tema oscuro) */
  --field-bg:      rgba(6,22,32,.4);
  --field-bg-soft: rgba(6,22,32,.3);
  --hover-tint:    rgba(255,255,255,.035);
  --hover-tint-2:  rgba(255,255,255,.1);
  --name-strong:   #ffffff;
  --body-glow-1:   rgba(33,176,168,.10);
  --body-glow-2:   rgba(33,120,111,.12);
}

/* ── TEMA CLARO ── */
:root[data-theme="light"]{
  --bg-deep:      #E6EAEE;
  --bg-app:       #F3F5F8;
  --surface-1:    #FFFFFF;
  --surface-2:    #EEF2F6;
  --surface-3:    #E1E7EC;
  --line:         #DCE2E8;
  --line-strong:  #C3CCD4;
  --surface-inbox:   #EEF2F6;
  --surface-conv:    #FFFFFF;
  --surface-profile: #F4F7FA;
  --teal:         #12A566;
  --teal-bright:  #0FB06E;
  --teal-deep:    #0C7A4C;
  --teal-soft:    rgba(18,165,102,.13);
  --text:         #1B2A2F;
  --text-dim:     #56646C;
  --text-faint:   #8B97A0;
  --shadow:       0 18px 45px -22px rgba(25,45,50,.22);
  --shadow-panel: 0 8px 24px -16px rgba(25,45,50,.18);
  --field-bg:      rgba(20,40,50,.05);
  --field-bg-soft: rgba(20,40,50,.035);
  --hover-tint:    rgba(20,30,35,.05);
  --hover-tint-2:  rgba(20,30,35,.09);
  --name-strong:   #0E1A1E;
  --body-glow-1:   rgba(18,165,102,.06);
  --body-glow-2:   rgba(18,165,102,.05);
}

/* ── TEMA AZUL MARINO ── */
:root[data-theme="navy"]{
  --bg-deep:      #060B16;
  --bg-app:       #0A1220;
  --surface-1:    #111C30;
  --surface-2:    #17253C;
  --surface-3:    #223350;
  --line:         #1F3050;
  --line-strong:  #30456B;
  --surface-inbox:   #0C1526;
  --surface-conv:    #14203A;
  --surface-profile: #101A30;
  --text:         #EAF0FA;
  --text-dim:     #9AAAC6;
  --text-faint:   #63769A;
  --field-bg:      rgba(4,10,22,.5);
  --field-bg-soft: rgba(4,10,22,.38);
  --body-glow-1:   rgba(52,209,124,.08);
  --body-glow-2:   rgba(58,120,220,.10);
}
/* ── ROJO DIABLO ── (fondo casi negro con tinte carmín, acento rojo, error en ámbar) */
:root[data-theme="rojo"]{
  --bg-deep:#0A0405; --bg-app:#120708;
  --surface-1:#1C0D0F; --surface-2:#271215; --surface-3:#38191D;
  --line:#3A181C; --line-strong:#5A2228;
  --surface-inbox:#140809; --surface-conv:#1E0E11; --surface-profile:#170A0C;
  --text:#F6E9E9; --text-dim:#C89B9E; --text-faint:#8A5F63;
  --teal:#E0384B; --teal-bright:#FF5A6E; --teal-deep:#A61F30; --teal-soft:rgba(224,56,75,.16);
  --alert:#F5B342; --amber:#F5B342;
  --field-bg:rgba(255,90,110,.06); --field-bg-soft:rgba(255,90,110,.038);
  --hover-tint:rgba(255,255,255,.045); --hover-tint-2:rgba(255,255,255,.1);
  --name-strong:#ffffff;
  --body-glow-1:rgba(224,56,75,.12); --body-glow-2:rgba(150,20,40,.14);
}
/* ── ÁMBAR ── (carbón cálido, acento amarillo, error rojo) */
:root[data-theme="ambar"]{
  --bg-deep:#0C0B08; --bg-app:#131109;
  --surface-1:#1B1810; --surface-2:#252112; --surface-3:#332D18;
  --line:#332C16; --line-strong:#4E441F;
  --surface-inbox:#141208; --surface-conv:#1D1A0F; --surface-profile:#16130B;
  --text:#F7F2E4; --text-dim:#C4B792; --text-faint:#867B58;
  --teal:#F5C518; --teal-bright:#FFD84D; --teal-deep:#B8901F; --teal-soft:rgba(245,197,24,.15);
  --alert:#FF5C6B; --amber:#F5C518;
  --field-bg:rgba(245,197,24,.05); --field-bg-soft:rgba(245,197,24,.035);
  --hover-tint:rgba(255,255,255,.045); --hover-tint-2:rgba(255,255,255,.1);
  --name-strong:#ffffff;
  --body-glow-1:rgba(245,197,24,.08); --body-glow-2:rgba(180,110,20,.10);
}
/* ── DORADO ── (marrón-negro muy oscuro, acento oro, sala VIP) */
:root[data-theme="oro"]{
  --bg-deep:#0A0806; --bg-app:#100D08;
  --surface-1:#191309; --surface-2:#231B0E; --surface-3:#332813;
  --line:#332714; --line-strong:#4F3D1E;
  --surface-inbox:#130E07; --surface-conv:#1C160C; --surface-profile:#15100A;
  --text:#F5EEDD; --text-dim:#C3B189; --text-faint:#877556;
  --teal:#D4AF37; --teal-bright:#EAC66B; --teal-deep:#9C7C22; --teal-soft:rgba(212,175,55,.14);
  --alert:#E0554E; --amber:#EAC66B;
  --field-bg:rgba(212,175,55,.05); --field-bg-soft:rgba(212,175,55,.035);
  --hover-tint:rgba(255,255,255,.04); --hover-tint-2:rgba(255,255,255,.09);
  --name-strong:#FBF4E2;
  --body-glow-1:rgba(212,175,55,.09); --body-glow-2:rgba(150,110,30,.12);
}
/* ── GRIS ── (gama neutra, acento gris medio, minimal) */
:root[data-theme="gris"]{
  --bg-deep:#0C0D0E; --bg-app:#131517;
  --surface-1:#1B1D1F; --surface-2:#24272A; --surface-3:#31363A;
  --line:#2C3033; --line-strong:#434A4F;
  --surface-inbox:#141618; --surface-conv:#1D2023; --surface-profile:#17191B;
  --text:#EDEFF1; --text-dim:#A0A7AD; --text-faint:#6B7378;
  --teal:#6D7880; --teal-bright:#AEB8BF; --teal-deep:#4C555B; --teal-soft:rgba(140,152,160,.16);
  --alert:#E5675F; --amber:#E0A94B;
  --field-bg:rgba(255,255,255,.04); --field-bg-soft:rgba(255,255,255,.028);
  --hover-tint:rgba(255,255,255,.045); --hover-tint-2:rgba(255,255,255,.1);
  --name-strong:#ffffff;
  --body-glow-1:rgba(154,167,176,.05); --body-glow-2:rgba(120,130,140,.06);
}
/* ── NÉBULA ── (sugerencia propia: paleta tipo Catppuccin, base violácea, acento malva --
   probada para leer código horas sin cansar la vista) */
:root[data-theme="nebula"]{
  --bg-deep:#161320; --bg-app:#1A1726;
  --surface-1:#221E32; --surface-2:#2B2740; --surface-3:#383350;
  --line:#332F47; --line-strong:#494267;
  --surface-inbox:#1C1830; --surface-conv:#252036; --surface-profile:#1F1B33;
  --text:#E7E2F5; --text-dim:#A7A0C4; --text-faint:#6E6890;
  --teal:#B99DF6; --teal-bright:#D2BEFF; --teal-deep:#7F5FD0; --teal-soft:rgba(185,157,246,.16);
  --alert:#F38BA8; --amber:#F9C784;
  --field-bg:rgba(185,157,246,.06); --field-bg-soft:rgba(185,157,246,.04);
  --hover-tint:rgba(255,255,255,.045); --hover-tint-2:rgba(255,255,255,.1);
  --name-strong:#ffffff;
  --body-glow-1:rgba(185,157,246,.10); --body-glow-2:rgba(120,90,200,.12);
}

/* ══════════════════════════════════════════════════════════════════════════════
   TEMÁTICAS SECRETAS · se activan escribiendo un código en la barra lateral
   (#themeCodeForm). NO persisten: F5 / cerrar sesión vuelve al tema público.
   batman · flash · spiderman · tini · boca · river · barca · vice · afa
   Cada una: recoloreo total (tokens) + arte SVG en los costados (body::before/after,
   visible en los márgenes de pantallas anchas) + wash ambiental sobre todo
   (html::before) + héroe animado (html::after) + cartel de entrada (#secretIntro).
   TODO el arte es ilustración original propia — sin fotos ni logos/escudos oficiales
   (marca registrada / derecho de imagen).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── capas comunes ─────────────────────────────────────────────────────────── */
/* franjas verticales de arte/foto a los costados — SIEMPRE visibles (también con un
   chat abierto): van por ENCIMA de los paneles (z 9986) pero con máscara que las
   desvanece hacia el centro para no tapar la lectura. --sec-side-op ajustable. */
html[data-secret] body::before,
html[data-secret] body::after{
  content:""; position:fixed; top:0; bottom:0; width:var(--sec-side-w,min(21vw,260px));
  z-index:9986; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  opacity:var(--sec-side-op,.5);
}
html[data-secret] body::before{
  left:0; background-image:var(--sec-left,none);
  -webkit-mask:linear-gradient(90deg,#000 34%,transparent); mask:linear-gradient(90deg,#000 34%,transparent);
}
html[data-secret] body::after{
  right:0; background-image:var(--sec-right,none);
  -webkit-mask:linear-gradient(270deg,#000 34%,transparent); mask:linear-gradient(270deg,#000 34%,transparent);
}

/* logo "EZ Agentes" propio por temática (TUNEO) */
html.sec-logo-img .brand-mark{
  background: var(--sec-logo-img, none) center/contain no-repeat !important;
  box-shadow: none !important;
}
/* logo con sonido: clickeable + un puntito que lo indica */
.brand-mark.has-sound{ position: relative; }
.brand-mark.has-sound::after{
  content: "♪"; position: absolute; right: -3px; top: -3px;
  font-size: 10px; line-height: 1; color: var(--teal-bright);
  background: var(--bg-app); border-radius: 50%; padding: 1px 2px;
}
.brand-name.has-sound{ text-decoration: underline dotted var(--teal); text-underline-offset: 3px; }

/* fondo del chat por temática (tipo wallpaper de WhatsApp) — se ve al abrir un chat.
   Un velo del color de superficie encima para que las burbujas y el texto se lean.
   --sec-chat-scrim = opacidad del velo (100% = tapado / no se ve la foto). */
html[data-secret] #messages{
  background-image:
    linear-gradient(color-mix(in srgb, var(--surface-conv) var(--sec-chat-scrim,88%), transparent),
                    color-mix(in srgb, var(--surface-conv) var(--sec-chat-scrim,88%), transparent)),
    var(--sec-chat-bg, linear-gradient(transparent,transparent));
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
}

/* wash ambiental — encima de todo, muy sutil */
html[data-secret]::before{
  content:""; position:fixed; inset:0; z-index:9990; pointer-events:none;
  background:var(--sec-wash,none);
  background-repeat:no-repeat,no-repeat,repeat;
  background-position:var(--sec-wash-pos, center, right -60px top 48px, 0 0);
  background-size:var(--sec-wash-size, cover, 240px, auto);
  opacity:var(--sec-wash-op,.1);
  mix-blend-mode:var(--sec-wash-blend, normal);
}
/* héroe animado — geometría/anim base; cada tema pone el sprite y ajusta */
html[data-secret]::after{ content:none; }
html[data-secret="batman"]::after,
html[data-secret="flash"]::after,
html[data-secret="spiderman"]::after,
html[data-secret="tini"]::after{
  content:""; position:fixed; z-index:9991; pointer-events:none;
  background-repeat:no-repeat; opacity:var(--sec-hero-op,.6);
  will-change:transform;
}
/* si el TUNEO puso una foto de personaje: la usa entera (sin sprite de zancada) y
   solo la desliza de lado a lado */
html[data-secret][style*="--sec-hero-img"]::after{
  left:0; bottom:0; width:min(24vw,260px); height:min(38vh,300px);
  background-image:var(--sec-hero-img) !important;
  background-size:contain !important;
  background-position:left bottom !important;
  animation:heroAcross var(--sec-hero-speed,7s) linear infinite !important;
}

/* ── cartel de entrada ─────────────────────────────────────────────────────── */
#secretIntro{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; opacity:0;
  background:radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,.55), transparent 75%);
}
#secretIntro .si-kick{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--teal-bright,#fff); opacity:.9;
}
#secretIntro .si-name{
  font-family:"Unbounded","Hanken Grotesk",system-ui,sans-serif;
  font-size:clamp(30px,7vw,68px); font-weight:800; letter-spacing:.04em;
  color:var(--name-strong,#fff);
  text-shadow:0 0 24px var(--teal,rgba(255,255,255,.5)), 0 6px 30px rgba(0,0,0,.5);
}
#secretIntro.go{ animation:secIntro 2.8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes secIntro{
  0%{ opacity:0; transform:scale(.9) }
  12%{ opacity:1; transform:scale(1) }
  70%{ opacity:1; transform:scale(1) }
  100%{ opacity:0; transform:scale(1.04) }
}

/* ═══ BATMAN ═══ Gotham: negro carbón + bati-señal · corre cruzando la base ═══ */
:root[data-theme="batman"]{
  --bg-deep:#040506; --bg-app:#090B0F;
  --surface-1:#111319; --surface-2:#181B23; --surface-3:#232733;
  --line:#1B1F29; --line-strong:#2C313F;
  --surface-inbox:#0C0E13; --surface-conv:#12141B; --surface-profile:#0E1015;
  --text:#E9EBF1; --text-dim:#868FA3; --text-faint:#535B6D;
  --teal:#FFDF00; --teal-bright:#FFEA4D; --teal-deep:#C9AF00; --teal-soft:rgba(255,223,0,.12);
  --alert:#FF443A; --amber:#FFDF00;
  --shadow:0 22px 55px -20px rgba(0,0,0,.9); --shadow-panel:0 12px 34px -16px rgba(0,0,0,.92);
  --field-bg:rgba(255,223,0,.045); --field-bg-soft:rgba(255,223,0,.03);
  --hover-tint:rgba(255,255,255,.04); --hover-tint-2:rgba(255,223,0,.12);
  --name-strong:#FFE94D;
  --body-glow-1:rgba(255,223,0,.05); --body-glow-2:rgba(15,18,28,.6);
  --sec-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 440' preserveAspectRatio='xMinYMax meet'%3E%3Cg fill='%23000'%3E%3Crect x='2' y='150' width='30' height='290'/%3E%3Crect x='36' y='78' width='38' height='362'/%3E%3Crect x='78' y='176' width='24' height='264'/%3E%3Crect x='104' y='116' width='32' height='324'/%3E%3Cpolygon points='36,78 55,44 74,78'/%3E%3Cpolygon points='104,116 120,92 136,116'/%3E%3C/g%3E%3Cg fill='%23FFDF00' opacity='.5'%3E%3Crect x='46' y='116' width='6' height='9'/%3E%3Crect x='58' y='140' width='6' height='9'/%3E%3Crect x='46' y='176' width='6' height='9'/%3E%3Crect x='58' y='210' width='6' height='9'/%3E%3Crect x='112' y='150' width='5' height='8'/%3E%3Crect x='112' y='188' width='5' height='8'/%3E%3Crect x='12' y='200' width='5' height='8'/%3E%3Crect x='12' y='236' width='5' height='8'/%3E%3C/g%3E%3C/svg%3E");
  --sec-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 440' preserveAspectRatio='xMaxYMax meet'%3E%3Cg fill='%23000'%3E%3Crect x='110' y='150' width='30' height='290'/%3E%3Crect x='66' y='92' width='36' height='348'/%3E%3Crect x='38' y='170' width='24' height='270'/%3E%3Crect x='2' y='124' width='30' height='316'/%3E%3Cpolygon points='66,92 84,60 102,92'/%3E%3C/g%3E%3Ccircle cx='92' cy='70' r='46' fill='%23FFDF00' opacity='.14'/%3E%3Cpath fill='%23FFDF00' opacity='.9' d='M92 46c-7 0-12 8-12 8s-5-16-24-16c-2 14 5 22 5 22s-28 9-28 37c11-5 20-2 20-2s-8 9-8 22c15 0 24-10 24-10s5 16 19 16 19-16 19-16 9 10 24 10c0-13-8-22-8-22s9-3 20 2c0-28-28-37-28-37s7-8 5-22c-19 0-24 16-24 16s-5-8-12-8z'/%3E%3C/svg%3E");
  --sec-wash:radial-gradient(120% 65% at 50% -14%, rgba(255,223,0,.16), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFDF00' d='M256 128c-16 0-28 18-28 18s-10-34-52-34c-4 30 10 48 10 48s-64 20-64 82c26-12 46-6 46-6s-16 20-16 52c34 0 54-22 54-22s10 34 40 34 40-34 40-34 20 22 54 22c0-32-16-52-16-52s20-6 46 6c0-62-64-82-64-82s14-18 10-48c-42 0-52 34-52 34s-12-18-28-18z'/%3E%3C/svg%3E"),
    linear-gradient(0deg, rgba(0,0,0,.45), transparent 42%);
  --sec-wash-op:.13;
}
html[data-secret="batman"]::before{ animation:secBeam 7s ease-in-out infinite; }
html[data-secret="batman"]::after{
  left:0; bottom:0; width:190px; height:150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cg fill='%230a0a0d'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M96 40 C60 34 34 58 12 128 C34 108 52 112 70 96 C60 74 78 52 96 40Z' opacity='.95'/%3E%3Cpath d='M118 22 l4 -16 5 14 5 -12 3 15Z'/%3E%3Ccircle cx='126' cy='30' r='13'/%3E%3Cpath d='M112 42 q20 -8 34 4 l-6 40 q-18 8 -32 -2Z'/%3E%3Cpath d='M142 50 q22 6 26 26' stroke='%230a0a0d' stroke-width='11' fill='none' stroke-linecap='round'/%3E%3Cpath d='M116 54 q-18 4 -22 24' stroke='%230a0a0d' stroke-width='11' fill='none' stroke-linecap='round'/%3E%3Cpath d='M132 84 q14 20 6 44 q-2 8 -12 12' stroke='%230a0a0d' stroke-width='13' fill='none' stroke-linecap='round'/%3E%3Cpath d='M120 86 q-16 20 -40 26' stroke='%230a0a0d' stroke-width='13' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(200 0)'%3E%3Cpath d='M96 40 C58 30 30 66 6 150 C32 122 52 122 72 104 C60 78 80 52 96 40Z' opacity='.95'/%3E%3Cpath d='M118 22 l4 -16 5 14 5 -12 3 15Z'/%3E%3Ccircle cx='126' cy='30' r='13'/%3E%3Cpath d='M112 42 q20 -8 34 4 l-4 40 q-18 8 -32 -2Z'/%3E%3Cpath d='M144 52 q10 22 2 44' stroke='%230a0a0d' stroke-width='11' fill='none' stroke-linecap='round'/%3E%3Cpath d='M114 52 q-20 10 -18 30' stroke='%230a0a0d' stroke-width='11' fill='none' stroke-linecap='round'/%3E%3Cpath d='M128 84 q20 12 40 6' stroke='%230a0a0d' stroke-width='13' fill='none' stroke-linecap='round'/%3E%3Cpath d='M118 86 q-10 22 -4 44 q2 8 12 12' stroke='%230a0a0d' stroke-width='13' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23FFDF00'%3E%3Crect x='112' y='78' width='24' height='5'/%3E%3Crect x='312' y='78' width='24' height='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:380px 150px;
  animation:runCycle .28s steps(2) infinite, runAcross 3.6s linear infinite;
}

/* ═══ FLASH ═══ rojo/oro · sprinta con estela de rayos ═════════════════════ */
:root[data-theme="flash"]{
  --bg-deep:#1A0304; --bg-app:#260406;
  --surface-1:#360709; --surface-2:#43090C; --surface-3:#560D11;
  --line:#4C0C10; --line-strong:#7A171C;
  --surface-inbox:#2C0507; --surface-conv:#3A080B; --surface-profile:#300608;
  --text:#FFECE4; --text-dim:#D69A93; --text-faint:#9A5C58;
  --teal:#FFD100; --teal-bright:#FFE04D; --teal-deep:#C79E00; --teal-soft:rgba(255,209,0,.16);
  --alert:#FF5C4D; --amber:#FFD100;
  --field-bg:rgba(255,209,0,.06); --field-bg-soft:rgba(255,209,0,.04);
  --hover-tint:rgba(255,255,255,.05); --hover-tint-2:rgba(255,209,0,.16);
  --name-strong:#FFE79E;
  --body-glow-1:rgba(255,209,0,.10); --body-glow-2:rgba(200,20,27,.18);
  --sec-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 340'%3E%3Cpath fill='%23E4141B' stroke='%23FFD100' stroke-width='7' stroke-linejoin='round' d='M78 14 L24 172 L58 172 L40 320 L104 128 L64 128 Z'/%3E%3C/svg%3E");
  --sec-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 340'%3E%3Cg transform='translate(120 0) scale(-1 1)'%3E%3Cpath fill='%23E4141B' stroke='%23FFD100' stroke-width='7' stroke-linejoin='round' d='M78 14 L24 172 L58 172 L40 320 L104 128 L64 128 Z'/%3E%3C/g%3E%3C/svg%3E");
  --sec-wash:radial-gradient(90% 60% at 50% 0%, rgba(255,209,0,.14), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='92' fill='%23FFFFFF'/%3E%3Ccircle cx='100' cy='100' r='92' fill='none' stroke='%23B01015' stroke-width='10'/%3E%3Cpath fill='%23E4141B' d='M114 22 L62 108 L92 108 L84 178 L142 90 L108 90 Z'/%3E%3C/svg%3E"),
    repeating-linear-gradient(115deg, rgba(255,209,0,.1) 0 2px, transparent 2px 12px);
  --sec-wash-op:.13; --sec-wash-blend:screen;
}
html[data-secret="flash"]::before{ animation:secSpeed 1.1s linear infinite; }
html[data-secret="flash"]::after{
  left:0; bottom:4px; width:200px; height:160px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220'%3E%3Cg%3E%3Cg transform='translate(0 0)'%3E%3Cpath fill='%23FFD100' opacity='.5' d='M40 120 L200 96 L60 150 L210 128 L30 176Z'/%3E%3Cg fill='%23C8161C'%3E%3Ccircle cx='150' cy='52' r='16'/%3E%3Cpath d='M150 40 l16 -6 -6 12 14 -2 -10 12Z' fill='%23FFD100'/%3E%3Cpath d='M134 60 q22 -8 38 6 l-8 46 q-20 8 -34 -4Z'/%3E%3Cpath d='M166 70 q24 8 26 32' stroke='%23C8161C' stroke-width='12' fill='none' stroke-linecap='round'/%3E%3Cpath d='M138 74 q-22 6 -22 30' stroke='%23C8161C' stroke-width='12' fill='none' stroke-linecap='round'/%3E%3Cpath d='M156 108 q16 22 8 48 q-2 10 -14 14' stroke='%23C8161C' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M142 110 q-18 22 -46 30' stroke='%23C8161C' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M150 88 l14 6' stroke='%23FFD100' stroke-width='6'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(200 0)'%3E%3Cpath fill='%23FFD100' opacity='.5' d='M30 122 L190 92 L50 150 L200 122 L20 180Z'/%3E%3Cg fill='%23C8161C'%3E%3Ccircle cx='150' cy='52' r='16'/%3E%3Cpath d='M150 40 l16 -6 -6 12 14 -2 -10 12Z' fill='%23FFD100'/%3E%3Cpath d='M134 60 q22 -8 38 6 l-6 46 q-20 8 -34 -4Z'/%3E%3Cpath d='M168 64 q12 24 2 46' stroke='%23C8161C' stroke-width='12' fill='none' stroke-linecap='round'/%3E%3Cpath d='M136 64 q-24 12 -20 34' stroke='%23C8161C' stroke-width='12' fill='none' stroke-linecap='round'/%3E%3Cpath d='M150 106 q22 14 46 8' stroke='%23C8161C' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M140 108 q-10 24 -2 48 q2 10 14 14' stroke='%23C8161C' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:400px 160px;
  background-position:0 0;
  animation:runFlashCycle .2s steps(2) infinite, runFast 2.4s linear infinite;
}

/* ═══ SPIDER-MAN ═══ rojo/azul · se columpia de la telaraña ═══════════════ */
:root[data-theme="spiderman"]{
  --bg-deep:#0A0F24; --bg-app:#0E1530;
  --surface-1:#141D40; --surface-2:#1B264F; --surface-3:#243163;
  --line:#1F2B57; --line-strong:#33438A;
  --surface-inbox:#101838; --surface-conv:#172145; --surface-profile:#121A3A;
  --text:#EAF0FF; --text-dim:#9FB0DA; --text-faint:#6577A8;
  --teal:#E23636; --teal-bright:#FF5A5A; --teal-deep:#B21F1F; --teal-soft:rgba(226,54,54,.16);
  --alert:#FF6B6B; --amber:#4A90E2;
  --field-bg:rgba(226,54,54,.06); --field-bg-soft:rgba(74,144,226,.05);
  --hover-tint:rgba(255,255,255,.045); --hover-tint-2:rgba(226,54,54,.14);
  --name-strong:#FFFFFF;
  --body-glow-1:rgba(226,54,54,.1); --body-glow-2:rgba(31,60,140,.2);
  --sec-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23C8102E' stroke-width='2.4' opacity='.85'%3E%3Cpath d='M0 0 L300 44 M0 0 L272 118 M0 0 L210 200 M0 0 L126 264 M0 0 L44 300 M0 0 L2 300'/%3E%3Cpath d='M42 8 Q74 62 8 44 M100 20 Q160 118 20 100 M158 36 Q244 190 36 158 M220 52 Q300 250 52 220'/%3E%3C/g%3E%3C/svg%3E");
  --sec-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%234A90E2' stroke-width='2.4' opacity='.8' transform='translate(300 0) scale(-1 1)'%3E%3Cpath d='M0 0 L300 44 M0 0 L272 118 M0 0 L210 200 M0 0 L126 264 M0 0 L44 300'/%3E%3Cpath d='M42 8 Q74 62 8 44 M100 20 Q160 118 20 100 M158 36 Q244 190 36 158 M220 52 Q300 250 52 220'/%3E%3C/g%3E%3C/svg%3E");
  --sec-wash:radial-gradient(80% 60% at 50% 0%, rgba(226,54,54,.1), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23111'%3E%3Cellipse cx='100' cy='104' rx='15' ry='34'/%3E%3Cpath d='M100 70 C60 20 30 30 12 18 C40 40 40 66 78 92 Z'/%3E%3Cpath d='M100 70 C140 20 170 30 188 18 C160 40 160 66 122 92 Z'/%3E%3Cpath d='M100 120 C60 170 30 160 12 182 C40 160 44 140 80 118 Z'/%3E%3Cpath d='M100 120 C140 170 170 160 188 182 C160 160 156 140 120 118 Z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(0deg, rgba(10,15,40,.35), transparent 45%);
  --sec-wash-op:.13;
}
html[data-secret="spiderman"]::after{
  left:0; top:0; width:150px; height:300px;
  transform-origin:24% 4%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'%3E%3Cline x1='40' y1='0' x2='96' y2='150' stroke='%23ffffff' stroke-width='2.5'/%3E%3Cg%3E%3Cpath d='M96 150 q18 4 20 -8' stroke='%23E4141B' stroke-width='14' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='118' cy='150' r='17' fill='%23E4141B'/%3E%3Cpath d='M104 160 q24 -6 40 8 l-10 54 q-24 10 -42 -4 Z' fill='%23E4141B'/%3E%3Cpath d='M100 168 q-20 8 -18 34' stroke='%23E4141B' stroke-width='14' fill='none' stroke-linecap='round'/%3E%3Cpath d='M132 214 q16 26 6 58 q-4 14 4 30' stroke='%231C57C4' stroke-width='17' fill='none' stroke-linecap='round'/%3E%3Cpath d='M110 216 q-10 30 6 56 q10 16 6 34' stroke='%231C57C4' stroke-width='17' fill='none' stroke-linecap='round'/%3E%3Cg stroke='%23ffffff' stroke-width='1.4' opacity='.55'%3E%3Cpath d='M110 158 h30 M108 176 h40 M112 196 h30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:150px 300px;
  animation:webSwing 6.5s ease-in-out infinite;
}

/* ═══ TINI ═══ pop argentino: mariposas neón, violeta/rosa/cyan, glitter ═══ */
:root[data-theme="tini"]{
  --bg-deep:#150425; --bg-app:#1D0733;
  --surface-1:#2A0E49; --surface-2:#361358; --surface-3:#471C71;
  --line:#3B1660; --line-strong:#5C2A93;
  --surface-inbox:#230A3E; --surface-conv:#2E1050; --surface-profile:#260B44;
  --text:#FCE9FF; --text-dim:#D2A6E8; --text-faint:#9A6EC0;
  --teal:#FF4FD8; --teal-bright:#FF87E6; --teal-deep:#C733A8; --teal-soft:rgba(255,79,216,.16);
  --alert:#FF5C8A; --amber:#4FE0E6;
  --field-bg:rgba(255,79,216,.07); --field-bg-soft:rgba(79,224,230,.05);
  --hover-tint:rgba(255,255,255,.05); --hover-tint-2:rgba(79,224,230,.16);
  --name-strong:#FFFFFF;
  --body-glow-1:rgba(255,79,216,.14); --body-glow-2:rgba(79,224,230,.12);
  --sec-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 400'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FF4FD8'/%3E%3Cstop offset='1' stop-color='%234FE0E6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23w)' opacity='.9'%3E%3Cg transform='translate(70 70) rotate(-14)'%3E%3Cpath d='M0 0 C-34 -30 -60 -8 -46 22 C-34 40 -8 22 0 4 C8 22 34 40 46 22 C60 -8 34 -30 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(46 190) rotate(10) scale(.8)'%3E%3Cpath d='M0 0 C-34 -30 -60 -8 -46 22 C-34 40 -8 22 0 4 C8 22 34 40 46 22 C60 -8 34 -30 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(92 310) rotate(-22) scale(1.15)'%3E%3Cpath d='M0 0 C-34 -30 -60 -8 -46 22 C-34 40 -8 22 0 4 C8 22 34 40 46 22 C60 -8 34 -30 0 0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --sec-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 400'%3E%3Cdefs%3E%3ClinearGradient id='w2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234FE0E6'/%3E%3Cstop offset='1' stop-color='%23FF4FD8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23w2)' opacity='.9'%3E%3Cg transform='translate(90 110) rotate(16) scale(1.1)'%3E%3Cpath d='M0 0 C-34 -30 -60 -8 -46 22 C-34 40 -8 22 0 4 C8 22 34 40 46 22 C60 -8 34 -30 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(112 250) rotate(-10) scale(.85)'%3E%3Cpath d='M0 0 C-34 -30 -60 -8 -46 22 C-34 40 -8 22 0 4 C8 22 34 40 46 22 C60 -8 34 -30 0 0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --sec-wash:radial-gradient(70% 55% at 50% 0%, rgba(255,79,216,.14), transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FF4FD8'/%3E%3Cstop offset='1' stop-color='%234FE0E6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23b)'%3E%3Cpath d='M100 92 C50 30 6 58 24 116 C42 156 82 118 100 84 C118 118 158 156 176 116 C194 58 150 30 100 92Z'/%3E%3Crect x='97' y='78' width='6' height='74' rx='3'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(125deg, rgba(255,79,216,.05) 0 3px, transparent 3px 16px);
  --sec-wash-op:.14; --sec-wash-blend:screen;
}
html[data-secret="tini"]::after{
  left:0; top:26%; width:120px; height:96px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FF4FD8'/%3E%3Cstop offset='1' stop-color='%234FE0E6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M60 50 C30 8 2 30 14 66 C26 92 50 66 60 44 C70 66 94 92 106 66 C118 30 90 8 60 50Z'/%3E%3Crect x='57' y='40' width='6' height='44' rx='3'/%3E%3C/g%3E%3Cg transform='translate(120 0)'%3E%3Cpath d='M60 50 C34 22 6 36 16 64 C26 84 48 64 60 46 C72 64 94 84 104 64 C114 36 86 22 60 50Z'/%3E%3Crect x='57' y='42' width='6' height='40' rx='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:240px 96px;
  animation:runTiniCycle .16s steps(2) infinite, flyArc 7s ease-in-out infinite;
}

/* ═══ BOCA JUNIORS ═══ azul y oro, La Bombonera ═══════════════════════════ */
:root[data-theme="boca"]{
  --bg-deep:#070C33; --bg-app:#0A1147;
  --surface-1:#0E1A63; --surface-2:#132277; --surface-3:#1B2E97;
  --line:#1D2E86; --line-strong:#2C41B0;
  --surface-inbox:#0B1450; --surface-conv:#101C63; --surface-profile:#0C1550;
  --text:#FFF6DE; --text-dim:#D8C58A; --text-faint:#94824C;
  --teal:#FFC72C; --teal-bright:#FFDB63; --teal-deep:#C99A1E; --teal-soft:rgba(255,199,44,.16);
  --alert:#FF6B6B; --amber:#FFDB63;
  --field-bg:rgba(255,199,44,.06); --field-bg-soft:rgba(255,199,44,.04);
  --hover-tint:rgba(255,255,255,.05); --hover-tint-2:rgba(255,199,44,.14);
  --name-strong:#FFE9A8;
  --body-glow-1:rgba(255,199,44,.12); --body-glow-2:rgba(13,26,99,.5);
  --sec-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Crect x='40' y='0' width='40' height='400' fill='%23FFC72C' opacity='.9'/%3E%3Cpath fill='%230A1147' d='M60 150 L70 182 L104 182 L76 202 L86 236 L60 214 L34 236 L44 202 L16 182 L50 182 Z'/%3E%3C/svg%3E");
  --sec-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Cg fill='%23FFC72C'%3E%3Cpath d='M60 200 L120 40 L120 360 Z' opacity='.22'/%3E%3Cg opacity='.85'%3E%3Cpolygon points='60,200 128,150 128,164'/%3E%3Cpolygon points='60,200 128,186 128,200'/%3E%3Cpolygon points='60,200 128,222 128,236'/%3E%3Cpolygon points='60,200 128,258 128,272'/%3E%3Cpolygon points='60,200 118,120 128,132'/%3E%3Cpolygon points='60,200 118,280 128,268'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --sec-wash:radial-gradient(70% 55% at 82% 8%, rgba(255,199,44,.18), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23FFC72C' d='M50 4 L61 38 L97 38 L68 60 L79 94 L50 72 L21 94 L32 60 L3 38 L39 38 Z'/%3E%3C/svg%3E"),
    linear-gradient(0deg, rgba(10,17,71,.45), transparent 50%);
  --sec-wash-op:.13;
}
html[data-secret="boca"]::before{ animation:secBreathe 7s ease-in-out infinite; }

/* ═══ RIVER PLATE ═══ blanco + banda roja (claro) ═══════════════════════════ */
:root[data-theme="river"]{
  --bg-deep:#EEF1F5; --bg-app:#F6F8FB;
  --surface-1:#FFFFFF; --surface-2:#EFF2F6; --surface-3:#E3E8EE;
  --line:#DEE3EA; --line-strong:#C6CDD7;
  --surface-inbox:#EFF2F6; --surface-conv:#FFFFFF; --surface-profile:#F4F7FA;
  --text:#1A1D26; --text-dim:#59606E; --text-faint:#8C93A0;
  --teal:#E4002B; --teal-bright:#FF223F; --teal-deep:#B00020; --teal-soft:rgba(228,0,43,.12);
  --alert:#E4002B; --amber:#111318;
  --shadow:0 18px 45px -22px rgba(30,30,40,.22); --shadow-panel:0 8px 24px -16px rgba(30,30,40,.18);
  --field-bg:rgba(20,22,30,.05); --field-bg-soft:rgba(20,22,30,.035);
  --hover-tint:rgba(20,22,30,.05); --hover-tint-2:rgba(228,0,43,.1);
  --name-strong:#0C0E14;
  --body-glow-1:rgba(228,0,43,.07); --body-glow-2:rgba(20,22,30,.05);
  --sec-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Crect width='120' height='400' fill='%23ffffff'/%3E%3Cpolygon points='0,120 120,20 120,90 0,190' fill='%23E4002B'/%3E%3C/svg%3E");
  --sec-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Crect width='120' height='400' fill='%23ffffff'/%3E%3Cpolygon points='0,220 120,120 120,190 0,290' fill='%23E4002B'/%3E%3Cpath fill='%23E4002B' d='M60 300 L67 322 L90 322 L71 335 L78 358 L60 344 L42 358 L49 335 L30 322 L53 322 Z'/%3E%3C/svg%3E");
  --sec-wash:linear-gradient(118deg, transparent 0 42%, rgba(228,0,43,.6) 42% 58%, transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23E4002B' d='M50 6 L60 38 L94 38 L66 58 L77 92 L50 72 L23 92 L34 58 L6 38 L40 38 Z'/%3E%3C/svg%3E"),
    linear-gradient(0deg, transparent, transparent);
  --sec-wash-op:.1;
}

/* ═══ BARCELONA ═══ blaugrana + oro ══════════════════════════════════════ */
:root[data-theme="barca"]{
  --bg-deep:#0B0122; --bg-app:#13022E;
  --surface-1:#20063F; --surface-2:#2B0A4F; --surface-3:#3A1163;
  --line:#301056; --line-strong:#4A1D7E;
  --surface-inbox:#180330; --surface-conv:#210742; --surface-profile:#1A0435;
  --text:#F6E9FF; --text-dim:#C79BDE; --text-faint:#8A63A6;
  --teal:#D6006E; --teal-bright:#FF3D97; --teal-deep:#9C0050; --teal-soft:rgba(214,0,110,.16);
  --alert:#FF4D6D; --amber:#EDBB00;
  --field-bg:rgba(214,0,110,.07); --field-bg-soft:rgba(214,0,110,.045);
  --hover-tint:rgba(255,255,255,.05); --hover-tint-2:rgba(237,187,0,.16);
  --name-strong:#FFDE59;
  --body-glow-1:rgba(214,0,110,.12); --body-glow-2:rgba(0,77,152,.14);
  --sec-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Crect x='0' width='30' height='400' fill='%23004D98'/%3E%3Crect x='30' width='30' height='400' fill='%23A50044'/%3E%3Crect x='60' width='30' height='400' fill='%23004D98'/%3E%3Crect x='90' width='30' height='400' fill='%23A50044'/%3E%3Crect x='0' y='0' width='120' height='6' fill='%23EDBB00'/%3E%3C/svg%3E");
  --sec-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Crect x='0' width='30' height='400' fill='%23A50044'/%3E%3Crect x='30' width='30' height='400' fill='%23004D98'/%3E%3Crect x='60' width='30' height='400' fill='%23A50044'/%3E%3Crect x='90' width='30' height='400' fill='%23004D98'/%3E%3Cpath fill='none' stroke='%23EDBB00' stroke-width='5' d='M40 150 h40 v40 q0 30 -20 40 q-20 -10 -20 -40 z'/%3E%3C/svg%3E");
  --sec-wash:radial-gradient(75% 55% at 50% 0%, rgba(237,187,0,.1), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140'%3E%3Cpath fill='none' stroke='%23EDBB00' stroke-width='6' d='M12 12 h96 v70 q0 40 -48 54 q-48 -14 -48 -54 z'/%3E%3Cpath stroke='%23EDBB00' stroke-width='6' d='M60 14 v118 M14 50 h92'/%3E%3C/svg%3E"),
    repeating-linear-gradient(125deg, rgba(165,0,68,.06) 0 26px, rgba(0,77,152,.06) 26px 52px);
  --sec-wash-op:.12;
}

/* ═══ VICE ═══ synthwave Miami: rosa + cyan + grilla ═══════════════════════ */
:root[data-theme="vice"]{
  --bg-deep:#180A2E; --bg-app:#210F3E;
  --surface-1:#2C1450; --surface-2:#371A62; --surface-3:#452278;
  --line:#391F66; --line-strong:#54308F;
  --surface-inbox:#1D0C38; --surface-conv:#281148; --surface-profile:#200D3B;
  --text:#FCE8FF; --text-dim:#C79BE0; --text-faint:#8A63A8;
  --teal:#FF6EC7; --teal-bright:#FF9BDA; --teal-deep:#C74E9C; --teal-soft:rgba(255,110,199,.16);
  --alert:#FF5C8A; --amber:#2DE2E6;
  --field-bg:rgba(255,110,199,.06); --field-bg-soft:rgba(255,110,199,.04);
  --hover-tint:rgba(255,255,255,.05); --hover-tint-2:rgba(45,226,230,.16);
  --name-strong:#FFFFFF;
  --body-glow-1:rgba(255,110,199,.14); --body-glow-2:rgba(45,226,230,.12);
  --sec-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE24B'/%3E%3Cstop offset='1' stop-color='%23FF4D8D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='60' cy='150' r='60' fill='url(%23v)'/%3E%3Cg fill='%23210F3E'%3E%3Crect x='0' y='140' width='120' height='6'/%3E%3Crect x='0' y='152' width='120' height='9'/%3E%3Crect x='0' y='167' width='120' height='13'/%3E%3C/g%3E%3Cg stroke='%232DE2E6' stroke-width='2' opacity='.6'%3E%3Cpath d='M60 260 L-40 400 M60 260 L20 400 M60 260 L60 400 M60 260 L100 400 M60 260 L160 400'/%3E%3Cpath d='M0 300 H120 M0 340 H120 M0 380 H120'/%3E%3C/g%3E%3C/svg%3E");
  --sec-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Cg stroke='%23FF6EC7' stroke-width='2' opacity='.6'%3E%3Cpath d='M60 260 L-40 400 M60 260 L20 400 M60 260 L60 400 M60 260 L100 400 M60 260 L160 400'/%3E%3Cpath d='M0 300 H120 M0 340 H120 M0 380 H120'/%3E%3C/g%3E%3Cg fill='none' stroke='%232DE2E6' stroke-width='4'%3E%3Cpath d='M60 60 q-30 40 0 90 q30 -50 0 -90z'/%3E%3C/g%3E%3C/svg%3E");
  --sec-wash:linear-gradient(180deg, transparent 0 55%, rgba(45,226,230,.12) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE24B'/%3E%3Cstop offset='1' stop-color='%23FF4D8D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23s)' d='M22 112 A78 78 0 0 1 178 112 Z'/%3E%3Cg fill='%23210F3E'%3E%3Crect x='8' y='76' width='184' height='5'/%3E%3Crect x='8' y='87' width='184' height='7'/%3E%3Crect x='8' y='100' width='184' height='9'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(45,226,230,.1) 0 1px, transparent 1px 46px);
  --sec-wash-pos:center, center top 40px, 0 0; --sec-wash-size:cover, 260px, auto;
  --sec-wash-op:.14; --sec-wash-blend:screen;
}
html[data-secret="vice"]::before{ animation:secGrid 5s linear infinite; }

/* ═══ ARGENTINA (AFA) ═══ celeste/blanco + sol de mayo (claro) ═════════════ */
:root[data-theme="afa"]{
  --bg-deep:#E6F1FB; --bg-app:#F2F8FD;
  --surface-1:#FFFFFF; --surface-2:#E9F2FA; --surface-3:#DBE9F5;
  --line:#D5E4F1; --line-strong:#B9D0E6;
  --surface-inbox:#E9F2FA; --surface-conv:#FFFFFF; --surface-profile:#F1F7FC;
  --text:#0B2B45; --text-dim:#4E6B84; --text-faint:#8399AF;
  --teal:#5AA0DE; --teal-bright:#7CB8EC; --teal-deep:#3E82C4; --teal-soft:rgba(90,160,222,.14);
  --alert:#E4002B; --amber:#F0B429;
  --shadow:0 18px 45px -22px rgba(20,60,100,.2); --shadow-panel:0 8px 24px -16px rgba(20,60,100,.16);
  --field-bg:rgba(20,60,100,.05); --field-bg-soft:rgba(20,60,100,.035);
  --hover-tint:rgba(20,60,100,.05); --hover-tint-2:rgba(90,160,222,.12);
  --name-strong:#08243B;
  --body-glow-1:rgba(90,160,222,.1); --body-glow-2:rgba(240,180,41,.08);
  --sec-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Crect y='0' width='120' height='133' fill='%2375AADB'/%3E%3Crect y='133' width='120' height='134' fill='%23ffffff'/%3E%3Crect y='267' width='120' height='133' fill='%2375AADB'/%3E%3C/svg%3E");
  --sec-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Crect y='0' width='120' height='133' fill='%2375AADB'/%3E%3Crect y='133' width='120' height='134' fill='%23ffffff'/%3E%3Crect y='267' width='120' height='133' fill='%2375AADB'/%3E%3Cg fill='%23F6B40E'%3E%3Ccircle cx='60' cy='200' r='24'/%3E%3Cpolygon points='60,150 65,182 55,182'/%3E%3Cpolygon points='60,250 65,218 55,218'/%3E%3Cpolygon points='10,200 42,195 42,205'/%3E%3Cpolygon points='110,200 78,195 78,205'/%3E%3Cpolygon points='25,165 50,185 43,192'/%3E%3Cpolygon points='95,165 70,185 77,192'/%3E%3Cpolygon points='25,235 43,208 50,215'/%3E%3Cpolygon points='95,235 77,208 70,215'/%3E%3C/g%3E%3C/svg%3E");
  --sec-wash:radial-gradient(46% 40% at 84% 12%, rgba(240,180,41,.22), transparent 66%),
    linear-gradient(180deg, rgba(117,170,219,.16) 0 28%, transparent 28% 72%, rgba(117,170,219,.16) 72%),
    linear-gradient(0deg, transparent, transparent);
  --sec-wash-pos:center, center, 0 0; --sec-wash-size:cover, cover, auto;
  --sec-wash-op:.5;
}
html[data-secret="afa"]::after{
  content:""; position:fixed; right:26px; top:26px; width:130px; height:130px; z-index:9991; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23F6B40E'%3E%3Ccircle cx='100' cy='100' r='38'/%3E%3Cpolygon points='100,6 109,54 91,54'/%3E%3Cpolygon points='100,194 109,146 91,146'/%3E%3Cpolygon points='6,100 54,91 54,109'/%3E%3Cpolygon points='194,100 146,91 146,109'/%3E%3Cpolygon points='30,30 64,58 56,66'/%3E%3Cpolygon points='170,30 136,58 144,66'/%3E%3Cpolygon points='30,170 56,134 64,142'/%3E%3Cpolygon points='170,170 144,134 136,142'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='38' fill='none' stroke='%23C8961E' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.42;
  animation:secSpin 44s linear infinite;
}

/* ── keyframes ────────────────────────────────────────────────────────────── */
@keyframes secBeam{ 0%,100%{ opacity:.1 } 50%{ opacity:.18 } }
@keyframes secBreathe{ 0%,100%{ opacity:.1 } 50%{ opacity:.17 } }
@keyframes secSpin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
@keyframes secSpeed{ from{ background-position:center, right -60px top 48px, 0 0 } to{ background-position:center, right -60px top 48px, 46px 0 } }
@keyframes secGrid{ from{ background-position:center, center top 40px, 0 0 } to{ background-position:center, center top 40px, 46px 0 } }
/* ciclo de zancada (sprite de 2 poses) — el shift = ancho completo del sprite */
@keyframes runCycle{ from{ background-position-x:0 } to{ background-position-x:-380px } }
@keyframes runFlashCycle{ from{ background-position-x:0 } to{ background-position-x:-400px } }
@keyframes runTiniCycle{ from{ background-position-x:0 } to{ background-position-x:-240px } }
@keyframes runAcross{
  0%{ transform:translateX(-190px) translateY(0) }
  50%{ transform:translateX(50vw) translateY(-6px) }
  100%{ transform:translateX(102vw) translateY(0) }
}
@keyframes runFast{
  0%{ transform:translateX(-240px) }
  100%{ transform:translateX(104vw) }
}
@keyframes flyArc{
  0%{ transform:translateX(-14vw) translateY(0) rotate(-6deg) }
  25%{ transform:translateX(20vw) translateY(-46px) rotate(4deg) }
  50%{ transform:translateX(48vw) translateY(10px) rotate(-4deg) }
  75%{ transform:translateX(78vw) translateY(-38px) rotate(5deg) }
  100%{ transform:translateX(116vw) translateY(0) rotate(-6deg) }
}
@keyframes webSwing{
  0%{ transform:translateX(-6vw) rotate(-24deg) }
  50%{ transform:translateX(52vw) rotate(16deg) }
  100%{ transform:translateX(114vw) rotate(-24deg) }
}
@keyframes heroAcross{ 0%{ transform:translateX(-26vw) } 100%{ transform:translateX(120vw) } }

@media (prefers-reduced-motion: reduce){
  html[data-secret]::before,
  html[data-secret]::after,
  #secretIntro.go{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(900px 600px at 82% 8%,  var(--body-glow-1), transparent 60%),
    radial-gradient(700px 500px at 10% 95%, var(--body-glow-2), transparent 60%),
    var(--bg-deep);
  -webkit-font-smoothing: antialiased;
}

svg{
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button{ font: inherit; color: inherit; cursor: pointer; }

::-webkit-scrollbar{ width: 6px; height: 6px; }
::-webkit-scrollbar-thumb{ background: var(--surface-3); border-radius: 99px; }
::-webkit-scrollbar-track{ background: transparent; }

/* ══════════════════════════════════════════
   SHELL
   ══════════════════════════════════════════ */
.app{
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: minmax(0, 1fr); /* sin esto la fila implícita crece con el contenido en
    vez de quedar atada a los 100vh del grid -- rompe el min-height:0 de todo lo de adentro */
  height: 100vh;
  margin: 0 auto;
  max-width: 1520px;
  background: var(--bg-app);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ══════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════ */
.sidebar{
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  background: var(--bg-deep);
  border-right: 1px solid var(--line-strong);
}

.brand{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 2px 8px 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
/* logo EZ en CSS: 3 barras ascendentes teal sobre una teja verde oscura -- sin hijos,
   posiciones en % para que escale igual en el login (40px) y en el sidebar (46px).
   OJO -- bug real que había acá: "X% Y%" (2 valores) calcula la posición como
   (contenedor - imagen) * porcentaje, así que con la MISMA Y para 3 barras de alturas
   distintas cada una quedaba apoyada en un "piso" distinto (se podía calcular a mano:
   ~41px/43px/45px de base sobre 46px, en vez de una línea común) -- de ahí el
   descuadre. Fix: sintaxis de 4 valores ("left X% bottom Y%"), que mide el offset
   como porcentaje directo del contenedor sin importar el tamaño de cada barra -- con
   el mismo "bottom 16%" en las tres, las tres apoyan en la MISMA línea de base. */
.brand-mark{
  width: 46px; height: 46px; border-radius: 13px;
  background:
    linear-gradient(var(--teal-bright), var(--teal-bright)) left 14% bottom 16% / 16% 38% no-repeat,
    linear-gradient(var(--teal-bright), var(--teal))        left 42% bottom 16% / 16% 62% no-repeat,
    linear-gradient(var(--teal-bright), var(--teal-deep))   left 70% bottom 16% / 16% 88% no-repeat,
    linear-gradient(150deg, #14361f, #0a2415);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 10px 24px -12px var(--teal);
}
.brand-name{
  font-family: "Unbounded", sans-serif; font-weight: 800;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text);
}

.nav{ display: flex; flex-direction: column; gap: 2px; }
.nav-foot{ margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }

.nav-item{
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  text-decoration: none;
  transition: background .16s, color .16s;
}
.nav-item:hover{ background: var(--hover-tint); color: var(--text); }
.nav-item.is-active{ background: var(--teal-soft); color: var(--teal-bright); }
.nav-item.is-active::before{
  content: "";
  position: absolute; left: -14px; top: 50%;
  width: 3px; height: 20px;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  background: var(--teal-bright);
}

.dot{
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}
.dot-alert{ background: var(--alert); }
.nav-item .dot{ margin-left: auto; }

/* ══════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════ */
.main{ display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 14px;
  /* PWA instalada a pantalla completa (manifest ya tenía display:standalone, pero le
     faltaba esto): sin el padding extra, la barra de estado del celular (reloj/batería)
     queda flotando encima de este header en vez de arriba de todo. env() resuelve a 0
     en navegador normal, no cambia nada fuera de la app instalada. Necesita
     viewport-fit=cover en el <meta viewport> de index.html para funcionar. */
  padding-top: calc(20px + env(safe-area-inset-top));
}
.page-title{ margin: 0; font-family: "Unbounded", sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

.topbar-actions{ display: flex; align-items: center; gap: 12px; }

.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 0; border-radius: 99px;
  font-weight: 600; font-size: 13px;
}
.btn-primary{
  background: linear-gradient(135deg, var(--teal-bright), var(--teal));
  color: #04262A;
  box-shadow: 0 8px 20px -10px var(--teal);
}
.btn-primary:hover{ filter: brightness(1.07); }
.btn svg{ width: 15px; height: 15px; stroke-width: 2.4; }
.btn-danger{
  background: linear-gradient(135deg, #F0555B, #C6333A);
  color: #fff;
  box-shadow: 0 8px 20px -10px #F0555B;
}
.btn-danger:hover{ filter: brightness(1.06); }

.conv-danger{
  /* .profile-section ya pone 14px de padding horizontal, pero al ser la única sección
     con borde + fondo propio se nota mucho más pegada al borde del panel que el resto
     del contenido (que no tiene ningún límite visual) -- unos px extra de margen la
     separan un poco más. */
  margin: 18px 6px 0;
  padding: 14px;
  border: 1px solid rgba(240,85,91,.35);
  border-radius: var(--r-sm);
  background: rgba(240,85,91,.06);
}
.conv-danger .section-head h4{ color: var(--alert); }

/* ── Modal de Carga / Descarga de fichas ── */
.mov-title{ display: flex; align-items: center; gap: 8px; margin: 0; }
.mov-title .mov-ico{
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  font-weight: 800; font-size: 15px;
}
.mov-title.is-carga .mov-ico{ background: var(--teal-soft); color: var(--teal-bright); }
.mov-title.is-descarga .mov-ico{ background: rgba(245,179,66,.16); color: var(--amber); }

.mov-who{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px; }
.mov-user{ font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 15px; }
.mov-tags{ display: flex; gap: 6px; }
.mov-tag{
  padding: 2px 8px; border-radius: 99px;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  font-size: 11px; font-weight: 600; color: var(--text-dim);
}

.mov-stats{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px; margin-bottom: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.mov-stats > div{ display: flex; flex-direction: column; gap: 3px; }
.mov-stats span{ font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; }
.mov-stats b{ font-size: 14px; font-variant-numeric: tabular-nums; }
.mov-stats b.up{ color: var(--teal-bright); }
.mov-stats b.down{ color: var(--alert); }

.mov-warn{
  margin: 0 0 12px; padding: 9px 12px;
  border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600;
}
.mov-warn.is-excl{ background: rgba(240,85,91,.1); border: 1px solid rgba(240,85,91,.4); color: var(--alert); }

.mov-input{
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-1); padding: 0 12px;
}
.mov-input:focus-within{ border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.mov-input i{ font-style: normal; color: var(--text-faint); font-size: 18px; font-weight: 700; }
.mov-input input{
  flex: 1; border: 0; outline: 0; background: none;
  color: var(--text); font: 700 22px/1 "JetBrains Mono", monospace;
  padding: 12px 0; -moz-appearance: textfield;
}
.mov-input input::-webkit-outer-spin-button,
.mov-input input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

.mov-quick{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mov-quick button{
  padding: 7px 12px; border-radius: 99px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--text-dim); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; transition: background .14s, color .14s, border-color .14s;
}
.mov-quick button:hover{ background: var(--teal-soft); border-color: var(--teal); color: var(--teal-bright); }

.mov-preview{ margin: 12px 0 0; min-height: 18px; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mov-preview.is-warn{ color: var(--amber); font-weight: 600; }

.mov-done{ text-align: center; padding: 26px 10px 20px; }
.mov-done-ico{
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 16px;
  font-size: 28px; font-weight: 800;
}
.mov-done-ico.is-carga{ background: var(--teal-soft); color: var(--teal-bright); }
.mov-done-ico.is-descarga{ background: rgba(245,179,66,.16); color: var(--amber); }
.mov-done h3{ margin: 0 0 4px; font-size: 16px; }

.icon-btn{
  position: relative;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--text-dim);
  transition: color .16s, border-color .16s;
}
.icon-btn:hover{ color: var(--text); border-color: var(--line-strong); }
.icon-btn.ghost{ border: 0; background: transparent; }
.icon-btn .dot{ position: absolute; top: 7px; right: 8px; }

.me{
  display: flex; align-items: center; gap: 9px;
  padding-left: 8px;
  font-size: 13px; font-weight: 500;
}
.me img{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* ══════════════════════════════════════════
   WORKSPACE / PANELES
   ══════════════════════════════════════════ */
.workspace{
  flex: 1;
  display: grid;
  grid-template-columns: var(--inbox-w) 1fr var(--profile-w);
  gap: 14px;
  padding: 0 20px 20px;
  min-height: 0;
  min-width: 0; /* .main es flex-direction:column -- sin esto .workspace no se achica
    por debajo del ancho mínimo de su contenido (mismo motivo que min-height:0 de acá
    abajo, pero en el eje horizontal), y en mobile de una sola columna eso desborda la
    pantalla en vez de dejar que el texto adentro haga wrap. */
}

.panel{
  display: flex; flex-direction: column;
  min-height: 0;
  min-width: 0; /* mismo motivo que arriba: .panel es un item de grid (.workspace) o,
    en mobile, ocupa toda la columna -- sin esto no se achica por debajo del contenido
    interno (ej. la cabecera de conversación) y desborda a la derecha. */
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.028);
}
/* Cada panel su tono -- así no parece un solo bloque verde uniforme. */
.panel.inbox{        background: var(--surface-inbox); }
.panel.conversation{ background: var(--surface-conv); }
.panel.profile{      background: var(--surface-profile); }

/* Selector de tema (pie del sidebar): 3 pastillas de color. */
.theme-switch{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 4px 6px; }
.thm-rojo{   background: #E0384B; }
.thm-ambar{  background: #F5C518; }
.thm-oro{    background: #D4AF37; }
.thm-gris{   background: #8992A0; }
.thm-nebula{ background: #B99DF6; }
.thm{
  width: 18px; height: 18px; padding: 0;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.thm:hover{ transform: scale(1.14); }
.thm-dark{  background: #101614; }
.thm-light{ background: #EEF1F4; }
.thm-navy{  background: #0E1B33; }
.thm.is-active{ border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }

/* código de temáticas secretas (barra lateral) — no dejan swatch */
.theme-code{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 2px 6px 10px; justify-content: center;
}
.theme-code input{
  flex: 1 1 108px; min-width: 0; max-width: 150px;
  background: var(--field-bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text);
  font: inherit; font-size: 11px; padding: 5px 8px;
}
.theme-code input::placeholder{ color: var(--text-faint); }
.theme-code input:focus{ outline: none; border-color: var(--teal); background: var(--field-bg-soft); }
.theme-code button{
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--teal-soft); color: var(--teal);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 12px; line-height: 1;
  transition: background .12s, color .12s;
}
.theme-code button:hover{ background: var(--teal); color: var(--name-strong); }
.theme-code-msg{ flex: 1 1 100%; text-align: center; font-size: 10.5px; min-height: 13px; color: var(--text-faint); }
.theme-code-msg.ok{ color: var(--teal); }
.theme-code-msg.err{ color: var(--alert); }

.panel-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px;
  background: linear-gradient(180deg, var(--surface-2), transparent);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.panel-head h2{ margin: 0; font-family: "Unbounded", sans-serif; font-size: 14px; font-weight: 700; }

.inbox-refresh-btn{
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--text-dim); cursor: pointer; flex: none;
}
.inbox-refresh-btn:hover{ background: var(--hover-tint-2); color: var(--text); }
.inbox-refresh-btn svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inbox-refresh-btn.is-spinning svg{ animation: inboxRefreshSpin .7s linear infinite; }
@keyframes inboxRefreshSpin{ from{ transform: rotate(0) } to{ transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .inbox-refresh-btn.is-spinning svg{ animation: none; } }

.pill{
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--alert);
  font-size: 10.5px; font-weight: 600;
  color: #fff;
  vertical-align: middle;
}

/* ── Filtro tipo WhatsApp (Todos / No leídos) ── */
.filter-chips{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 12px 16px;
}
.chip{
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 600;
  transition: background .16s, color .16s, border-color .16s;
}
.chip:hover{ border-color: var(--line-strong); color: var(--text); }
.chip.is-active{
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-bright);
}

/* ── Buscador ── */
.search{
  display: flex; align-items: center; gap: 9px;
  margin: 0 16px 12px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--field-bg);
  color: var(--text-faint);
}
.search:focus-within{ border-color: var(--teal); }
.search svg{ width: 15px; height: 15px; flex: none; }
.search input{
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  color: var(--text); font: inherit;
}
.search input::placeholder{ color: var(--text-faint); }

/* ── Lista de conversaciones ── */
.thread-list{
  flex: 1;
  margin: 0; padding: 0 10px 12px;
  list-style: none;
  overflow-y: auto;
}
.thread{
  position: relative;
  padding: 12px;
  margin-bottom: 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .16s;
}
.thread:hover{ background: var(--hover-tint); }
.thread-more{
  list-style: none; text-align: center; padding: 12px; margin: 4px 0 8px;
  border-radius: var(--r-sm); background: var(--field-bg-soft);
  color: var(--text-dim); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.thread-more:hover{ background: var(--hover-tint); color: var(--text); }
.att-pdf{ display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.thread.is-active{
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  box-shadow: 0 12px 26px -14px var(--teal);
}
.thread.is-active .thread-name,
.thread.is-active .thread-code,
.thread.is-active .thread-time,
.thread.is-active .thread-preview{ color: #EAFFFD; }
.thread.is-active .thread-code,
.thread.is-active .thread-time{ opacity: .8; }

.thread-top{ display: flex; align-items: center; gap: 10px; }
.thread-avatar{ position: relative; flex: none; display: inline-flex; }
.thread-top img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
/* Pin rojo: la ULTIMA respuesta de la conversacion es del jugador (todavia no se le
   contesto), a diferencia de .is-unread que depende de unread_count de Chatwoot y
   desaparece apenas el agente ABRE el chat aunque nunca haya llegado a responder. */
.pin-unanswered{
  position: absolute; top: -1px; right: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--alert);
  border: 2px solid var(--surface-1);
}
/* Chincheta para fijar un chat arriba de todo en la Bandeja (ver togglePin en app.js) --
   pedido explícito de los cajeros para no tener que buscar de nuevo a los jugadores con
   los que hablan seguido. Guardado en localStorage, es una preferencia por agente/
   navegador, no algo que haya que sincronizar entre cajeros. */
.thread-pin-btn{
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-faint);
  border-radius: 50%; opacity: 0; transition: opacity .12s, color .12s, background .12s;
  font-size: 12.5px; line-height: 1; padding: 0; cursor: pointer;
}
.thread:hover .thread-pin-btn, .thread-pin-btn.is-pinned{ opacity: 1; }
.thread-pin-btn.is-pinned{ color: var(--teal-bright); }
.thread-pin-btn:hover{ background: var(--hover-tint-2); }
.thread.is-active .thread-pin-btn{ color: #EAFFFD; }
@media(hover:none){ .thread-pin-btn{ opacity: .6; } }

.thread-main{ min-width: 0; }
/* LEÍDO por defecto: nombre y preview apagados, sin negrita -- la conversación "descansa". */
/* overflow/ellipsis: un usuario con nombre largo y sin espacios (típico username de
   plataforma) no rompe línea -- sin esto se superpone visualmente con thread-time. */
.thread-name{ font-size: 13px; font-weight: 500; color: var(--text-dim); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-code{ font-size: 11px; color: var(--text-faint); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-time{ margin-left: auto; font-size: 11px; color: var(--text-faint); flex: none; }

/* fila de abajo: preview + burbuja de no leídos (como WhatsApp) */
.thread-bottom{ display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.thread-preview{
  margin: 0; flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── NO LEÍDO (jugador escribió último / Chatwoot lo marca sin ver) ──
   distinción fuerte estilo WhatsApp: barra teal a la izquierda, fondo tintado,
   nombre BLANCO y en negrita, preview blanco y en negrita, y una burbuja verde
   a la derecha (con el número si Chatwoot lo da, o un puntito si no). */
.thread.is-unread{
  background: var(--teal-soft);
  box-shadow: inset 3px 0 0 var(--teal-bright);
}
.thread.is-unread:hover{ background: var(--teal-soft); filter: brightness(1.25); }
.thread.is-unread .thread-name{ color: var(--name-strong); font-weight: 800; }
.thread.is-unread .thread-preview{ color: var(--text); font-weight: 700; }
.thread.is-unread .thread-code{ color: var(--text-dim); }

.thread-badge{
  flex: none;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: var(--teal); color: #04262A;
  font-size: 11px; font-weight: 800; line-height: 1;
  box-shadow: 0 4px 10px -4px var(--teal);
}
.thread-badge.is-dot{ min-width: 0; width: 10px; height: 10px; padding: 0; }
.thread.is-active .thread-badge{ background: #EAFFFD; color: var(--teal-deep); box-shadow: none; }
.thread.is-active.is-unread{ box-shadow: inset 3px 0 0 #EAFFFD; }
.thread.is-active .thread-name,
.thread.is-active.is-unread .thread-name{ color: #EAFFFD; }

/* ══════════════════════════════════════════
   CONVERSACIÓN
   ══════════════════════════════════════════ */
.conversation{ position: relative; }

.conv-head{
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px;
  background: linear-gradient(180deg, var(--surface-2), transparent);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.avatar{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
/* flex:1 + min-width:0 + ellipsis en strong/span -- sin esto, un usuario con nombre largo
   empuja "Resolver" y el ícono de perfil fuera de pantalla en mobile (mismo patrón que
   .thread-preview, que ya trunca así). */
.conv-id{ display: flex; flex-direction: column; line-height: 1.3; flex: 1 1 auto; min-width: 0; }
.conv-id strong{ font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-id span{ font-size: 11px; color: var(--text-faint); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-head .icon-btn{ margin-left: auto; }
/* Botón "Resolver": pegado a la derecha, y el ⋮ de perfil queda justo al lado. */
.conv-head #btnResolveConv{ margin-left: auto; flex: none; white-space: nowrap; padding: 7px 12px; font-size: 12px; }
.conv-head #btnResolveConv ~ .icon-btn{ margin-left: 8px; }
/* Botón "volver a la bandeja" -- solo tiene sentido en mobile, donde la bandeja y la
   conversación ocupan la pantalla entera por turnos (ver @media 880px más abajo). En
   desktop/tablet ancho las dos conviven lado a lado, así que no hace falta volver a
   ningún lado. */
.conv-head .conv-back{ display: none; margin-left: 0; flex: none; }

.messages{
  flex: 1;
  min-height: 0; /* si no, un flex item con overflow-y:auto no se achica: crece con el
                    contenido y empuja el composer fuera de la pantalla en vez de scrollear */
  padding: 20px 18px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  background:
    radial-gradient(520px 360px at 100% 0%, rgba(52,209,124,.05), transparent 70%),
    var(--bg-deep);
}

.day-divider{
  align-self: center;
  padding: 4px 14px;
  border-radius: 99px;
  background: var(--surface-2);
  font-size: 11px; color: var(--text-dim);
}

.msg{ display: flex; gap: 10px; max-width: 72%; }
.msg img{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; align-self: flex-end; }
.msg-body{ display: flex; flex-direction: column; gap: 5px; }
.bubble{
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.55;
}
.msg-time{ font-size: 10.5px; color: var(--text-faint); }

/* entrante -- un escalón más clara que --surface-2 (contra --bg-app quedaban casi iguales)
   + el mismo borde sutil que ya usan search/chip/icon-btn, para que se despegue del fondo
   sin salirse de la paleta. */
.msg.in .bubble{
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
/* saliente */
.msg.out{ margin-left: auto; flex-direction: row-reverse; }
.msg.out .bubble{
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #ECFFFD;
  border-bottom-right-radius: 5px;
}
.msg.out .msg-time{ text-align: right; }
.bubble.is-failed{ background: rgba(240,85,91,.16); border: 1px solid rgba(240,85,91,.4); }
.msg-failed{ font-size: 10.5px; color: var(--alert); font-weight: 600; }
.msg.out .msg-failed{ text-align: right; }

/* nota de voz */
.voice{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(47,212,196,.35);
  border-radius: 14px;
  background: rgba(33,176,168,.10);
}
.voice-play{
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--teal-bright);
  color: #04262A;
}
.voice-play svg{ width: 13px; height: 13px; fill: currentColor; stroke: none; }
.wave{ display: flex; align-items: center; gap: 2.5px; height: 26px; flex: 1; }
.wave span{
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--teal-bright);
  opacity: .45;
}
.voice.is-playing .wave span{ animation: pulse 1s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity: 1; } }
.voice-len{ font-size: 11px; color: var(--text-dim); }

/* composer */
.composer{
  display: flex; align-items: flex-end; gap: 6px;
  margin: 12px 16px 16px;
  padding: 7px 8px 7px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface-2);
}
.composer:focus-within{ border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.composer textarea{
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  color: var(--text); font: inherit;
  resize: none; max-height: 120px; overflow-y: auto;
  line-height: 1.35; padding: 6px 4px;
}
.composer textarea::placeholder{ color: var(--text-faint); }
.send{
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal));
  color: #04262A;
}
.send svg{ fill: currentColor; stroke: none; width: 15px; height: 15px; }

.attach-status{ margin: -8px 16px 10px; font-size: 11.5px; color: var(--text-faint); }
.attach-status.is-error{ color: #e57373; }

/* ── Botón de plantillas ("\") en el composer ── */
.composer-icon-btn{
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-dim);
  font: 700 15px/1 "Hanken Grotesk", monospace;
  transition: background .16s, color .16s;
}
.composer-icon-btn:hover{ background: var(--surface-3); color: var(--teal-bright); }

/* ── Autocompletado de plantillas (estilo Kommo: "/atajo" + Tab o clic) ── */
.canned-suggest{
  position: absolute;
  left: 16px; right: 16px; bottom: 66px;
  max-height: 240px;
  overflow-y: auto;
  margin: 0; padding: 6px;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  z-index: 10;
}
.canned-suggest-item{
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.canned-suggest-item:hover, .canned-suggest-item.is-active{ background: var(--teal-soft); }
.canned-suggest-code{ font-size: 12.5px; font-weight: 700; color: var(--teal-bright); }
.canned-suggest-text{
  font-size: 11.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.canned-suggest-empty{ padding: 9px 10px; font-size: 12px; color: var(--text-faint); }

/* ══════════════════════════════════════════
   PERFIL
   ══════════════════════════════════════════ */
.profile{ overflow-y: auto; }
.profile.is-hidden{ display: none; }

.profile-card{
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 16px 22px;
  text-align: center;
}
.profile-avatar{
  width: 96px; height: 96px;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--amber), #B7822A);
}
.profile-avatar img{
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--surface-1);
}
.profile-card h3{ margin: 14px 0 2px; font-size: 15px; }
.profile-name-row{ display: inline-flex; align-items: center; gap: 6px; }
.profile-name-row .row-btn{ width: 24px; height: 24px; }
.profile-name-row .row-btn svg{ width: 12px; height: 12px; }
.muted{ font-size: 11.5px; color: var(--text-faint); }

.rating{
  display: flex; align-items: center; gap: 5px;
  margin-top: 10px;
  font-size: 12px; color: var(--text-dim);
}
.star{ width: 14px; height: 14px; fill: var(--amber); stroke: none; }

.profile-section{ padding: 0 14px 18px; }
.section-head{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}
.section-head h4{ margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.section-head a{ font-size: 11.5px; color: var(--teal-bright); text-decoration: none; }

.orders{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.order{
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .16s;
}
.order:hover{ background: var(--hover-tint); }
.order.is-active{
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  box-shadow: 0 12px 26px -16px var(--teal);
}
.order.is-active .order-sub{ color: #CFF6F2; }
.order img{
  width: 38px; height: 42px; flex: none;
  border-radius: 8px; object-fit: cover;
  background: var(--surface-2);
}
.order-info{ min-width: 0; }
.order-name{ font-size: 12.5px; font-weight: 600; }
.order-sub{
  font-size: 11px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.order-code{ margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.order.is-active .order-code{ color: #fff; }

/* ── Datos del jugador (cajerosEZ) ── */
.jugador-stats{ display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.jstat{
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.jstat:last-child{ border-bottom: 0; }
.jstat-label{ color: var(--text-dim); }
.jstat-value{ font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-weight: 600; }
.jstat-value.up{ color: var(--teal-bright); }
.jstat-value.down{ color: var(--alert); }
#jExcluidoRow{
  justify-content: flex-start;
  color: var(--amber); font-weight: 600;
  border-bottom: 0;
}
.jstat-big{
  padding: 12px 8px;
  margin: 2px 0;
  border-radius: var(--r-sm);
  background: var(--teal-soft);
  border-bottom: 0;
}
.jstat-big .jstat-label{ color: var(--text); font-weight: 600; }
.jstat-big .jstat-value{ font-size: 15px; color: var(--teal-bright); }
.jstat-updated{ border-bottom: 0; }
.jstat-value.muted{ font-weight: 400; color: var(--text-faint); font-size: 11px; }

/* ── Checklist de plataformas + acciones (placeholder, ver comentario en app.js) ── */
.platform-checklist{
  margin: 0 0 14px; padding: 0 2px;
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.platform-item{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--field-bg-soft);
}
.platform-check{
  display: grid; place-items: center;
  width: 18px; height: 18px; flex: none;
  border-radius: 5px;
  background: var(--teal);
  color: #04262A;
  font-size: 12px; font-weight: 700;
}
.platform-name{ font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }

/* Lead 'solo landing' (sin cargas confirmadas, ver jugador/lookup fuente:'landing') --
   el agente vincula el usuario de BET30 a mano antes de que CARGA/DESCARGA se habiliten. */
.vincular-usuario{ display: flex; align-items: flex-end; gap: 8px; padding: 0 2px 8px; }
.vincular-usuario .field{ flex: 1; margin-bottom: 0; }
.vincular-usuario .btn{ flex-shrink: 0; padding: 10px 14px; font-size: 12.5px; }

.action-btns{ display: flex; flex-direction: column; gap: 8px; padding: 0 2px; }
.action-btn{
  width: 100%;
  padding: 12px;
  border: 0; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: #fff;
  transition: filter .15s;
}
.action-btn:hover{ filter: brightness(1.1); }
.action-btn:active{ filter: brightness(.92); }
.action-btn:disabled{ opacity: .4; filter: grayscale(.5); cursor: not-allowed; }
.action-btn:disabled:hover{ filter: grayscale(.5); }
.action-carga{
  background: linear-gradient(135deg, #2FD46B, #1C9C4C);
  box-shadow: 0 10px 22px -12px #1C9C4C;
}
.action-descarga{
  background: linear-gradient(135deg, #F0555B, #C6333A);
  box-shadow: 0 10px 22px -12px #C6333A;
}

/* ── Vista placeholder (Panel / Jugadores / Alertas / Ayuda) ── */
.placeholder-view{
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  margin: 0 20px 20px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
}
.placeholder-icon{ font-size: 34px; margin-bottom: 4px; opacity: .8; }
.placeholder-view h2{ margin: 0; font-size: 17px; }
.placeholder-view .muted{ max-width: 340px; }

/* ── Vistas de datos (Panel / Jugadores / Alertas) -- mismo contenedor que .config-view ── */
.data-view{
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  margin: 0 20px 20px;
  overflow-y: auto;
}
.btn-ghost{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.btn-ghost:hover{ border-color: var(--line-strong); color: var(--text); }

.data-filters{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.data-filters .search{ margin: 0; flex: 1; max-width: 320px; }
.data-filters select{
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit; font-size: 12.5px;
}

/* ── Panel (KPIs) ── */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.kpi-card{
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--field-bg-soft);
}
.kpi-label{ font-size: 11.5px; color: var(--text-dim); }
.kpi-value{ font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 22px; font-weight: 700; }
.kpi-value.down{ color: var(--alert); }
.kpi-sub{ font-size: 11px; color: var(--text-faint); }
.kpi-bar{
  margin-top: 4px;
  height: 6px; border-radius: 99px;
  background: var(--surface-2); overflow: hidden;
}
.kpi-bar-fill{ height: 100%; background: linear-gradient(90deg, var(--teal), var(--amber)); }

/* ── Tags de prioridad (Jugadores / Alertas) -- P1 es el jugador mas valioso, no un riesgo ── */
.tag-P1{ background: var(--teal-soft); color: var(--teal-bright); }
.tag-P2{ background: rgba(245,179,66,.16); color: var(--amber); }
.tag-P3{ background: var(--surface-2); color: var(--text-dim); }
.tag-P4{ background: rgba(255,255,255,.06); color: var(--text-faint); }
.tag-EXCLUIDO{ background: rgba(255,92,107,.12); color: var(--alert); }

.severity-bar{
  width: 56px; height: 5px; border-radius: 99px;
  background: var(--surface-2); overflow: hidden; flex: none;
}
.severity-bar-fill{ height: 100%; background: var(--alert); }

.row-stat{
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex: none; text-align: right;
}
.row-stat .jstat-label{ font-size: 10.5px; }
.row-stat .jstat-value{ font-size: 13px; }

/* ── Sorteo -- aviso de datos de ejemplo + ticket estilo entrada ── */
.mock-notice{
  margin: 0 0 16px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(245,179,66,.12);
  color: var(--amber);
  font-size: 12px; font-weight: 600;
}

.ticket-preview-wrap{ display: flex; justify-content: flex-start; margin: 4px 0 8px; }
.ticket-card{
  width: 280px;
  padding: 16px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--teal);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.6);
  position: relative;
}
.ticket-card::before, .ticket-card::after{
  content: "";
  position: absolute; top: 76px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-app); border: 1px solid var(--teal);
}
.ticket-card::before{ left: -9px; }
.ticket-card::after{ right: -9px; }
.ticket-top{ display: flex; align-items: center; gap: 10px; }
.ticket-emoji{ font-size: 26px; line-height: 1; }
.ticket-title{ font-weight: 700; font-size: 13.5px; }
.ticket-sub{ font-size: 11px; color: var(--text-faint); }
.ticket-divider{ margin: 14px 0; border-top: 1px dashed var(--line-strong); }
.ticket-body{ display: flex; flex-direction: column; gap: 8px; }
.ticket-row{ display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-dim); }
.ticket-row strong{ color: var(--text); font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; }
.ticket-row-big strong{ color: var(--teal-bright); font-size: 16px; }
.ticket-card-msg{ width: 100%; max-width: 250px; }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1180px){
  .workspace{ grid-template-columns: var(--inbox-w) 1fr; }
  /* El perfil deja de ser una 3ra columna del grid y pasa a un panel que se desliza
     desde la derecha, tapando el chat -- mismo toggle de siempre (#toggleProfile /
     #closeProfile -> .profile.is-hidden), antes no hacía nada acá porque este mismo
     breakpoint lo dejaba en display:none fijo sin importar la clase. */
  .profile{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: auto;
    width: 100%; max-width: 380px;
    z-index: 50;
    margin: 0;
    border-radius: 0;
    box-shadow: -14px 0 40px -12px rgba(0,0,0,.6);
  }
  .profile.is-hidden{ display: none; }
}
@media (max-width: 880px){
  .app{ grid-template-columns: 64px 1fr; border-radius: 0; border: 0; height: 100vh; height: 100dvh; }
  .brand-name, .nav-item span{ display: none; }
  /* padding original (22px/14px de .sidebar + 10px/12px de .nav-item) no entra en una
     columna de 64px con un ícono de 18px -- achicado para que quede centrado con aire
     real en vez de recortarse contra el borde. */
  .sidebar{ padding: 16px 8px; }
  .nav-item{ justify-content: center; padding: 10px 4px; }
  /* mismo motivo que el ícono de arriba: el logo de 46px no entra en una columna de
     64px una vez descontado el padding real de .sidebar + .brand. */
  .brand{ padding: 2px 4px 14px; }
  .brand-mark{ width: 34px; height: 34px; border-radius: 10px; }
  .workspace{ grid-template-columns: 1fr; padding: 0 12px 12px; }
  .msg{ max-width: 88%; }

  /* Bandeja y conversación ocupan la pantalla entera por turnos en vez de compartir el
     ancho -- .is-conv-open la pone/saca app.js (open() la agrega, el botón "volver" y
     "eliminar conversación" la sacan). Sin conversación abierta se ve solo la bandeja
     (el "elegí una conversación" de .empty-state no tiene sentido en este tamaño, ya
     estás mirando la lista). */
  .conversation{ display: none; }
  .app.is-conv-open .inbox{ display: none; }
  .app.is-conv-open .conversation{ display: flex; }
  .conv-head .conv-back{ display: inline-flex; }

  /* Composer más cómodo en celular: el botón de "estados" (⏳, #procBtn) queda solo en
     PC -- pedido explícito, es un atajo poco usado que le come espacio real al textarea
     en una pantalla angosta. El resto de los íconos del composer se achican un poco
     para dejarle más aire al campo de texto en vez de sacarlos. */
  #procBtn{ display: none; }
  .composer{ gap: 4px; padding: 6px 6px 6px 8px; }
  .composer-icon-btn{ width: 30px; height: 30px; }
  .send{ width: 30px; height: 30px; }

  /* Perfil a pantalla completa (no un panel de 380px angosto que en un celular real
     ocupa el ancho entero igual, pero mejor ser explícitos). */
  .profile{ max-width: none; }

  /* 16px evita que iOS Safari haga zoom automático al enfocar el campo (cualquier
     input con font-size < 16px dispara ese zoom) -- ampliado a CUALQUIER campo de
     texto de la app (antes solo cubría composer/buscador; cualquier input nuevo que
     se agregue queda afuera si no usa esta lista, ej. lo visto en vivo en crm-app:
     "se hace zoom solo y no puedo abrir el perfil" porque el zoom desacomodaba todo
     el layout, no porque el botón de perfil estuviera roto). */
  /* !important necesario: ".composer textarea", ".search input", ".field input/textarea/
     select" y ".login-card input" (entre otros) usan "font: inherit" para heredar el
     tamaño de su contenedor -- esos selectores (clase + tipo) tienen MAS especificidad
     que esta lista de acá (solo tipo/atributo), así que sin !important esta regla
     pierde justo contra los campos más usados (el propio composer del chat) y el zoom
     seguía intacto ahí -- encontrado en vivo, reportado como "al escribir en el chat
     sigue haciendo zoom" pese a que esta regla ya "cubría" ese campo en el papel. */
  input[type="text"], input[type="search"], input[type="password"], input[type="tel"],
  input[type="number"], input[type="email"], input:not([type]), textarea, select{
    font-size: 16px !important;
  }

  /* 8 pestañas de Configuración no entran en una fila en un celular -- scroll
     horizontal en vez de que se corten/apilen. */
  .config-tabs{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .config-tab{ flex: none; }

  .data-filters{ flex-wrap: wrap; }
  .data-filters .search{ max-width: none; flex-basis: 100%; }

  /* config-panel-head no tenía wrap -- título+botón (ej. "Exportar CSV") se apretaban
     uno contra el otro en vez de pasar el botón a su propia línea. */
  .config-panel-head{ flex-wrap: wrap; }
  .config-panel-head > button{ flex: none; }
}

@media (max-width: 420px){
  .app{ grid-template-columns: 56px 1fr; }
  .topbar{ padding: 14px 14px 10px; }
  .workspace{ padding: 0 8px 8px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

:focus-visible{ outline: 2px solid var(--teal-bright); outline-offset: 2px; }

/* ══════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════ */
.login-screen{
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
.login-card{
  width: 100%; max-width: 340px;
  padding: 32px 28px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  text-align: center;
}
.login-card h1{ margin: 0 0 4px; font-family: "Unbounded", sans-serif; font-size: 19px; font-weight: 800; }
.login-card .muted{ margin: 0 0 22px; }
.login-card label{
  display: block; text-align: left;
  font-size: 12.5px; color: var(--text-dim);
  margin-bottom: 14px;
}
.login-card input{
  display: block; width: 100%; margin-top: 6px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--field-bg);
  color: var(--text); font: inherit;
}
.login-card input:focus{ outline: none; border-color: var(--teal); }
.pw-field{ position: relative; margin-top: 6px; }
.pw-field input{ margin-top: 0; padding-right: 38px; }
.pw-toggle{
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 36px;
  background: none; border: none; padding: 0;
  color: var(--text-dim);
}
.pw-toggle:hover{ color: var(--text); }
.pw-toggle svg{ width: 17px; height: 17px; }
.login-error{
  margin: 14px 0 0; padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(240,85,91,.12);
  color: var(--alert);
  font-size: 12.5px;
}

/* ══════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════ */
.empty-state{
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  color: var(--text-faint);
  font-size: 13.5px;
  text-align: center;
  background: radial-gradient(420px 280px at 50% 42%, rgba(52,209,124,.06), transparent 70%);
}
/* marca sutil arriba del texto -- teja EZ tenue (3 barras, igual que el logo del sidebar),
   para que no sea un vacío plano */
.empty-state::before{
  content: "";
  width: 52px; height: 52px; border-radius: 15px;
  background:
    linear-gradient(var(--teal-bright), var(--teal-bright)) left 16% bottom 18% / 15% 34% no-repeat,
    linear-gradient(var(--teal-bright), var(--teal))        left 42% bottom 18% / 15% 56% no-repeat,
    linear-gradient(var(--teal-bright), var(--teal-deep))   left 68% bottom 18% / 15% 80% no-repeat,
    linear-gradient(150deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 14px 34px -18px rgba(52,209,124,.5);
  opacity: .55;
}

/* ══════════════════════════════════════════
   CONFIGURACIÓN (Canales / Plantillas / Bots y automatizaciones)
   ══════════════════════════════════════════ */
.config-view{
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  margin: 0 20px 20px;
  overflow-y: auto;
}

/* sticky -- Stickers/Procesos (grid de imágenes / lista de estados que crece con "+
   Agregar") pueden ser más altos que la pantalla en mobile; sin sticky, .config-tabs
   (la fila Canales/Agentes/.../Procesos) se scrollea fuera de vista al bajar y no hay
   forma de volver a otra sección sin scrollear de nuevo hasta arriba -- eso es lo que
   se reportó como "la barra de navegación desaparece". */
.config-tabs{
  display: flex; gap: 8px;
  margin-bottom: 18px;
  position: sticky; top: 0; z-index: 6;
  background: var(--bg-app);
  padding-top: 2px;
}
.config-tab{
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface-1);
  color: var(--text-dim);
  font-size: 13px; font-weight: 600;
  transition: background .16s, color .16s, border-color .16s;
}
.config-tab:hover{ border-color: var(--line-strong); color: var(--text); }
.config-tab.is-active{
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-bright);
}

.config-panel{
  padding: 20px;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
}
.config-panel-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.config-panel-head h3{ margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.config-panel-head .muted{ max-width: 460px; }
.config-panel-head-2{ margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ── Config › Avanzado (tuneo de temáticas, con contraseña) ── */
.tuneo-gate{ max-width: 360px; display: flex; flex-direction: column; gap: 10px; }
.tuneo-gate-row{ display: flex; gap: 8px; }
.tuneo-gate-row input{
  flex: 1; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--field-bg); color: var(--text); font: inherit;
}
.tuneo-new{
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2);
}
.tuneo-new input{
  flex: 1 1 160px; min-width: 0; padding: 7px 9px; font: inherit; font-size: 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--field-bg); color: var(--text);
}
.tuneo-top{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.tuneo-top select{
  padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--field-bg); color: var(--text); font: inherit; font-weight: 600;
}
.tuneo-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tuneo-slot{
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 8px;
}
.tuneo-slot h4{ margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.tuneo-slot input[type="text"]{
  width: 100%; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--field-bg); color: var(--text); font: inherit; font-size: 12px;
}
.tuneo-prev{
  width: 100%; height: 96px; border-radius: var(--r-sm); border: 1px dashed var(--line-strong);
  background: var(--field-bg-soft) center/contain no-repeat; display: grid; place-items: center;
  color: var(--text-faint); font-size: 11px; text-align: center;
}
.tuneo-prev.has{ border-style: solid; }
.tuneo-slot-row{ display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tuneo-slot-row .btn-mini{
  font-size: 11px; padding: 4px 9px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--field-bg); color: var(--text);
}
.tuneo-slot-row .btn-mini:hover{ background: var(--hover-tint-2); }
.tuneo-slot input[type="range"]{ flex: 1 1 90px; accent-color: var(--teal); }
.tuneo-slot input[type="color"]{
  width: 34px; height: 26px; padding: 0; border: 1px solid var(--line-strong);
  border-radius: 6px; background: none; cursor: pointer;
}
.tuneo-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tuneo-hint{ font-size: 12px; color: var(--text-faint); margin-top: 8px; }

/* ── Selector + switch de alias automático (topbar), atajo del mismo estado que
   Configuración › CVU (cvuActivoId/cvuAutoOn) ── */
.topbar-alias{
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 6px;
  border-radius: 99px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
}
.topbar-cvu-select{
  max-width: 150px;
  font-size: 12.5px;
  padding: 3px 6px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2, var(--surface-3));
  color: var(--text);
}
@media (max-width: 720px){
  .topbar-cvu-select{ max-width: 100px; }
}

/* ── Switch (toggle) reutilizable ── */
.ez-switch-row{
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; font-size: 13.5px; color: var(--text);
}
.ez-switch-row input{ position: absolute; opacity: 0; width: 0; height: 0; }
.ez-switch{
  flex: none;
  width: 44px; height: 26px;
  border-radius: 99px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  position: relative;
  transition: background .16s, border-color .16s;
}
.ez-switch::after{
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .16s, background .16s;
}
.ez-switch-row input:checked + .ez-switch{
  background: var(--teal-soft);
  border-color: var(--teal);
}
.ez-switch-row input:checked + .ez-switch::after{
  transform: translateX(18px);
  background: var(--teal-bright);
}
.ez-switch-row input:focus-visible + .ez-switch{ box-shadow: 0 0 0 3px var(--teal-soft); }

.empty-list{ padding: 10px 2px 18px; font-size: 12.5px; }

/* ── Canales ── */
.channel-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.channel-card{
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--field-bg-soft);
}
.channel-card-top{ display: flex; align-items: center; gap: 10px; }
.channel-icon{
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 10px;
  font-size: 17px;
  background: var(--surface-2);
}
.channel-name{ font-size: 13px; font-weight: 700; }
.channel-type{ font-size: 11px; color: var(--text-faint); text-transform: capitalize; }
.channel-card.is-connected .channel-icon{ background: var(--teal-soft); }
.channel-status{
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10.5px; font-weight: 700;
}
.channel-status.on{ background: rgba(47,212,196,.14); color: var(--teal-bright); }
.channel-status.off{ background: rgba(255,255,255,.06); color: var(--text-faint); }
.channel-status.warn{ background: rgba(255,193,7,.16); color: #ffc107; }
.channel-card .btn{ align-self: flex-start; padding: 7px 14px; font-size: 12px; }
.channel-card .btn-ghost{
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
}
.channel-card .btn-ghost:hover{ border-color: var(--line-strong); color: var(--text); }

/* ── Listas tipo tabla (plantillas / automatizaciones / bots) ── */
.table-list{ display: flex; flex-direction: column; gap: 8px; }
.list-row{
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--field-bg-soft);
}
.list-row-main{ flex: 1; min-width: 0; }
.list-row-title{ font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.list-row-sub{ margin-top: 2px; font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-actions{ display: flex; align-items: center; gap: 8px; flex: none; }
.row-btn{
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-dim);
}
.row-btn:hover{ color: var(--text); border-color: var(--line-strong); }
.row-btn.danger:hover{ color: var(--alert); border-color: var(--alert); }
.row-btn.is-pinned{ color: var(--teal-bright); border-color: var(--teal); }
.row-btn svg{ width: 14px; height: 14px; }
.pin-tag{ font-size: 11px; }

/* ── CVU / Alias ── */
.list-row-sub.mono, .mono{ font-family: "JetBrains Mono", ui-monospace, monospace; }
.list-row.cvu-active{ border-color: var(--teal); background: var(--teal-soft); }
.cvu-pick{ flex: none; display: inline-flex; }
.cvu-pick input{ width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }
.cvu-pick span{ display: none; }
.cvu-badge{ font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--teal-bright);
  background: var(--teal-soft); border: 1px solid var(--teal); border-radius: 99px; padding: 1px 7px; }

/* ── Comprobantes: checklist de foto/PDF (pago aprobado o no) ── */
.att-wrap{ display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.comprobante-badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}
.comprobante-badge:hover{ border-color: var(--line-strong); color: var(--text); }
.comprobante-badge.is-aprobado{
  background: rgba(47,212,107,.14);
  border-color: #2FD46B;
  color: #2FD46B;
}
.comprobante-thumb{
  flex: none; width: 52px; height: 52px;
  object-fit: cover; border-radius: var(--r-sm);
  border: 1px solid var(--line);
  cursor: pointer;
}
.comprobante-file{
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-dim); font-size: 10px; font-weight: 700;
  text-decoration: none; text-align: center;
}

.tag{
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px; font-weight: 700;
  background: var(--surface-2); color: var(--text-dim);
}
.tag.on{ background: rgba(47,212,196,.14); color: var(--teal-bright); }
.tag.off{ background: rgba(255,255,255,.06); color: var(--text-faint); }
.comprobante-pending-tag{ background: rgba(245,179,66,.14); color: var(--amber); }

/* ── Toggle switch (activo/inactivo) ── */
.toggle{
  position: relative;
  width: 36px; height: 20px; flex: none;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: background .16s;
}
.toggle::after{
  content: "";
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .16s, background .16s;
}
.toggle.is-on{ background: var(--teal-soft); border-color: var(--teal); }
.toggle.is-on::after{ transform: translateX(16px); background: var(--teal-bright); }

/* ── Lightbox: imagen de attachment a pantalla completa ── */
.lightbox-overlay{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background: rgba(3,12,17,.92);
  z-index: 200;
  cursor: zoom-out;
}
.lightbox-img{
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  cursor: default;
}
.lightbox-close{
  position: absolute; top: 18px; right: 18px;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}
.lightbox-close:hover{ background: var(--surface-1); }

/* ── Modal genérico ── */
.modal-overlay{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(3,12,17,.6);
  backdrop-filter: blur(2px);
  z-index: 50;
}
.modal{
  width: 100%; max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.modal-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.modal-head h3{ margin: 0; font-size: 16px; }
.modal-close{
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-dim);
}
.modal-close:hover{ color: var(--text); }

.field{ display: block; margin-bottom: 14px; font-size: 12.5px; color: var(--text-dim); }
.field span{ display: block; margin-bottom: 6px; }
.field input[type="text"],
.field input[type="url"],
.field input[type="number"],
.field textarea,
.field select{
  display: block; width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--field-bg);
  color: var(--text); font: inherit;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline: none; border-color: var(--teal); }
.field textarea{ resize: vertical; min-height: 70px; }
/* ── Selector de cantidad (stepper -/+) -- input[type=number] no entraba en la lista de
   arriba, así que se veía con el estilo por defecto del navegador (caja blanca, sin
   nada del tema oscuro). En vez de solo agregarlo a esa lista, se arma un stepper propio
   -- más cómodo para tocar en pantallas chicas que las flechitas nativas, y reusa los
   mismos tokens (--line, --r-sm, --teal, --text) que el resto de los campos. ── */
.qty-stepper{
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--field-bg);
  overflow: hidden;
}
.qty-stepper:focus-within{ border-color: var(--teal); }
.qty-btn{
  flex: 0 0 auto; width: 38px;
  border: 0; background: transparent; color: var(--text-dim);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.qty-btn:hover{ background: var(--hover-tint-2); color: var(--text); }
.qty-btn:active{ background: var(--hover-tint-2); }
.qty-stepper input[type="number"]{
  flex: 1 1 auto; width: 0; min-width: 0;
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: transparent; color: var(--text); font: inherit; font-weight: 600;
  text-align: center; padding: 10px 4px;
  -moz-appearance: textfield;
}
.qty-stepper input[type="number"]:focus{ outline: none; }
.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none; margin: 0;
}
.field-check{ display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-dim); margin-bottom: 14px; }
.field-hint{ margin: -8px 0 14px; font-size: 11px; color: var(--text-faint); }
.modal code{
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--hover-tint-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
}
.field-error{
  margin: -6px 0 14px; padding: 8px 11px;
  border-radius: var(--r-sm);
  background: rgba(240,85,91,.12);
  color: var(--alert);
  font-size: 12px;
}
.field-success{
  margin: -6px 0 14px; padding: 8px 11px;
  border-radius: var(--r-sm);
  background: rgba(52,209,124,.12);
  color: var(--teal-bright);
  font-size: 12px;
}

.type-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}
.type-card{
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--field-bg-soft);
  text-align: left;
  transition: border-color .16s, background .16s;
}
.type-card:hover{ border-color: var(--teal); background: var(--teal-soft); }
.type-card .channel-icon{ width: 30px; height: 30px; font-size: 14px; }
.type-card-name{ font-size: 12.5px; font-weight: 700; }
.type-card-sub{ font-size: 10.5px; color: var(--text-faint); }

.builder-rows{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.builder-row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 6px;
  align-items: center;
}
.builder-row select, .builder-row input{
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text); font: inherit; font-size: 12px;
  width: 100%;
}
.builder-remove{
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-faint);
}
.builder-remove:hover{ color: var(--alert); }
.builder-add{
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 99px;
  background: transparent;
  color: var(--text-dim);
  font-size: 11.5px; font-weight: 600;
  margin-bottom: 16px;
}
.builder-add:hover{ color: var(--teal-bright); border-color: var(--teal); }
.builder-label{ font-family: "Unbounded", sans-serif; font-size: 9.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 8px; }

.modal-actions{
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 6px;
}
.btn-secondary{
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--line);
}
.btn-secondary:hover{ color: var(--text); border-color: var(--line-strong); }

/* Bono % -- validar/paso 2 en el panel del chat */
.canje-result{
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--field-bg-soft); font-size: 13px;
}
.canje-result p{ margin: 0 0 4px; }
.canje-result p:last-child{ margin-bottom: 0; }
.canje-ok{ color: var(--text); }
.canje-ok b{ color: var(--teal-bright); }
.canje-err{ color: var(--alert); }

/* ── Candado de "Cambiate a PRO" (2026-09-10) ── */
.pro-lock-banner{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; margin-bottom: 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--teal-soft), transparent);
}
.pro-lock-banner .pro-lock-icon{ font-size: 22px; flex: 0 0 auto; }
.pro-lock-banner .pro-lock-text{ flex: 1 1 auto; font-size: 13px; color: var(--text-dim); }
.pro-lock-banner .pro-lock-text b{ color: var(--text); }
.pro-lock-cta{
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 0; border-radius: 99px; cursor: pointer;
  font-weight: 700; font-size: 12.5px; white-space: nowrap;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal));
  color: #04262A; box-shadow: 0 8px 20px -10px var(--teal);
}
.pro-lock-cta:hover{ filter: brightness(1.07); }

.pro-lock-overlay-wrap{ position: relative; }
.pro-lock-overlay-wrap > .pro-lock-target{
  filter: blur(5px); pointer-events: none; user-select: none;
}
.pro-lock-overlay{
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: color-mix(in srgb, var(--surface-1) 78%, transparent);
  border-radius: var(--r-md);
  text-align: center; padding: 20px;
}
.pro-lock-overlay .pro-lock-icon{ font-size: 30px; }
.pro-lock-overlay .pro-lock-text{ font-size: 13.5px; color: var(--text-dim); max-width: 320px; }
.pro-lock-overlay .pro-lock-text b{ color: var(--text); }

/* ── Mapa de calor de ventas (clics por hora, últimos 7 días) ── */
.heatmap{ display: flex; flex-direction: column; gap: 3px; overflow-x: auto; padding: 4px 0 10px; }
.heatmap-row{ display: flex; gap: 3px; align-items: center; }
.heatmap-row-label{ flex: 0 0 74px; font-size: 11px; color: var(--text-dim); }
.heatmap-cell{
  flex: 1 1 0; min-width: 14px; height: 20px; border-radius: 4px;
  background: var(--field-bg, rgba(255,255,255,.05));
}
.heatmap-hours{ display: flex; gap: 3px; padding-left: 74px; }
.heatmap-hours span{ flex: 1 1 0; min-width: 14px; font-size: 9px; color: var(--text-faint, var(--text-dim)); text-align: center; }