/* 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;
}
html.sec-logo-img .brand-mark::before{ display: none; }
/* 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,
html[data-secret="csgo"]::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;
}
/* ═══ CS:GO ═══ táctico naranja HUD + gris CT sobre negro carbón · sprinta con rifle ═══ */
:root[data-theme="csgo"]{
--bg-deep:#111214; --bg-app:#17191c;
--surface-1:#1e2124; --surface-2:#262a2e; --surface-3:#313539;
--line:#34383e; --line-strong:#474d56;
--surface-inbox:#1a1c1f; --surface-conv:#202226; --surface-profile:#1c1e21;
--text:#ECECEC; --text-dim:#9AA0A8; --text-faint:#656B73;
--teal:#DE9B35; --teal-bright:#F2B457; --teal-deep:#B87A22; --teal-soft:rgba(222,155,53,.16);
--alert:#E4572E; --amber:#5B8DBE;
--field-bg:rgba(222,155,53,.06); --field-bg-soft:rgba(222,155,53,.04);
--hover-tint:rgba(255,255,255,.05); --hover-tint-2:rgba(222,155,53,.14);
--name-strong:#F2B457;
--body-glow-1:rgba(222,155,53,.08); --body-glow-2:rgba(91,141,190,.14);
--sec-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 400'%3E%3Cg%3E%3Crect x='20' y='160' width='80' height='110' rx='7' fill='%2315171a'/%3E%3Crect x='30' y='148' width='60' height='14' rx='4' fill='%2322262b'/%3E%3Crect x='56' y='118' width='8' height='32' fill='%233a3f46'/%3E%3Cpath d='M60 118 q-16 -28 -4 -50' stroke='%23de9b35' stroke-width='5' fill='none'/%3E%3Ccircle cx='60' cy='214' r='20' fill='%23de9b35' opacity='.85'/%3E%3Crect x='16' y='276' width='88' height='9' fill='%2315171a'/%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 fill='%2315171a'%3E%3Cpolygon points='60,60 78,182 60,224 42,182'/%3E%3Crect x='50' y='224' width='20' height='68' rx='6'/%3E%3C/g%3E%3Crect x='40' y='290' width='40' height='16' rx='6' fill='%23de9b35'/%3E%3C/svg%3E");
--sec-wash:radial-gradient(85% 55% at 50% 0%, rgba(222,155,53,.14), transparent 55%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23de9b35' stroke-width='3' opacity='.8' fill='none'%3E%3Cline x1='100' y1='8' x2='100' y2='70'/%3E%3Cline x1='100' y1='130' x2='100' y2='192'/%3E%3Cline x1='8' y1='100' x2='70' y2='100'/%3E%3Cline x1='130' y1='100' x2='192' y2='100'/%3E%3Ccircle cx='100' cy='100' r='34'/%3E%3C/g%3E%3C/svg%3E"),
repeating-linear-gradient(0deg, rgba(222,155,53,.05) 0 1px, transparent 1px 5px);
--sec-wash-op:.13; --sec-wash-blend:screen;
}
html[data-secret="csgo"]::before{ animation:secSpeed 1s linear infinite; }
html[data-secret="csgo"]::after{
left:0; bottom:4px; width:200px; height:180px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cg%3E%3Cg transform='translate(0 0)'%3E%3Ccircle cx='70' cy='54' r='13' fill='%2315171a'/%3E%3Cpath d='M57 46 Q70 36 83 46 L80 54 Q70 48 60 54Z' fill='%2315171a'/%3E%3Cpath d='M56 66 Q70 60 84 66 L80 118 Q70 124 60 118Z' fill='%2322262b'/%3E%3Ccircle cx='70' cy='90' r='4' fill='%23de9b35' opacity='.85'/%3E%3Cpath d='M82 74 Q104 78 118 92' stroke='%2315171a' stroke-width='10' fill='none' stroke-linecap='round'/%3E%3Crect x='112' y='84' width='52' height='7' rx='3' fill='%23111318' transform='rotate(18 112 84)'/%3E%3Cpath d='M58 76 Q42 84 40 104' stroke='%2315171a' stroke-width='10' fill='none' stroke-linecap='round'/%3E%3Cpath d='M64 116 Q80 138 70 168 Q68 178 56 182' stroke='%2315171a' stroke-width='13' fill='none' stroke-linecap='round'/%3E%3Cpath d='M76 116 Q56 132 30 140' stroke='%2315171a' stroke-width='13' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(200 0)'%3E%3Ccircle cx='270' cy='54' r='13' fill='%2315171a'/%3E%3Cpath d='M257 46 Q270 36 283 46 L280 54 Q270 48 260 54Z' fill='%2315171a'/%3E%3Cpath d='M256 66 Q270 60 284 66 L280 118 Q270 124 260 118Z' fill='%2322262b'/%3E%3Ccircle cx='270' cy='90' r='4' fill='%23de9b35' opacity='.85'/%3E%3Cpath d='M284 72 Q306 74 320 86' stroke='%2315171a' stroke-width='10' fill='none' stroke-linecap='round'/%3E%3Crect x='314' y='78' width='52' height='7' rx='3' fill='%23111318' transform='rotate(12 314 78)'/%3E%3Cpath d='M258 78 Q244 90 244 110' stroke='%2315171a' stroke-width='10' fill='none' stroke-linecap='round'/%3E%3Cpath d='M282 116 Q262 134 258 164 Q256 176 244 180' stroke='%2315171a' stroke-width='13' fill='none' stroke-linecap='round'/%3E%3Cpath d='M264 116 Q288 128 314 132' stroke='%2315171a' stroke-width='13' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-size:400px 200px;
animation:runCsgoCycle .22s steps(2) infinite, runFast 2.6s linear infinite;
}
/* ── botones "nade" (CS:GO) + efectos de pantalla ────────────────────────────
Solo visibles con la temática csgo activa (togglea `hidden` desde JS). Los
efectos son overlays fixed z-index altísimo, se auto-eliminan solos. ── */
.csgo-nades{ display:flex; gap:4px; align-items:center; }
.csgo-nades .nade-btn{
border:1px solid var(--line); background:var(--surface-2); color:var(--text);
border-radius:8px; width:34px; height:34px; font-size:16px; cursor:pointer;
display:flex; align-items:center; justify-content:center; transition:transform .12s, background .12s;
}
.csgo-nades .nade-btn:hover{ background:var(--hover-tint-2); transform:translateY(-1px); }
.csgo-nades .nade-btn:active{ transform:translateY(0) scale(.94); }
.csgo-flash-ov{
position:fixed; inset:0; z-index:99999; pointer-events:none;
background:#fff; animation:csgoFlashPop 2.6s cubic-bezier(.11,.85,.2,1) forwards;
}
@keyframes csgoFlashPop{
0%{ opacity:0 } 4%{ opacity:1 } 55%{ opacity:1 } 100%{ opacity:0 }
}
/* la app "encandilada" atrás mientras dura el flash — refuerza la sensación de
flashbang real, no solo la tapa blanca encima */
body{ transition:filter .8s ease-out; }
html.csgo-flashing body{ filter:brightness(1.55) contrast(.82) saturate(.35); transition:filter .12s ease-out; }
.csgo-deto-ov{
position:fixed; inset:0; z-index:99999; pointer-events:none;
display:flex; align-items:center; justify-content:center;
}
.csgo-deto-count{
font-family:"Unbounded","Hanken Grotesk",system-ui,sans-serif;
font-size:96px; font-weight:800; color:#de9b35;
text-shadow:0 0 30px rgba(222,155,53,.8), 0 8px 30px rgba(0,0,0,.6);
animation:csgoCountPulse .5s ease-in-out infinite;
}
@keyframes csgoCountPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.16) } }
.csgo-deto-ov.go-boom{
background:radial-gradient(circle, rgba(255,180,60,.95) 0%, rgba(228,87,46,.7) 32%, transparent 70%);
animation:csgoBoom .85s ease-out forwards;
}
@keyframes csgoBoom{
0%{ opacity:0; } 8%{ opacity:1; } 100%{ opacity:0; }
}
/* pantalla entera tiembla en el instante del boom */
@keyframes csgoShake{
0%,100%{ transform:translate(0,0) }
20%{ transform:translate(-6px,3px) }
40%{ transform:translate(5px,-4px) }
60%{ transform:translate(-4px,-2px) }
80%{ transform:translate(6px,2px) }
}
body.csgo-screenshake{ animation:csgoShake .42s ease-in-out; }
/* los mensajes del chat abierto "vuelan" con la explosión y vuelven solos --
la transición SOLO existe mientras #messages tiene .csgo-detonating, así que
no interfiere en nada con el render/scroll normal del chat. */
#messages.csgo-detonating .msg{
transition:transform .55s cubic-bezier(.2,.7,.3,1), opacity .55s cubic-bezier(.2,.7,.3,1);
}
#messages.csgo-detonating .msg.csgo-blast{
transform:translate(var(--ex,0px), var(--ey,0px)) rotate(var(--er,0deg)) scale(.72);
opacity:0;
}
/* humo (canvas, generado por JS) sobre el panel de mensajes */
.csgo-smoke-cv{
position:fixed; z-index:9500; pointer-events:none;
border-radius:10px; opacity:0; transition:opacity .5s ease;
}
.csgo-smoke-cv.in{ opacity:1; }
.csgo-nades .nade-smoke:hover{ background:rgba(154,160,168,.22); }
/* "tiro/caída": el ícono vuela en arco desde una esquina antes de que dispare
el efecto de verdad (flash/deto/humo). Puramente decorativo. */
.csgo-toss{
position:fixed; z-index:99999; pointer-events:none;
left:-40px; bottom:-40px; font-size:34px; line-height:1;
animation:csgoTossArc .55s cubic-bezier(.3,.6,.4,1) forwards;
}
@keyframes csgoTossArc{
0%{ transform:translate(0,0) rotate(0deg) scale(.8); opacity:.9; }
60%{ transform:translate(45vw,-32vh) rotate(360deg) scale(1); opacity:1; }
100%{ transform:translate(48vw,-40vh) rotate(430deg) scale(.9); opacity:0; }
}
/* crack/agujero de bala — vidrio roto en toda la pantalla (deto) o un agujero
más chico centrado en el chat (awp), mismo arte SVG reusado a dos escalas. */
.csgo-crack-ov{
position:fixed; z-index:99998; pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg stroke='%23fff' stroke-width='2.5' fill='none' opacity='.85'%3E%3Cpath d='M200 200 L200 20'/%3E%3Cpath d='M200 200 L320 60'/%3E%3Cpath d='M200 200 L380 160'/%3E%3Cpath d='M200 200 L380 260'/%3E%3Cpath d='M200 200 L300 360'/%3E%3Cpath d='M200 200 L200 390'/%3E%3Cpath d='M200 200 L100 370'/%3E%3Cpath d='M200 200 L20 280'/%3E%3Cpath d='M200 200 L15 180'/%3E%3Cpath d='M200 200 L60 60'/%3E%3Cpath d='M200 200 L150 30'/%3E%3Cpath d='M200 200 L260 40'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='1.4' fill='none' opacity='.55'%3E%3Cpath d='M200 200 L240 120 L260 90'/%3E%3Cpath d='M200 200 L150 260 L120 300'/%3E%3Cpath d='M200 200 L280 220 L330 240'/%3E%3Cpath d='M200 200 L120 150 L80 140'/%3E%3C/g%3E%3Ccircle cx='200' cy='200' r='14' fill='%23111' opacity='.85'/%3E%3C/svg%3E") center/contain no-repeat;
}
.csgo-crack-ov.deto{ inset:0; opacity:0; animation:csgoCrackBig 3.6s ease-out forwards; }
.csgo-crack-ov.awp{
width:min(60vw,520px); height:min(60vw,520px);
transform:translate(-50%,-50%) scale(.3); opacity:0;
animation:csgoCrackPop 1.8s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes csgoCrackBig{
0%{ opacity:0; transform:scale(.7); }
8%{ opacity:1; transform:scale(1); }
70%{ opacity:.9; }
100%{ opacity:0; }
}
@keyframes csgoCrackPop{
0%{ opacity:0; transform:translate(-50%,-50%) scale(.3); }
10%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); }
16%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
75%{ opacity:.9; transform:translate(-50%,-50%) scale(1); }
100%{ opacity:0; transform:translate(-50%,-50%) scale(1); }
}
/* la app se ve "afectada" mientras dura el crack — mismo recurso que el flash,
así el impacto se siente en toda la app, no solo en el chat */
html.csgo-cracking body{ filter:contrast(1.12) saturate(.55); transition:filter .12s ease-out; }
@media (prefers-reduced-motion: reduce){
.csgo-flash-ov, .csgo-deto-ov, .csgo-deto-ov.go-boom, .csgo-deto-count,
body.csgo-screenshake, html.csgo-flashing body, .csgo-smoke-cv,
.csgo-toss, .csgo-crack-ov, html.csgo-cracking body{ animation:none !important; transition:none !important; filter:none !important; }
}
/* ── 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 runCsgoCycle{ from{ background-position-x:0 } to{ background-position-x:-400px } }
@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. */
/* Icono de marca (2026-10-12): "JB en cuadrado-mensaje" -- las letras JB de JBEZ dentro de un cuadrado con una esquina recta abajo a la
izquierda (la forma de un mensaje). Reemplaza las 3 barras. El glifo es un SVG usado como máscara de un degradado con los tokens del
tema (cambia de color con el tema y escala nítido a 34/46 px). El fondo sale de --bg-deep mezclado con --teal: ya NO es verde fijo.
::before = glifo; ::after queda para el ♪ de .has-sound. */
.brand-mark{
--glyph: url('data:image/svg+xml;utf8,');
width: 46px; height: 46px; border-radius: 17px 17px 17px 2px;
position: relative; flex: none;
background: radial-gradient(120% 120% at 18% 0%, color-mix(in srgb, var(--teal) 30%, var(--bg-deep)), var(--bg-deep) 72%);
box-shadow: inset 0 0 0 1px var(--line-strong), 0 10px 24px -12px var(--teal);
}
.brand-mark::before{
content: ""; position: absolute; inset: 0;
background: linear-gradient(160deg, var(--teal-bright), var(--teal-deep));
-webkit-mask: var(--glyph) center / 78% no-repeat; mask: var(--glyph) center / 78% no-repeat;
}
.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); }
/* versión del CRM — pie de la barra lateral */
.app-ver{
margin-top: 10px; padding: 8px 12px 0;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px; letter-spacing: .14em; color: var(--text-faint);
user-select: none;
}
/* ═══ SPLASH DE INICIO (#bootSplash) — futurista, se auto-elimina en ~1,5 s ═══ */
#bootSplash{
position: fixed; inset: 0; z-index: 100000; pointer-events: none;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(120% 90% at 50% 34%, #14261f 0%, #0a1512 55%, #05100d 100%);
/* auto-fade por CSS a los ~2,2 s por si el JS de cleanup no corre; el JS igual lo saca del DOM */
animation: bsIn .18s ease both, bsOut .5s ease 2.2s forwards;
}
#bootSplash.done{ animation: bsOut .5s ease forwards; }
@keyframes bsIn{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes bsOut{ to{ opacity: 0; visibility: hidden; pointer-events: none } }
#bootSplash .bs-grid{
position: absolute; inset: 0; opacity: .5;
background:
repeating-linear-gradient(0deg, rgba(52,209,124,.06) 0 1px, transparent 1px 46px),
repeating-linear-gradient(90deg, rgba(52,209,124,.06) 0 1px, transparent 1px 46px);
-webkit-mask: radial-gradient(58% 52% at 50% 45%, #000, transparent 82%);
mask: radial-gradient(58% 52% at 50% 45%, #000, transparent 82%);
animation: bsGrid 6s linear infinite;
}
@keyframes bsGrid{ to{ background-position: 0 46px, 46px 0 } }
#bootSplash .bs-core{
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center; gap: 10px;
animation: bsPop .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bsPop{ from{ transform: translateY(8px) scale(.96); opacity: 0 } to{ transform: none; opacity: 1 } }
#bootSplash .bs-mark{
display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-bottom: 4px;
filter: drop-shadow(0 0 18px rgba(52,209,124,.55));
}
#bootSplash .bs-mark span{
width: 9px; border-radius: 3px; background: linear-gradient(#7CF0B0, #22b06c);
animation: bsBar 1s ease-in-out infinite alternate;
}
#bootSplash .bs-mark span:nth-child(1){ height: 44%; animation-delay: 0s }
#bootSplash .bs-mark span:nth-child(2){ height: 72%; animation-delay: .12s }
#bootSplash .bs-mark span:nth-child(3){ height: 100%; animation-delay: .24s }
@keyframes bsBar{ from{ transform: scaleY(.82) } to{ transform: scaleY(1) } }
#bootSplash .bs-word{
font-family: "Unbounded", "Hanken Grotesk", system-ui, sans-serif; font-weight: 800;
font-size: 40px; letter-spacing: .14em; color: #F1FFF6;
text-shadow: 0 0 34px rgba(52,209,124,.5);
}
#bootSplash .bs-sub{
font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600;
letter-spacing: .42em; color: #5fd39a; text-indent: .42em;
}
#bootSplash .bs-bar{
margin-top: 8px; width: 190px; height: 3px; border-radius: 99px; overflow: hidden;
background: rgba(255,255,255,.08);
}
#bootSplash .bs-bar i{
display: block; height: 100%; width: 4%; border-radius: 99px;
background: linear-gradient(90deg, #22b06c, #7CF0B0);
box-shadow: 0 0 12px rgba(124,240,176,.7);
animation: bsFill 1.25s cubic-bezier(.5,.05,.2,1) forwards;
}
@keyframes bsFill{ 0%{ width: 4% } 60%{ width: 72% } 100%{ width: 100% } }
#bootSplash .bs-ver{
font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .16em;
color: #3f7d5f; margin-top: 2px;
}
@media (prefers-reduced-motion: reduce){
#bootSplash, #bootSplash *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
#bootSplash .bs-bar i{ width: 100% }
}
.nav-item{
position: relative;
display: flex; align-items: center; gap: 11px;
padding: 10px 12px;
border-radius: var(--r-sm);
color: var(--text-dim);
text-decoration: none;
transition: background .16s, color .16s;
}
.nav-item:hover{ background: var(--hover-tint); color: var(--text); }
.nav-item.is-active{ background: var(--teal-soft); color: var(--teal-bright); }
.nav-item.is-active::before{
content: "";
position: absolute; left: -14px; top: 50%;
width: 3px; height: 20px;
transform: translateY(-50%);
border-radius: 0 3px 3px 0;
background: var(--teal-bright);
}
.dot{
width: 7px; height: 7px; border-radius: 50%;
display: inline-block;
}
.dot-alert{ background: var(--alert); }
.nav-item .dot{ margin-left: auto; }
/* ══════════════════════════════════════════
TOPBAR
══════════════════════════════════════════ */
.main{ display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar{
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px 14px;
/* PWA instalada a pantalla completa (display:standalone + viewport-fit=cover en
index.html): sin esto la barra de estado del celular (reloj/batería) queda flotando
encima de este header en vez de arriba de todo -- env() resuelve a 0 en navegador
normal, así que no cambia nada fuera de la app instalada. */
padding-top: calc(20px + env(safe-area-inset-top));
}
.page-title{ margin: 0; font-family: "Unbounded", sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.topbar-actions{ display: flex; align-items: center; gap: 12px; }
.btn{
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px;
border: 0; border-radius: 99px;
font-weight: 600; font-size: 13px;
}
.btn-primary{
background: linear-gradient(135deg, var(--teal-bright), var(--teal));
color: #04262A;
box-shadow: 0 8px 20px -10px var(--teal);
}
.btn-primary:hover{ filter: brightness(1.07); }
.btn svg{ width: 15px; height: 15px; stroke-width: 2.4; }
.btn-danger{
background: linear-gradient(135deg, #F0555B, #C6333A);
color: #fff;
box-shadow: 0 8px 20px -10px #F0555B;
}
.btn-danger:hover{ filter: brightness(1.06); }
.conv-danger{
/* .profile-section ya pone 14px de padding horizontal, pero al ser la única sección
con borde + fondo propio se nota mucho más pegada al borde del panel que el resto
del contenido (que no tiene ningún límite visual) -- unos px extra de margen la
separan un poco más. */
margin: 18px 6px 0;
padding: 14px;
border: 1px solid rgba(240,85,91,.35);
border-radius: var(--r-sm);
background: rgba(240,85,91,.06);
}
.conv-danger .section-head h4{ color: var(--alert); }
/* ── Modal de Carga / Descarga de fichas ── */
.mov-title{ display: flex; align-items: center; gap: 8px; margin: 0; }
.mov-title .mov-ico{
display: grid; place-items: center;
width: 26px; height: 26px; border-radius: 8px;
font-weight: 800; font-size: 15px;
}
.mov-title.is-carga .mov-ico{ background: var(--teal-soft); color: var(--teal-bright); }
.mov-title.is-descarga .mov-ico{ background: rgba(245,179,66,.16); color: var(--amber); }
.mov-who{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px; }
.mov-user{ font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 15px; }
.mov-tags{ display: flex; gap: 6px; }
.mov-tag{
padding: 2px 8px; border-radius: 99px;
background: var(--surface-3); border: 1px solid var(--line-strong);
font-size: 11px; font-weight: 600; color: var(--text-dim);
}
.mov-stats{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
padding: 12px; margin-bottom: 12px;
background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.mov-stats > div{ display: flex; flex-direction: column; gap: 3px; }
.mov-stats span{ font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; }
.mov-stats b{ font-size: 14px; font-variant-numeric: tabular-nums; }
.mov-stats b.up{ color: var(--teal-bright); }
.mov-stats b.down{ color: var(--alert); }
.mov-warn{
margin: 0 0 12px; padding: 9px 12px;
border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600;
}
.mov-warn.is-excl{ background: rgba(240,85,91,.1); border: 1px solid rgba(240,85,91,.4); color: var(--alert); }
.mov-input{
display: flex; align-items: center; gap: 4px;
border: 1px solid var(--line-strong); border-radius: var(--r-sm);
background: var(--surface-1); padding: 0 12px;
}
.mov-input:focus-within{ border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.mov-input i{ font-style: normal; color: var(--text-faint); font-size: 18px; font-weight: 700; }
.mov-input input{
flex: 1; border: 0; outline: 0; background: none;
color: var(--text); font: 700 22px/1 "JetBrains Mono", monospace;
padding: 12px 0; -moz-appearance: textfield;
}
.mov-input input::-webkit-outer-spin-button,
.mov-input input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.mov-quick{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mov-quick button{
padding: 7px 12px; border-radius: 99px;
border: 1px solid var(--line-strong); background: var(--surface-2);
color: var(--text-dim); font-size: 12.5px; font-weight: 600;
font-variant-numeric: tabular-nums; transition: background .14s, color .14s, border-color .14s;
}
.mov-quick button:hover{ background: var(--teal-soft); border-color: var(--teal); color: var(--teal-bright); }
.mov-preview{ margin: 12px 0 0; min-height: 18px; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mov-preview.is-warn{ color: var(--amber); font-weight: 600; }
.mov-done{ text-align: center; padding: 26px 10px 20px; }
.mov-done-ico{
width: 54px; height: 54px; margin: 0 auto 14px;
display: grid; place-items: center; border-radius: 16px;
font-size: 28px; font-weight: 800;
}
.mov-done-ico.is-carga{ background: var(--teal-soft); color: var(--teal-bright); }
.mov-done-ico.is-descarga{ background: rgba(245,179,66,.16); color: var(--amber); }
.mov-done h3{ margin: 0 0 4px; font-size: 16px; }
.icon-btn{
position: relative;
display: grid; place-items: center;
width: 36px; height: 36px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--surface-1);
color: var(--text-dim);
transition: color .16s, border-color .16s;
}
.icon-btn:hover{ color: var(--text); border-color: var(--line-strong); }
.icon-btn.ghost{ border: 0; background: transparent; }
#toggleSidebar, .nav-overlay{ display: none; }
.icon-btn .dot{ position: absolute; top: 7px; right: 8px; }
.me{
display: flex; align-items: center; gap: 9px;
padding-left: 8px;
font-size: 13px; font-weight: 500;
}
.me img{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
/* ══════════════════════════════════════════
WORKSPACE / PANELES
══════════════════════════════════════════ */
.workspace{
flex: 1;
display: grid;
grid-template-columns: var(--inbox-w) 1fr var(--profile-w);
gap: 14px;
padding: 0 20px 20px;
min-height: 0;
min-width: 0; /* .main es flex-direction:column -- sin esto .workspace no se achica
por debajo del ancho mínimo de su contenido (mismo motivo que min-height:0 de acá
abajo, pero en el eje horizontal), y en mobile de una sola columna eso desborda la
pantalla en vez de dejar que el texto adentro haga wrap. */
}
.panel{
display: flex; flex-direction: column;
min-height: 0;
min-width: 0; /* mismo motivo que arriba: .panel es un item de grid (.workspace) o,
en mobile, ocupa toda la columna -- sin esto no se achica por debajo del contenido
interno (ej. la cabecera de conversación) y desborda a la derecha. */
background: var(--surface-1);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,.028);
}
/* Cada panel su tono -- así no parece un solo bloque verde uniforme. */
.panel.inbox{ background: var(--surface-inbox); }
.panel.conversation{ background: var(--surface-conv); }
.panel.profile{ background: var(--surface-profile); }
/* Selector de tema (pie del sidebar): 3 pastillas de color. */
.theme-switch{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 4px 6px; }
.thm-rojo{ background: #E0384B; }
.thm-ambar{ background: #F5C518; }
.thm-oro{ background: #D4AF37; }
.thm-gris{ background: #8992A0; }
.thm-nebula{ background: #B99DF6; }
.thm{
width: 18px; height: 18px; padding: 0;
border-radius: 50%;
border: 2px solid var(--line-strong);
transition: transform .12s, box-shadow .12s, border-color .12s;
}
.thm:hover{ transform: scale(1.14); }
.thm-dark{ background: #101614; }
.thm-light{ background: #EEF1F4; }
.thm-navy{ background: #0E1B33; }
.thm.is-active{ border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
/* código de temáticas secretas (barra lateral) — no dejan swatch */
.theme-code{
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 2px 6px 10px; justify-content: center;
}
.theme-code input{
flex: 1 1 108px; min-width: 0; max-width: 150px;
background: var(--field-bg); border: 1px solid var(--line);
border-radius: var(--r-sm); color: var(--text);
font: inherit; font-size: 11px; padding: 5px 8px;
}
.theme-code input::placeholder{ color: var(--text-faint); }
.theme-code input:focus{ outline: none; border-color: var(--teal); background: var(--field-bg-soft); }
.theme-code button{
flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
display: grid; place-items: center; cursor: pointer;
background: var(--teal-soft); color: var(--teal);
border: 1px solid var(--line); border-radius: var(--r-sm);
font-size: 12px; line-height: 1;
transition: background .12s, color .12s;
}
.theme-code button:hover{ background: var(--teal); color: var(--name-strong); }
.theme-code-msg{ flex: 1 1 100%; text-align: center; font-size: 10.5px; min-height: 13px; color: var(--text-faint); }
.theme-code-msg.ok{ color: var(--teal); }
.theme-code-msg.err{ color: var(--alert); }
.panel-head{
display: flex; align-items: center; justify-content: space-between;
padding: 15px 16px;
background: linear-gradient(180deg, var(--surface-2), transparent);
border-bottom: 1px solid var(--line);
border-radius: var(--r-md) var(--r-md) 0 0;
}
.panel-head h2{ margin: 0; font-family: "Unbounded", sans-serif; font-size: 14px; font-weight: 700; }
.inbox-refresh-btn{
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong);
background: var(--surface-2); color: var(--text-dim); cursor: pointer; flex: none;
}
.inbox-refresh-btn:hover{ background: var(--hover-tint-2); color: var(--text); }
.inbox-refresh-btn svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inbox-refresh-btn.is-spinning svg{ animation: inboxRefreshSpin .7s linear infinite; }
@keyframes inboxRefreshSpin{ from{ transform: rotate(0) } to{ transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .inbox-refresh-btn.is-spinning svg{ animation: none; } }
.pill{
margin-left: 6px;
padding: 3px 9px;
border-radius: 99px;
background: var(--alert);
font-size: 10.5px; font-weight: 600;
color: #fff;
vertical-align: middle;
}
/* ── Filtro tipo WhatsApp (Todos / No leídos) ── */
.filter-chips{
display: flex; flex-wrap: wrap; gap: 8px;
margin: 12px 16px;
}
.chip{
padding: 6px 14px;
border: 1px solid var(--line);
border-radius: 99px;
background: transparent;
color: var(--text-dim);
font-size: 12.5px; font-weight: 600;
transition: background .16s, color .16s, border-color .16s;
}
.chip:hover{ border-color: var(--line-strong); color: var(--text); }
.chip.is-active{
background: var(--teal-soft);
border-color: var(--teal);
color: var(--teal-bright);
}
/* ── Buscador ── */
.search{
display: flex; align-items: center; gap: 9px;
margin: 0 16px 12px;
padding: 9px 13px;
border: 1px solid var(--line);
border-radius: 99px;
background: var(--field-bg);
color: var(--text-faint);
}
.search:focus-within{ border-color: var(--teal); }
.search svg{ width: 15px; height: 15px; flex: none; }
.search input{
flex: 1; min-width: 0;
border: 0; outline: 0; background: none;
color: var(--text); font: inherit;
}
.search input::placeholder{ color: var(--text-faint); }
/* ── Lista de conversaciones ── */
.thread-list{
flex: 1;
margin: 0; padding: 0 10px 12px;
list-style: none;
overflow-y: auto;
}
.thread{
position: relative;
padding: 12px;
margin-bottom: 6px;
border-radius: var(--r-sm);
cursor: pointer;
transition: background .16s;
}
.thread:hover{ background: var(--hover-tint); }
.thread-more{
list-style: none; text-align: center; padding: 12px; margin: 4px 0 8px;
border-radius: var(--r-sm); background: var(--field-bg-soft);
color: var(--text-dim); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.thread-more:hover{ background: var(--hover-tint); color: var(--text); }
.att-pdf{ display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.thread.is-active{
background: linear-gradient(135deg, var(--teal), var(--teal-deep));
box-shadow: 0 12px 26px -14px var(--teal);
}
.thread.is-active .thread-name,
.thread.is-active .thread-code,
.thread.is-active .thread-time,
.thread.is-active .thread-preview{ color: #EAFFFD; }
.thread.is-active .thread-code,
.thread.is-active .thread-time{ opacity: .8; }
.thread-top{ display: flex; align-items: center; gap: 10px; }
.thread-avatar{ position: relative; flex: none; display: inline-flex; }
.thread-top img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
/* Pin rojo: la ULTIMA respuesta de la conversacion es del jugador (todavia no se le
contesto), a diferencia de .is-unread que depende de unread_count de Chatwoot y
desaparece apenas el agente ABRE el chat aunque nunca haya llegado a responder. */
.pin-unanswered{
position: absolute; top: -1px; right: -1px;
width: 11px; height: 11px; border-radius: 50%;
background: var(--alert);
border: 2px solid var(--surface-1);
}
/* Chincheta para fijar un chat arriba de todo en la Bandeja (ver togglePin en app.js) --
pedido explícito de los cajeros para no tener que buscar de nuevo a los jugadores con
los que hablan seguido. Guardado en localStorage, es una preferencia por agente/
navegador, no algo que haya que sincronizar entre cajeros. */
.thread-pin-btn{
position: absolute; top: 8px; right: 8px;
width: 22px; height: 22px; display: grid; place-items: center;
border: 0; background: transparent; color: var(--text-faint);
border-radius: 50%; opacity: 0; transition: opacity .12s, color .12s, background .12s;
font-size: 12.5px; line-height: 1; padding: 0; cursor: pointer;
}
.thread:hover .thread-pin-btn, .thread-pin-btn.is-pinned{ opacity: 1; }
.thread-pin-btn.is-pinned{ color: var(--teal-bright); }
.thread-pin-btn:hover{ background: var(--hover-tint-2); }
.thread.is-active .thread-pin-btn{ color: #EAFFFD; }
@media(hover:none){ .thread-pin-btn{ opacity: .6; } }
.thread-main{ min-width: 0; }
/* LEÍDO por defecto: nombre y preview apagados, sin negrita -- la conversación "descansa". */
.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); }
/* ── Emojis del compositor (lado agente, no el widget del jugador) ── */
.emoji-picker-wrap{ position: relative; }
.emoji-picker{
position: absolute; bottom: calc(100% + 8px); left: 0;
width: 268px; max-height: 224px; overflow-y: auto;
background: var(--surface-1); border: 1px solid var(--line-strong);
border-radius: 12px; padding: 8px;
display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
box-shadow: 0 14px 34px rgba(0,0,0,.4);
z-index: 30;
}
.emoji-picker button{
border: 0; background: none; cursor: pointer;
font-size: 19px; line-height: 1; padding: 6px 0; border-radius: 8px;
transition: background .12s;
}
.emoji-picker button:hover{ background: var(--surface-2); }
/* ── 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) ── */
/* Boxeado (2026-09-23, pedido explícito: "hay muchas info suelta en el coso de la
derecha, pone box a las cosas") -- antes eran filas sueltas separadas solo por una
línea fina, ahora el bloque entero es una tarjeta visible. */
.jugador-stats{
display: flex; flex-direction: column; gap: 2px;
padding: 6px 10px; margin: 0 2px;
border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--surface-2);
}
.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; }
/* El mismo chat/teléfono tiene más de un usuario BET30 vinculado (nombre con / o //,
2026-09-23) -- el cajero elige cuál antes de que CARGA/DESCARGA se habiliten. */
.multiusuario-row{ padding: 0 2px 10px; }
.multiusuario-opts{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.multiusuario-btn{ flex-shrink: 0; padding: 8px 14px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.multiusuario-btn.is-active{
background: linear-gradient(135deg, var(--teal-bright), var(--teal));
color: #04262A; border-color: transparent;
}
/* Caja de "Plataformas" (fichas en vivo, vincular usuario, CARGA/DESCARGA) -- pedido
explícito 2026-09-23: "pone box a las cosas, hay muchas info suelta en el coso de la
derecha". Envuelve TODO el contenido de #platformsSection en una tarjeta, sin tocar
.profile-section (compartida por otras secciones que no pidieron este cambio). */
#platformsSection{
padding: 12px 12px 14px; margin: 0 14px 16px;
border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--surface-2);
}
#platformsSection .section-head{ padding: 0; }
.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;
}
/* "Mandar al chat" (2026-09-17): filas de acciones sugeridas -- juegos sin jugar hoy,
plataformas, números de sorteo -- cada una con un botón chico "Mandar" a la derecha.
Mismo lenguaje visual que .platform-item (fila con borde + fondo suave), pero con acción
en vez de check. */
.acciones-group{ margin-bottom: 12px; }
.acciones-group:last-child{ margin-bottom: 0; }
.acciones-label{ margin: 0 0 6px; padding: 0 2px; font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.acciones-list{ margin: 0; padding: 0 2px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.accion-item{
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--field-bg-soft);
}
.accion-item-name{ font-size: 12.5px; font-weight: 600; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accion-send-btn{
flex: none;
padding: 6px 12px;
border: 0; border-radius: 7px;
background: var(--teal);
color: #04262A;
font-size: 11.5px; font-weight: 700;
cursor: pointer;
transition: filter .15s;
}
.accion-send-btn:hover{ filter: brightness(1.1); }
.accion-send-btn:active{ filter: brightness(.9); }
.accion-send-btn:disabled{ opacity: .5; cursor: default; }
.accion-send-btn.sent{ background: var(--text-faint); color: var(--surface-1); }
.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; }
/* tarjetas de plataforma (ej. link_ganamos, ver LINK_CARDS/linkCardTemplate en app.js) --
la imagen ya trae el texto/botón "horneados" en el pixel, así que la tarjeta es solo
el marco: bordes redondeados + sombra, sin padding/contenido propio.
OJO: `.msg img` (arriba, es la regla del avatar circular 30x30) matchea CUALQUIER ![]()
dentro de `.msg`, incluida esta -- hay que pisar TODAS las propiedades que toca
(height/border-radius/object-fit/flex/align-self), no solo width, si no la imagen
queda aplastada a 30px de alto con bordes redondeados tipo cápsula. */
.link-card{ display: block; width: 260px; max-width: 100%; border-radius: var(--r-md);
overflow: hidden; box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); }
.link-card picture{ display: block; width: 100%; }
.link-card img{
display: block; width: 100%; height: auto; border-radius: 0; object-fit: fill;
flex: initial; align-self: auto;
}
/* ══════════════════════════════════════════
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; }
/* El header (título + selector de alias/CVU + campana + usuario) es un flex de una
sola línea SIN wrap -- en un celular, "Configuración" (más ancho que "Chat") +
el selector CVU + el switch + la campana + el avatar no entran todos, y sin
nada que ceda se superponían/recortaban entre sí (reportado con captura real:
"arriba se tilda, se superpone"). El selector de alias es un ATAJO de lo mismo
que ya está en Configuración › CVU/Alias -- se oculta en mobile en vez de
competir por un espacio que no tiene, y flex-wrap queda de red por si algo
más ahí adentro no entra igual. */
/* Endurecido -- el reporte "se pisa" seguia despues de ocultar solo el selector de
alias: el nombre del agente logueado (#meName, sin limite de ancho ni recorte) es
OTRO ancho impredecible que puede sumarse a "Configuración" + campana + avatar y
seguir sin entrar. overflow-x:hidden como garantia dura -- con esto ya no hay
forma de que algo desborde y se pise con lo de abajo, pase lo que pase. */
.topbar{ flex-wrap: wrap; row-gap: 8px; overflow-x: hidden; }
.topbar-alias{ display: none; }
.me span{ display: none; }
.page-title{ font-size: 17px; }
.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: 12.5px 12.5px 12.5px 1.5px; }
.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; }
/* Con un chat abierto, la barra de íconos (Bandeja/Config/Panel...) de 64px seguía
ocupando ancho real en una pantalla ya angosta -- no hacía falta mientras estás dentro
de UN chat. Se oculta entera y el chat pasa a ocupar el 100% del ancho; #toggleSidebar
(flecha arriba del chat, junto a "volver") la trae de vuelta como panel flotante sin
salir del chat, para cambiar de sección sin perder la conversación abierta. */
.app.is-conv-open{ grid-template-columns: 1fr; }
.app.is-conv-open .sidebar{ display: none; }
.app.is-conv-open.is-nav-open .sidebar{
display: flex;
position: fixed; top: 0; left: 0; bottom: 0;
width: 220px; z-index: 60;
box-shadow: 14px 0 40px -12px rgba(0,0,0,.6);
}
.app.is-conv-open.is-nav-open .sidebar .brand-name,
.app.is-conv-open.is-nav-open .nav-item span{ display: inline; }
.app.is-conv-open.is-nav-open .nav-item{ justify-content: flex-start; }
/* Fondo oscuro clickeable detrás del panel flotante -- tocar afuera lo cierra, igual
que el patrón ya usado para el panel de perfil (#profileOverlayClose). */
.nav-overlay{ display: none; }
.app.is-conv-open.is-nav-open .nav-overlay{
display: block;
position: fixed; inset: 0; z-index: 55;
background: rgba(0,0,0,.45);
}
#toggleSidebar{ display: inline-flex; }
/* Composer más cómodo en celular: el botón de "estados" (⏳, #procBtn) queda solo en
PC -- pedido explícito, es un atajo poco usado que le come espacio real al textarea
en una pantalla angosta. El resto de los íconos (plantillas/adjuntar/emoji) se
achican un poco para dejarle más aire al campo de texto en vez de sacarlos. */
#procBtn{ display: none; }
.composer{ gap: 4px; padding: 6px 6px 6px 8px; }
.composer-icon-btn{ width: 30px; height: 30px; }
.send{ width: 30px; height: 30px; }
/* Perfil a pantalla completa (no un panel de 380px angosto que en un celular real
ocupa el ancho entero igual, pero mejor ser explícitos). */
.profile{ max-width: none; }
/* 16px evita que iOS Safari haga zoom automático al enfocar el campo (cualquier
input con font-size < 16px dispara ese zoom, y una vez que hace zoom desacomoda
TODO el layout de la página -- botones que quedan fuera de la parte visible,
tipo el de "Ver perfil" de 3 puntos, sin que el botón en sí tenga nada roto).
Antes solo cubría composer/buscador; ampliado a CUALQUIER campo de texto de la
app (los que se fueron agregando -- número de WhatsApp, crear tema, contraseña
de Avanzado, etc. -- se habían quedado afuera de esta protección). */
/* !important necesario: ".composer textarea", ".search input", ".field input/textarea/
select" y ".login-card input" (entre otros) usan "font: inherit" para heredar el
tamaño de su contenedor -- esos selectores (clase + tipo) tienen MAS especificidad
que esta lista de acá (solo tipo/atributo), así que sin !important esta regla
pierde justo contra los campos más usados (el propio composer del chat) y el zoom
seguía intacto ahí -- encontrado en vivo, reportado como "al escribir en el chat
sigue haciendo zoom" pese a que esta regla ya "cubría" ese campo en el papel. */
input[type="text"], input[type="search"], input[type="password"], input[type="tel"],
input[type="number"], input[type="email"], input:not([type]), textarea, select{
font-size: 16px !important;
}
/* 8 pestañas de Configuración no entran en una fila en un celular -- scroll
horizontal en vez de que se corten/apilen. */
.config-tabs{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.config-tab{ flex: none; }
.data-filters{ flex-wrap: wrap; }
.data-filters .search{ max-width: none; flex-basis: 100%; }
}
@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;
}
/* ═══ Perro del login — mira el email, se tapa los ojos con la contraseña ═══ */
.login-dog{ --eye-x: 0px; --eye-y: 0px; width: 132px; margin: 2px auto 14px; display: block; }
.login-dog .dog{ width: 100%; height: auto; display: block; overflow: visible; }
.login-dog *{ transform-box: fill-box; }
.login-dog .dog-shadow{ fill: rgba(0,0,0,.16); }
.login-dog .dog-body,
.login-dog .dog-face,
.login-dog .dog-paw rect{ fill: #9E77E8; }
.login-dog .dog-muzzle{ fill: #EFE6FF; }
.login-dog .ear-out{ fill: #8A5FD8; }
.login-dog .ear-in{ fill: #6B44B0; }
.login-dog .dog-nose{ fill: #2E2140; }
.login-dog .dog-mouth,
.login-dog .dog-mouth-sad{ fill: none; stroke: #5A3E86; stroke-width: 3; stroke-linecap: round; }
.login-dog .dog-mouth-sad{ opacity: 0; }
.login-dog .dog-tongue{ fill: #F58EA0; opacity: 0; }
.login-dog .dog-brow{ fill: none; stroke: #7B5AC8; stroke-width: 4; stroke-linecap: round; transition: transform .2s ease; }
.login-dog .eye-white{ fill: #fff; }
.login-dog .eye-pupil{ fill: #221830; transform: translate(var(--eye-x), var(--eye-y)); transition: transform .12s ease-out; }
.login-dog .eye-spark{ fill: #fff; }
.login-dog .eye-lid{ fill: #9E77E8; transform: scaleY(0); transform-origin: 50% 0; }
.login-dog .dog-collar{ fill: #F5C518; }
.login-dog .dog-tag{ fill: #F5C518; }
.login-dog .dog-tag-ring{ fill: none; stroke: #fff; stroke-width: 1.3; stroke-dasharray: 2 2.4; }
.login-dog .paw-pad{ fill: none; stroke: #7C4FD0; stroke-width: 3; stroke-linecap: round; }
/* máscara de casino (antifaz) */
.login-dog .dog-mask-fill{ fill: #5E3AA8; }
.login-dog .dog-mask-edge{ fill: none; stroke: #F5C518; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.login-dog .dog-gem{ fill: #FFE07A; stroke: #C99A12; stroke-width: 1; }
.login-dog .dog-paw{ transform-origin: 50% 100%; transition: transform .34s cubic-bezier(.34,1.35,.5,1); }
.login-dog .dog-ear{ transform-origin: 50% 14%; transition: transform .3s ease; }
.login-dog .dog-head{ transform-origin: 50% 82%; transition: transform .3s ease; }
.login-dog .dog-tail{ transform-origin: 0% 100%; }
.login-dog .dog-tail{ animation: dogWag 1.1s ease-in-out infinite alternate; }
.login-dog .dog-ear-l{ animation: dogEarL 3s ease-in-out infinite alternate; }
.login-dog .dog-ear-r{ animation: dogEarR 3.4s ease-in-out infinite alternate; }
.login-dog .eye-lid{ animation: dogBlink 4.6s infinite; }
.login-dog{ animation: dogBreathe 3.6s ease-in-out infinite; }
@keyframes dogWag{ from{ transform: rotate(-14deg) } to{ transform: rotate(17deg) } }
@keyframes dogEarL{ from{ transform: rotate(-3deg) } to{ transform: rotate(4deg) } }
@keyframes dogEarR{ from{ transform: rotate(3deg) } to{ transform: rotate(-4deg) } }
@keyframes dogBlink{ 0%,92%,100%{ transform: scaleY(0) } 95%,97%{ transform: scaleY(1) } }
@keyframes dogBreathe{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.015) } }
@keyframes dogHop{ 0%,100%{ transform: translateY(0) } 40%{ transform: translateY(-13px) } 72%{ transform: translateY(0) } }
@keyframes dogShake{ 0%,100%{ transform: translateX(0) } 25%{ transform: translateX(-5px) } 75%{ transform: translateX(5px) } }
@keyframes dogThink{ 0%,100%{ transform: translate(-2.6px,-1.6px) } 50%{ transform: translate(2.6px,-1.6px) } }
/* email en foco: orejas arriba, cabecita inclinada, cola rápida */
.login-dog.is-typing .dog-ear-l{ transform: rotate(-16deg) translateY(-3px); animation: none; }
.login-dog.is-typing .dog-ear-r{ transform: rotate(16deg) translateY(-3px); animation: none; }
.login-dog.is-typing .dog-head{ transform: rotate(3deg); }
.login-dog.is-typing .dog-brow{ transform: translateY(-3px); }
.login-dog.is-typing .dog-tail{ animation-duration: .45s; }
/* contraseña: se tapa los ojos con las patas, orejas caídas */
.login-dog.is-hiding .dog-paw-l{ transform: translate(12px,-78px) rotate(-26deg); }
.login-dog.is-hiding .dog-paw-r{ transform: translate(-12px,-78px) rotate(26deg); }
.login-dog.is-hiding .dog-ear-l{ transform: rotate(15deg) translateY(7px); animation: none; }
.login-dog.is-hiding .dog-ear-r{ transform: rotate(-15deg) translateY(7px); animation: none; }
.login-dog.is-hiding .dog-tail{ animation-duration: 2.4s; }
.login-dog.is-hiding .eye-lid{ animation: none; transform: scaleY(1); }
/* "mostrar contraseña": baja una pata y espía */
.login-dog.is-hiding.peek .dog-paw-r{ transform: none; }
.login-dog.is-hiding.peek .dog-eye-r .eye-lid{ transform: scaleY(0); }
.login-dog.is-hiding.peek .dog-ear-r{ transform: rotate(-5deg); }
/* enviando */
.login-dog.is-think .dog-ear-l{ transform: rotate(-14deg); animation: none; }
.login-dog.is-think .dog-ear-r{ transform: rotate(14deg); animation: none; }
.login-dog.is-think .eye-pupil{ animation: dogThink 1s ease-in-out infinite; }
/* login OK */
.login-dog.is-happy{ animation: dogHop .6s ease 2; }
.login-dog.is-happy .dog-tail{ animation-duration: .3s; }
.login-dog.is-happy .dog-ear-l{ transform: rotate(-21deg) translateY(-4px); animation: none; }
.login-dog.is-happy .dog-ear-r{ transform: rotate(21deg) translateY(-4px); animation: none; }
.login-dog.is-happy .dog-tongue{ opacity: 1; }
.login-dog.is-happy .dog-mouth{ stroke-width: 3.4; }
.login-dog.is-happy .eye-lid{ transform: scaleY(.45); animation: none; }
/* error de login */
.login-dog.is-sad{ animation: dogShake .4s ease 2; }
.login-dog.is-sad .dog-ear-l{ transform: rotate(25deg) translateY(11px); animation: none; }
.login-dog.is-sad .dog-ear-r{ transform: rotate(-25deg) translateY(11px); animation: none; }
.login-dog.is-sad .dog-brow-l{ transform: rotate(19deg) translateY(2px); }
.login-dog.is-sad .dog-brow-r{ transform: rotate(-19deg) translateY(2px); }
.login-dog.is-sad .dog-mouth{ opacity: 0; }
.login-dog.is-sad .dog-mouth-sad{ opacity: 1; }
.login-dog.is-sad .eye-pupil{ transform: translate(0,3px); }
.login-dog.is-sad .dog-tail{ animation: none; transform: rotate(-8deg); }
@media (prefers-reduced-motion: reduce){
.login-dog, .login-dog *{ animation: none !important; }
.login-dog .eye-pupil, .login-dog .dog-paw, .login-dog .dog-ear, .login-dog .dog-head{ transition-duration: .01ms !important; }
}
/* ══════════════════════════════════════════
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-view (el padre) scrollea vertical Y .config-tabs scrollea horizontal --
dos scrolls anidados en distintos ejes es un clasico gotcha tactil: al intentar
deslizar los dedos para ver "Stickers" (mas a la derecha), el navegador interpreta
el gesto como un scroll VERTICAL del padre en vez de horizontal de la barra, y la
barra de pestañas (sin position:sticky) se va para arriba y sale de la pantalla --
"no puedo desplazarme, simplemente desaparece" (reportado con captura real).
Fijándola arriba del scroll del padre queda siempre alcanzable pase lo que pase
con el gesto, y el fondo evita que el contenido scrolleado se vea pasar por atrás. */
position: sticky;
top: 0;
z-index: 2;
background: var(--bg-app);
flex-shrink: 0;
/* escritorio: las pestañas bajan a otra fila en vez de desbordar y generar un
scroll horizontal en .config-view (barra abajo de todo). En mobile el bloque
@media de mas abajo las vuelve a poner en una fila con scroll propio. */
flex-wrap: wrap;
padding-top: 4px;
}
.config-view{ overflow-x: hidden; }
@media (max-width: 880px){
.config-tabs{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.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; }
/* ── Notificaciones de Jeizy por WhatsApp (Config › Avanzado) ── */
.jeizy-notify-head{ margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.jeizy-notify-new{
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
padding: 10px 12px; margin: 10px 0 12px;
border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2);
}
.jeizy-notify-new input{
flex: 1 1 200px; 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);
}
.jeizy-notify-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jeizy-notify-row{
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface-2); font-variant-numeric: tabular-nums; font-size: 13px;
}
.jeizy-notify-del{
border: 1px solid var(--line-strong); background: var(--field-bg); color: var(--text-dim);
border-radius: 99px; width: 22px; height: 22px; font-size: 11px; cursor: pointer; line-height: 1;
}
.jeizy-notify-del:hover{ background: var(--hover-tint-2); color: var(--alert); }
.jeizy-notify-empty{ font-size: 12px; color: var(--text-faint); padding: 8px 2px; }
/* ── Selector + switch de alias automático (topbar), atajo del mismo estado que
Configuración › CVU (cvuActivoId/cvuAutoOn) ── */
.topbar-alias{
display: flex; align-items: center; gap: 8px;
padding: 5px 10px 5px 6px;
border-radius: 99px;
background: var(--surface-3);
border: 1px solid var(--line-strong);
}
.topbar-cvu-select{
max-width: 150px;
font-size: 12.5px;
padding: 3px 6px;
border-radius: 99px;
border: 1px solid var(--line-strong);
background: var(--surface-2, var(--surface-3));
color: var(--text);
}
@media (max-width: 720px){
.topbar-cvu-select{ max-width: 100px; }
}
/* ── Switch (toggle) reutilizable ── */
.ez-switch-row{
display: flex; align-items: center; gap: 12px;
cursor: pointer; font-size: 13.5px; color: var(--text);
}
.ez-switch-row input{ position: absolute; opacity: 0; width: 0; height: 0; }
.ez-switch{
flex: none;
width: 44px; height: 26px;
border-radius: 99px;
background: var(--surface-3);
border: 1px solid var(--line-strong);
position: relative;
transition: background .16s, border-color .16s;
}
.ez-switch::after{
content: "";
position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--text-dim);
transition: transform .16s, background .16s;
}
.ez-switch-row input:checked + .ez-switch{
background: var(--teal-soft);
border-color: var(--teal);
}
.ez-switch-row input:checked + .ez-switch::after{
transform: translateX(18px);
background: var(--teal-bright);
}
.ez-switch-row input:focus-visible + .ez-switch{ box-shadow: 0 0 0 3px var(--teal-soft); }
.empty-list{ padding: 10px 2px 18px; font-size: 12.5px; }
/* ── Canales ── */
.channel-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 12px;
}
.channel-card{
display: flex; flex-direction: column; gap: 10px;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--field-bg-soft);
}
.channel-card-top{ display: flex; align-items: center; gap: 10px; }
.channel-icon{
display: grid; place-items: center;
width: 36px; height: 36px; flex: none;
border-radius: 10px;
font-size: 17px;
background: var(--surface-2);
}
.channel-name{ font-size: 13px; font-weight: 700; }
.channel-type{ font-size: 11px; color: var(--text-faint); text-transform: capitalize; }
.channel-card.is-connected .channel-icon{ background: var(--teal-soft); }
.channel-status{
align-self: flex-start;
padding: 3px 9px;
border-radius: 99px;
font-size: 10.5px; font-weight: 700;
}
.channel-status.on{ background: rgba(47,212,196,.14); color: var(--teal-bright); }
.channel-status.off{ background: rgba(255,255,255,.06); color: var(--text-faint); }
.channel-status.warn{ background: rgba(245,196,0,.14); color: #f5c400; }
/* ── Stickers (Configuración › Stickers) ──
No tenían NINGUNA regla propia -- .stk-grid/.stk-cell/.stk-del quedaban con el
comportamiento por defecto del navegador (figure/img sin tamaño ni grid), y una imagen
sin achicar (los "fijos" del sistema pueden pesar más que los subidos, que sí se
comprimen a 240px) desbordaba el ancho del panel en un celular real -- eso empujaba
TODO el layout de Configuración de costado (incluida la fila de pestañas), dando la
sensación de "cajas que se pisan" y "no puedo volver a otra sección" (las pestañas
quedaban corridas fuera de la parte visible en vez de rotas). */
.stk-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 10px;
margin-top: 16px;
}
.stk-cell{
position: relative;
margin: 0;
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--field-bg-soft);
min-width: 0;
}
.stk-cell img{ width: 100%; height: 76px; object-fit: contain; display: block; }
.stk-cell figcaption{ font-size: 10px; color: var(--text-faint); }
.stk-del{
position: absolute; top: 4px; right: 4px;
width: 20px; height: 20px; border-radius: 50%; padding: 0;
border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-dim);
display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer;
}
.stk-del:hover{ background: var(--alert); color: #fff; border-color: var(--alert); }
.stk-head-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 880px){
.stk-grid{ grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.stk-cell img{ height: 60px; }
}
.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; }
.cvu-badge-warn{ color: #ffb020; background: rgba(255,176,32,.14); border-color: #ffb020; }
/* ── 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); }
/* ── Configuración › Base de datos ── */
.db-controls{
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
margin-bottom: 8px;
}
.db-controls .field{ margin-bottom: 0; }
.db-field-target select{ min-width: 170px; }
.db-field-table select{ min-width: 220px; }
.db-table-wrap{
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--r-sm);
margin-top: 10px;
}
.db-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.db-table thead th{
position: sticky; top: 0;
background: var(--surface-2);
color: var(--text-dim);
text-align: left; font-weight: 600;
padding: 9px 12px;
border-bottom: 1px solid var(--line-strong);
}
.db-table tbody td{
padding: 8px 12px;
border-bottom: 1px solid var(--line);
max-width: 320px; overflow: hidden; text-overflow: ellipsis;
}
.db-table tbody tr:hover td{ background: var(--hover-tint-2, rgba(255,255,255,.03)); }
.db-null{ color: var(--text-dim); font-style: italic; }
.db-row-actions{ white-space: nowrap; text-align: right; }
.db-row-actions .btn{ padding: 4px 9px; margin-left: 4px; }
.db-pager{
display: flex; align-items: center; justify-content: center; gap: 14px;
margin-top: 12px;
}
.db-form{ max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.db-null-toggle{
display: flex; align-items: center; gap: 6px;
margin-top: 4px; font-size: 11.5px; color: var(--text-dim);
}
.db-null-toggle input{ width: auto; }
/* 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); }
/* ── Búsqueda de palabras dentro de los mensajes (ver runMsgSearch en app.js) ── */
.thread-msgsearch-cta, .msgsearch-more{
list-style: none; padding: 12px; margin: 4px 0 6px; border-radius: var(--r-sm);
background: var(--field-bg-soft); color: var(--text); font-size: 13px; font-weight: 600;
cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msgsearch-more{ text-align: center; color: var(--text-dim); font-size: 12.5px; }
.thread-msgsearch-cta:hover, .msgsearch-more:hover{ background: var(--hover-tint); }
.msgsearch-sec{ color: var(--text-faint); font-weight: 500; }
.msgsearch-bar{
list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.msgsearch-title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgsearch-close{
flex: none; min-width: 32px; min-height: 32px; border: 0; border-radius: 50%;
background: var(--field-bg-soft); color: var(--text-dim); cursor: pointer; font-size: 14px;
}
.msgsearch-close:hover{ background: var(--hover-tint); color: var(--text); }
.msgsearch-note{ padding: 16px; white-space: normal; }
.thread-msgres .thread-preview mark{ background: rgba(255, 213, 79, .55); color: var(--text); font-weight: 700; border-radius: 3px; padding: 0 1px; }
.thread-msgres.is-active .thread-preview mark{ color: #1b1b1b; }
.msgres-count{
flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
background: var(--field-bg-soft); color: var(--text-dim); font-size: 11px; font-weight: 700;
}
@keyframes msgFound{ 0%{ background: rgba(255, 213, 79, .40); } 100%{ background: transparent; } }
.msg.msg-found{ animation: msgFound 2s ease-out; }
/* ── Cargar fichas leyendo el comprobante (2026-09-23) ── */
/* El botón va AL LADO de la imagen (ver .att-media-row), no abajo -- pedido explícito
("el boton de cargar es horrible, no lo pongas abajo, ponelo a la derecha"). Usa las
clases reales .btn/.btn-primary (mismo look que el resto de la app) -- acá solo se
ajusta tamaño/alineación para que entre bien al lado de una imagen angosta. */
.att-media-row{ display: flex; flex-direction: row; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.monto-lector{ display:flex; align-items:center; }
.monto-lector-btn{ padding: 8px 14px; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.monto-lector-btn:disabled{ opacity:.6; cursor:default; }
.monto-lector-error{ font-size:11.5px; color:#e05252; max-width: 160px; }
/* Modal de Cargar fichas más grande y pegado a la derecha cuando se abre desde un
comprobante (openMoverFichasModal con rightDocked=true) -- se ve junto a la foto en
vez de tapar el centro de la pantalla. #modalOverlay/#modalBox son compartidos por
TODOS los modales; closeModal() saca estas clases siempre al cerrar. */
.modal-overlay.is-right{ justify-content: flex-end; padding-right: clamp(16px, 4vw, 56px); }
.modal.is-wide{ max-width: 620px; width: 92vw; }
@media (max-width: 720px){
.modal-overlay.is-right{ justify-content: center; padding-right: 0; }
.modal.is-wide{ max-width: 460px; width: 94vw; }
}
/* Bono % (Pozo Inteligente) aplicado automático en Cargar fichas (2026-09-23) */
.mov-preview.is-bono{ color: var(--amber); font-weight: 600; }
.mov-warn.is-bono{ background: rgba(245,179,66,.12); border: 1px solid rgba(245,179,66,.4); color: var(--amber); margin: 10px 0 0; }
#movDoneConfirm.is-ok{ color: var(--teal-bright); font-weight: 600; }
/* Picker de bonos % pendientes -- uno o varios por jugador, seleccionable/deseleccionable
(tocar el ya elegido lo saca), pedido explícito 2026-09-23. */
.mov-bonos{ margin: 0 0 4px; }
.mov-bonos-opts{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mov-bono-btn{ padding: 7px 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mov-bono-btn.is-active{
background: linear-gradient(135deg, var(--amber), #E0952E);
color: #2A1B04; border-color: transparent;
}
/* Caja grande de "TOTAL A CARGAR" (2026-09-23, pedido explícito -- el importe tipeado es la
base, no el total, y antes lo único que mostraba el cálculo con bono era el botón y una
línea de texto chica, fácil de pasar por alto trabajando rápido con varios comprobantes al
mismo tiempo). Ámbar mientras hay un bono aplicado, neutro si se destildó. */
.mov-total-box{
display: flex; flex-direction: column; align-items: center; gap: 2px;
margin: 10px 0; padding: 12px; border-radius: var(--r-md);
background: linear-gradient(135deg, rgba(245,179,66,.16), rgba(245,179,66,.06));
border: 1px solid rgba(245,179,66,.35);
}
.mov-total-box.is-off{ background: var(--surface-2); border-color: var(--line); }
.mov-total-label{ font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-dim); }
.mov-total-value{ font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--amber); }
.mov-total-box.is-off .mov-total-value{ color: var(--text); }
.mov-total-detail{ font-size: 11.5px; color: var(--text-dim); }
/* Historial de bonos % en la ficha del jugador -- pendientes, aplicados, vencidos,
cancelados. Rediseñado 2026-09-23 (pedido explícito: "ponelo mas grande, pone box, hay
muchas info suelta"): antes vivía suelto y colapsado por default -- ahora es una tarjeta
propia, siempre abierta, mismo lenguaje visual que #platformsSection. */
.bonos-historial{
margin: 14px 14px 0; padding: 12px 12px 6px;
border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--surface-2);
}
.bonos-historial-toggle{
display: flex; align-items: center; gap: 6px; width: 100%;
padding: 0 0 10px; border: 0; background: none; cursor: default;
font-size: 13px; font-weight: 700; color: var(--text);
}
.bonos-historial-toggle .chev{ display: none; } /* ya no colapsa -- sin flechita */
.bonos-historial-list{ display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.bonos-historial-row{
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 12px; border-radius: var(--r-sm);
background: var(--surface-1); border: 1px solid var(--line);
font-size: 12.5px;
}
.bh-pct{ font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.bh-fecha{ color: var(--text-faint); }
.bh-estado{ margin-left: auto; font-weight: 700; white-space: nowrap; font-size: 12px; }
.bh-estado.is-pendiente{ color: var(--amber); }
.bh-estado.is-aplicado{ color: var(--teal-bright); }
.bh-estado.is-vencido{ color: var(--text-faint); }
.bh-estado.is-cancelado{ color: var(--alert); }
.bh-monto{ width: 100%; font-size: 11.5px; }
/* Plantillas con imagen (2026-09-25): campo de imagen en el modal de plantilla */
.canned-image-field{ margin: -6px 0 14px; display: flex; align-items: center; gap: 10px; }
.canned-image-preview{ width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.canned-image-pick{ cursor: pointer; }
/* Teléfono del contacto / "Sin teléfono" (2026-10-06) */
#convCode.sin-tel{ color:#e04b4b; font-weight:700; cursor:pointer; }
.thread-sintel{ margin-left:4px; font-size:12px; }
.tel-contacto{ margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.tel-contacto .jstat-value.sin-tel{ color:#e04b4b; }
.tel-contacto-btns, .tel-contacto-edit{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.tel-contacto-edit input{ flex:1 1 100%; min-width:0; }
/* ══════════════════════════════════════════
PERFIL v2 (2026-10-06) -- rediseño del panel que abren los 3 puntitos.
Todo scoped a #profilePanel (nada de esto toca modales ni otras vistas) y al final del
archivo a propósito, para ganar sin !important. Se MANTIENEN las cajas de Datos del
jugador / Plataformas (pedido explícito 2026-09-23); lo que cambia es la jerarquía:
avatar compacto, secciones al mismo ancho con separador fino, sin cajas dentro de cajas,
botones planos (sin brillo) y iconos dibujados en vez de emojis.
══════════════════════════════════════════ */
#profilePanel{ scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
#profilePanel::-webkit-scrollbar{ width: 8px; }
#profilePanel::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
#profilePanel ::selection{ background: var(--teal-soft); }
#profilePanel button:focus-visible,
#profilePanel input:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }
/* cabecera: avatar compacto -- ahorra ~50px de scroll en cada chat */
#profilePanel .profile-card{ padding: 4px 16px 16px; }
#profilePanel .profile-avatar{ width: 64px; height: 64px; padding: 2px; }
#profilePanel .profile-avatar img{ border-width: 2px; }
#profilePanel .profile-card h3{ margin: 10px 0 2px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
/* secciones: mismo ancho, separador fino arriba (antes se sumaba 14+14 de padding por estar anidadas) */
#profilePanel .profile-section{ padding: 14px 14px 16px; border-top: 1px solid var(--line); }
#profilePanel #jugadorSection > .profile-section:not(#platformsSection){
padding: 16px 0 0; margin-top: 16px;
}
#profilePanel .section-head{ justify-content: flex-start; align-items: center; margin-bottom: 10px; padding: 0; }
#profilePanel .section-head h4{ display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: .01em; }
#profilePanel .conv-danger .section-head h4{ color: var(--alert); }
.sh-ico{ width: 15px; height: 15px; flex: none; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#profilePanel .conv-danger .sh-ico{ stroke: var(--alert); }
#profilePanel #jugadorEmpty{ padding: 4px 0 !important; font-size: 12px; }
/* Teléfono del contacto: una fila + acciones chicas, no dos botones-píldora enormes */
#profilePanel .tel-contacto{ margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
#profilePanel .tel-contacto .jstat{ padding: 2px 0 8px; border-bottom: 0; }
#profilePanel .tel-contacto .jstat-value{ font-size: 13px; }
#profilePanel .tel-contacto-btns .btn{ padding: 5px 11px; font-size: 11.5px; border-radius: 8px; }
#profilePanel .tel-contacto-edit input{ padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field-bg); color: var(--text); font: inherit; font-size: 13px; }
#profilePanel .tel-contacto-edit input:focus{ outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
/* Datos del jugador: la caja se queda, las filas se aprietan */
#profilePanel .jugador-stats{ margin: 0; padding: 2px 12px; }
#profilePanel .jstat{ padding: 8px 0; font-size: 12.5px; }
#profilePanel .jstat-big{ padding: 10px 10px; margin: 4px -4px; }
/* Plataformas: una sola caja, sin tarjetas adentro; ya no queda más angosta que las demás */
#profilePanel #platformsSection{ margin: 14px 0 0; padding: 12px; border-top: 1px solid var(--line); }
#profilePanel .platform-checklist{ margin: 0 0 10px; padding: 0; }
#profilePanel .platform-item{ padding: 2px 0; border: 0; background: transparent; }
#profilePanel .vincular-usuario{ padding: 0 0 8px; }
/* CARGA / DESCARGA lado a lado, planos */
#profilePanel .action-btns{ flex-direction: row; gap: 8px; padding: 0; margin-top: 12px; }
#profilePanel .action-btn{ flex: 1; padding: 11px 8px; font-size: 12.5px; box-shadow: none; filter: none; }
#profilePanel .action-btn:hover:not(:disabled){ filter: brightness(1.08); }
#profilePanel .action-carga{ background: var(--teal); color: #04262A; }
#profilePanel .action-descarga{ background: #C6333A; color: #fff; }
/* botones del panel: planos, tamaño de herramienta (antes: gradiente + halo, 48px de alto) */
#profilePanel .btn{ border-radius: var(--r-sm); }
#profilePanel .btn-primary{ background: var(--teal); box-shadow: none; padding: 10px 14px; font-size: 13px; justify-content: center; }
#profilePanel .btn-primary:hover{ background: var(--teal-bright); filter: none; }
#profilePanel .btn-primary:disabled{ opacity: .5; cursor: not-allowed; }
#profilePanel .btn-danger{ background: transparent; color: var(--alert); border: 1px solid rgba(255,92,107,.5); box-shadow: none; }
#profilePanel .btn-danger:hover{ background: rgba(255,92,107,.1); filter: none; }
/* campos y stepper */
#profilePanel .field{ margin-bottom: 10px; }
#profilePanel .field input[type="text"],
#profilePanel .field input[type="number"]{ padding: 9px 11px; }
#profilePanel .field input:focus,
#profilePanel .qty-stepper:focus-within{ border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
#profilePanel .qty-stepper input[type="number"]{ padding: 8px 4px; }
/* zona peligrosa: fuera del flujo normal, sin fondo alarmante */
#profilePanel .conv-danger{ margin: 8px 14px 16px; padding: 12px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); }
.bonos-historial-toggle{ display: flex; align-items: center; gap: 7px; }
/* Historial de bonos: misma caja y mismo ancho que Plataformas (antes llevaba 14px de margen extra) */
#profilePanel .bonos-historial{ margin: 14px 0 0; padding: 12px 12px 6px; }
#profilePanel .bonos-historial-toggle{ font-size: 12.5px; }
/* Perfil: secciones plegables -- flecha a la derecha del título, rota al plegar */
#profilePanel .section-head,
#profilePanel .bonos-historial-toggle{ cursor: pointer; user-select: none; -webkit-user-select: none; border-radius: 6px; }
#profilePanel .section-head::after,
#profilePanel .bonos-historial-toggle::after{
content: ''; flex: none; width: 14px; height: 14px; margin-left: auto;
background: var(--text-faint);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .22s cubic-bezier(.22, 1, .36, 1), background-color .15s;
}
#profilePanel .section-head:hover::after,
#profilePanel .bonos-historial-toggle:hover::after{ background: var(--text); }
#profilePanel [data-colapsada="1"] > .section-head::after,
#profilePanel [data-colapsada="1"] > .bonos-historial-toggle::after{ transform: rotate(-90deg); }
#profilePanel .section-head:focus-visible,
#profilePanel .bonos-historial-toggle:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
#profilePanel .section-head::after,
#profilePanel .bonos-historial-toggle::after{ transition: none; }
}
/* contenido plegado: todo menos la cabecera. "Datos del jugador" solo oculta su caja (contiene a las demás secciones). */
#profilePanel .profile-section[data-colapsada="1"]:not(#jugadorSection) > :not(.section-head){ display: none; }
#profilePanel #jugadorSection[data-colapsada="1"] > #jugadorStats,
#profilePanel #jugadorSection[data-colapsada="1"] > #jugadorEmpty{ display: none; }
#profilePanel .bonos-historial[data-colapsada="1"] > :not(.bonos-historial-toggle){ display: none; }
#profilePanel .bonos-historial[data-colapsada="1"] .bonos-historial-toggle{ padding-bottom: 6px; }
/* plegada: la cabecera no deja margen inferior (si no, las cajas quedan más altas que su contenido) */
#profilePanel [data-colapsada="1"] > .section-head{ margin-bottom: 0; }
/* Datos del jugador plegado: se oculta TODO (también el bloque de teléfono). Si falta el número queda
solo un iconito de alerta en el título, sin botón. */
#profilePanel #jugadorSection[data-colapsada="1"] > #telContactoRow{ display: none; }
#profilePanel .sh-warn{ display: none; flex: none; align-items: center; color: var(--alert); }
#profilePanel .sh-warn svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#profilePanel #jugadorSection[data-colapsada="1"] .sh-warn:not([hidden]){ display: inline-flex; }
#profilePanel .sh-warn{ margin-left: 7px; }
/* Código de amigo: botones de confirmación en fila */
#profilePanel .amigo-confirm{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#profilePanel .amigo-confirm .btn{ flex: 1 1 auto; justify-content: center; padding: 8px 12px; font-size: 12.5px; }
/* ── Columnas redimensionables (bandeja | chat | perfil) ── */
.workspace{ position: relative; }
.col-resizer{
display: none; position: absolute; top: 0; bottom: 20px; width: 14px; z-index: 5;
cursor: col-resize; touch-action: none;
}
.col-resizer::after{
content: ""; position: absolute; left: 6px; top: 50%; width: 2px; height: 44px; margin-top: -22px;
border-radius: 2px; background: var(--line); opacity: 0; transition: opacity .15s, background .15s;
}
.col-resizer:hover::after, .col-resizer.is-dragging::after{ opacity: 1; background: var(--teal-bright, #2dd4bf); }
body.col-resizing{ cursor: col-resize; user-select: none; }
@media (max-width: 900px){ .col-resizer{ display: none !important; } }
/* ── Sidebar plegable ── */
.app{ transition: grid-template-columns .2s ease; }
.side-toggle{
align-self: flex-end; width: 28px; height: 28px; margin: -6px 2px 8px 0; padding: 0;
display: grid; place-items: center; cursor: pointer;
background: transparent; color: var(--text-dim); border: 1px solid var(--line); border-radius: 8px;
transition: color .16s, border-color .16s, background .16s;
}
.side-toggle:hover{ color: var(--text); border-color: var(--text-dim); }
.side-toggle svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
@media (min-width: 881px){
.app.sidebar-collapsed{ grid-template-columns: 64px 1fr; }
.app.sidebar-collapsed .brand-name,
.app.sidebar-collapsed .nav-item span,
.app.sidebar-collapsed .theme-switch,
.app.sidebar-collapsed .theme-code{ display: none; }
.app.sidebar-collapsed .sidebar{ padding: 16px 8px; }
.app.sidebar-collapsed .nav-item{ justify-content: center; padding: 10px 4px; }
.app.sidebar-collapsed .brand{ padding: 2px 4px 14px; justify-content: center; }
.app.sidebar-collapsed .brand-mark{ width: 34px; height: 34px; border-radius: 12.5px 12.5px 12.5px 1.5px; }
.app.sidebar-collapsed .side-toggle{ align-self: center; margin: 0 0 8px; }
.app.sidebar-collapsed .side-toggle svg{ transform: rotate(180deg); }
}
@media (max-width: 880px){ .side-toggle{ display: none; } }
@media (prefers-reduced-motion: reduce){ .app, .side-toggle svg{ transition: none; } }
/* Promos del jugador (2026-10-14) */
.promos-count{ margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--teal); color: #04262A; font-size: 11px; font-weight: 700; }
.promos-count:empty{ display: none; }
.promos-list{ margin: 0; padding: 0 2px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.promo-item{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field-bg-soft); }
.promo-item.is-done{ opacity: .6; }
.promo-main{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.promo-label{ font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-meta{ font-size: 11px; color: var(--text-dim); }
.promo-meta.is-urgent{ color: #e0a030; font-weight: 600; }
.promo-state{ flex: none; font-size: 11px; font-weight: 700; color: var(--text-faint); }
.promos-more{ margin: 8px 2px 0; padding: 0; border: 0; background: none; color: var(--text-dim); font-size: 11.5px; text-decoration: underline; cursor: pointer; }
.promos-empty{ margin: 0; padding: 0 2px; font-size: 12px; color: var(--text-dim); }
/* Pestañas del panel de perfil (2026-10-14) */
.ptabs{ position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; padding: 8px 12px; background: var(--surface-1); border-bottom: 1px solid var(--line); }
.ptab{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ptab:hover{ background: var(--field-bg-soft); }
.ptab.is-active{ background: var(--teal); color: #04262A; }
.ptab-count{ min-width: 16px; padding: 0 5px; border-radius: 99px; background: #e0a030; color: #1b1300; font-size: 10.5px; line-height: 16px; text-align: center; }
.ptab-count:empty{ display: none; }
/* (2026-10-15) regla de pestañas del perfil desactivada: ahora el perfil es una sola columna, ver bloque "SIMPLIFICAR" al final. Para volver a las pestañas: restaurar esta regla y borrar "#profilePanel #ptabs{display:none}". */
/* ══════════════════════════════════════════
AIRE Y CALMA (2026-10-14, pedido de Nacho/Gonza: "todo muy apretado", "menos agresividad y fatiga visual")
Solo CSS, todo en este bloque: para volver atrás basta con borrarlo. Espacios más generosos, paneles
"flotando" con sombra suave, y colores menos brillantes. Los tokens van en :root: solo pisan el tema
oscuro por defecto (los demás temas, [data-theme=...], tienen más especificidad y conservan los suyos).
══════════════════════════════════════════ */
:root{
--text: #E8EEE5; /* antes #F2F7EF: menos brillo sobre fondo oscuro */
--name-strong: #F3F7F1; /* antes #ffffff puro */
--teal: #3BC67E; /* antes #34D17C: acento un poco menos saturado */
--teal-bright: #69DDA2; /* antes #5CF0A0 */
--shadow-panel: 0 22px 44px -26px rgba(0,0,0,.6);
}
/* Barras de scroll finas y discretas (la nativa gruesa y clara cansa en un panel que se mira todo el día) */
.thread-list, .messages, .panel, #profilePanel{ scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
/* Botones y selección: sin brillo de neón */
.btn-primary{ box-shadow: 0 6px 16px -12px var(--teal); filter: saturate(.9); }
.btn-primary:hover{ filter: saturate(.9) brightness(1.05); }
.thread.is-active{ box-shadow: 0 8px 20px -16px var(--teal); }
.thread.is-unread:hover{ filter: none; }
.thread.is-unread .thread-name{ font-weight: 700; }
.thread.is-unread .thread-preview{ font-weight: 600; }
.bubble{ font-size: 13.5px; }
/* Más aire, solo en escritorio: en pantallas chicas el espacio vale oro y ya está ajustado aparte */
@media (min-width: 881px){
.app{ height: calc(100vh - 32px); margin: 16px auto; box-shadow: 0 30px 70px -34px rgba(0,0,0,.7); }
.workspace{ gap: 20px; padding: 0 26px 26px; }
.panel-head{ padding: 18px 20px; }
.thread-list{ padding: 0 14px 16px; }
.thread{ padding: 14px; margin-bottom: 8px; }
.thread-bottom{ margin-top: 8px; }
.messages{ padding: 26px 26px; gap: 20px; }
.msg{ max-width: 68%; }
.composer{ margin: 14px 22px 20px; padding: 9px 10px; }
}
/* Los 3 paneles como tarjetas redondeadas (el perfil solo cuando es columna; en <=1180px es un cajón) */
@media (min-width: 881px){
.workspace > .panel.inbox, .workspace > .panel.conversation{ border-radius: 20px; }
.workspace > .panel.inbox .panel-head, .workspace > .panel.conversation .panel-head{ border-radius: 20px 20px 0 0; }
}
@media (min-width: 1181px){
.workspace > .panel.profile{ border-radius: 20px; }
.workspace > .panel.profile .panel-head{ border-radius: 20px 20px 0 0; }
}
/* Panel de perfil: secciones y pestañas con más respiro */
#profilePanel .profile-section{ padding: 18px 18px 20px; }
#profilePanel .profile-card{ padding: 6px 20px 20px; }
.ptabs{ padding: 10px 16px; gap: 6px; }
.promos-list, .acciones-list{ gap: 8px; }
.promo-item, .accion-item{ padding: 11px 14px; }
.chip{ padding: 7px 15px; }
/* (ajuste) tarjeta activa menos chillona + perfil un poco más ancho en pantallas grandes */
.thread.is-active{ background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 48%, var(--surface-inbox)), color-mix(in srgb, var(--teal-deep) 85%, var(--surface-inbox))); }
@media (min-width: 1181px){ :root{ --profile-w: 304px; } }
/* ═══ 2026-10-15 SIMPLIFICAR (inspirado en el CRM de Picantes) ═══
Solo muestra menos cosas a la vez; no se borró ninguna función. Para volver atrás: borrar este bloque, devolver la regla de pestañas
del perfil y restaurar index.html / app.js desde el backup *.bak-simplificar-*. */
/* 1) Barra del mensaje (lógica WhatsApp): solo ＋ y el mensaje; el botón enviar aparece cuando hay algo para enviar */
.composer-more-wrap{ position: relative; flex: none; }
.composer-more{ bottom: calc(100% + 12px); left: 0; }
.composer-more .cm-row[disabled]{ opacity: .5; }
.composer-more-wrap .emoji-picker{ bottom: calc(100% + 12px); left: 0; }
#composerMoreBtn[aria-expanded="true"]{ background: var(--teal-soft); color: var(--teal-bright); }
.composer:has(textarea:placeholder-shown) .send{ display: none; }
.pending-img-preview:not([hidden]) + .composer .send{ display: grid; }
/* Menú de filas con texto (＋ del mensaje y ⋮ del chat) */
.cm-menu{
position: absolute; z-index: 40; display: flex; flex-direction: column; min-width: 224px; padding: 6px;
background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: 14px;
box-shadow: 0 14px 34px rgba(0,0,0,.4);
}
.cm-menu[hidden]{ display: none; }
.cm-row{
display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
border: 0; border-radius: 10px; background: none; color: var(--text);
font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; white-space: nowrap;
}
.cm-row:hover{ background: var(--surface-2); }
.cm-row:disabled{ opacity: .5; cursor: not-allowed; }
.cm-ico{ flex: none; width: 22px; text-align: center; font-size: 16px; line-height: 1; }
/* Cabecera del chat: nombre tocable + botones con texto (Resolver / Info) */
.conv-who{ display: flex; align-items: center; gap: 11px; min-width: 0; cursor: pointer; border-radius: 10px; }
.conv-who:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }
.conv-head #toggleProfile{ margin-left: 8px; flex: none; white-space: nowrap; padding: 7px 12px; font-size: 12px; }
/* Perfil: acciones rápidas arriba (Carga / Descarga / Sorteo), como Llamar / Video / Buscar en "Info del contacto" */
.profile-quick{ display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.profile-quick .pq-money[hidden]{ display: none; }
.profile-quick .action-btns{ flex-direction: row; padding: 0; gap: 8px; }
.profile-quick .action-btns .action-btn{ flex: 1; }
.profile-quick .pq-sorteo{ background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); box-shadow: none; }
/* 2) Bandeja: el cajero (no admin) no ve "Sin teléfono"; "Actualizar" solo se queda en celular (donde la bandeja se cuelga) */
html.is-agent #chipSinTel{ display: none; }
@media (min-width: 881px){ html.is-agent #inboxRefreshBtn{ display: none; } }
/* 4) Configuración: menú lateral agrupado en escritorio; el cajero solo ve lo suyo */
.config-tabs-group{ display: none; }
html.is-agent .cfg-admin{ display: none !important; }
@media (min-width: 881px){
.config-view{ flex-direction: row; align-items: flex-start; gap: 22px; }
.config-view > .config-panel{ flex: 1; min-width: 0; }
.config-tabs{ flex: none; width: 214px; flex-direction: column; gap: 2px; margin-bottom: 0; padding: 0 4px 12px 0;
align-self: flex-start; max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
.config-tabs-group{ display: block; padding: 14px 12px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--text-faint); }
.config-tabs-group:first-child{ padding-top: 2px; }
.config-tab{ width: 100%; text-align: left; border-radius: var(--r-sm); border-color: transparent; background: transparent; padding: 9px 12px; }
.config-tab:hover{ background: var(--hover-tint); border-color: transparent; }
.config-tab.is-active{ border-color: transparent; box-shadow: inset 3px 0 0 var(--teal-bright); }
}
/* 5) Perfil del jugador: una sola columna, lo de uso diario arriba y lo demás plegado (sin pestañas) */
#profilePanel #ptabs{ display: none; }
#profilePanel #jugadorSection{ display: flex; flex-direction: column; }
#profilePanel #jugadorSection > #platformsSection{ order: 1; }
#profilePanel #jugadorSection > #promosSection{ order: 2; }
#profilePanel #jugadorSection > #sorteoActionSection{ order: 3; }
#profilePanel #jugadorSection > #bonosHistorialSection{ order: 4; }
#profilePanel #jugadorSection > #canjeSection{ order: 5; }
#profilePanel #jugadorSection > #amigoSection{ order: 6; }
#profilePanel #jugadorSection > #accionesSection{ order: 7; }
#profilePanel #jugadorSection > #amigosResumenSection{ order: 8; }
#profilePanel #jugadorSection > .section-head,
#profilePanel #jugadorSection > #telContactoRow,
#profilePanel #jugadorSection > #jugadorEmpty,
#profilePanel #jugadorSection > #jugadorStats{ order: 9; }
#profilePanel #jugadorSection > .section-head{ margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }