/* 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;
}
.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; }

.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". */
.thread-name{ font-size: 13px; font-weight: 500; color: var(--text-dim); }
.thread-code{ font-size: 11px; color: var(--text-faint); }
.thread-time{ margin-left: auto; font-size: 11px; color: var(--text-faint); }

/* 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; }
.conv-id{ display: flex; flex-direction: column; line-height: 1.3; }
.conv-id strong{ font-size: 14px; }
.conv-id span{ font-size: 11px; color: var(--text-faint); }
.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: 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; }

  /* 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) -- el resto de la app se queda en
     14px, solo estos dos campos que se usan todo el tiempo en mobile. */
  .composer textarea, .search input{ font-size: 16px; }

  /* 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%; }
}

@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;
}

.config-tabs{
  display: flex; gap: 8px;
  margin-bottom: 18px;
}
.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-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); }