/* ============================================================
   COPIER CLOUD v9 — sistema «liquid glass», versión ligera
   Vidrio real SOLO donde flota algo (barra, dock, velo, menús,
   avisos). v8 aplicaba backdrop-filter a cada tarjeta, azulejo,
   botón e input, y una animación infinita a cada punto «en
   línea»: la GPU recomponía la pantalla sin parar aunque nada
   cambiara. Las superficies ahora son translúcidas SIN desenfoque.
   Sin estilos en línea: la CSP es completamente estricta.
   ============================================================ */

/* —— Fuente Archivo variable (offline, ejes weight+width) —— */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; src:url(archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; src:url(archivo-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px; --sp-8:32px;
  /* capas fijas: lo que esquiva el dock (relleno de main, scroll-padding, toast,
     panel de mensajes) sale de ESTOS tokens; y el relleno de los diálogos. */
  --dock-h:74px; --dock-gap:12px; --modal-pad:20px;

  --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-pill:999px;

  --ff:'Archivo','Segoe UI',system-ui,Roboto,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace;
  --wd-cond:70%; --wd-semi:84%; --wd-norm:100%; --wd-exp:121%;
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:16px;
  --fs-lg:17.5px; --fs-xl:20px; --fs-2xl:25px; --fs-3xl:31px; --fs-4xl:40px;
  --lh-tight:1.06; --lh:1.4; --lh-loose:1.5;

  --dur-1:.12s; --dur-2:.22s; --dur-3:.34s; --dur-4:.6s;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.45,.56,1);

  /* —— CLARO: hormigón cálido —— */
  --bg:#E8E6E2; --bg-2:#DFDDD8;
  --ink:#16171B; --ink-2:#3B3D44; --muted:#5A5D65; --on-ink:#F5F4F1;
  --line:#CFCDC8; --hairline:rgba(20,21,26,.10);

  --accent:#1CA08F;            /* teal nube */
  --accent-2:#3FBCAC;
  --accent-deep:#0E7264;
  --accent-ink:#062019;
  --accent-tint:rgba(28,160,143,.14);
  --accent-line:rgba(14,114,100,.42);
  --accent-text:#0B6B5E;
  --ring:rgba(28,160,143,.55);
  /* anillo de foco: --accent-text ya da ≥ 4,6:1 sobre el fondo en cada tema
     (también con la marca del operador) */
  --focus:var(--accent-text);

  --ok:#1E8E4E; --ok-tint:rgba(30,142,78,.13); --ok-line:rgba(30,142,78,.38); --ok-text:#136B39;
  --bad:#D62A2A; --bad-tint:rgba(214,42,42,.11); --bad-line:rgba(214,42,42,.36); --bad-text:#A81F1F;
  /* v9: v8 usaba var(--amber) sin definirlo: el aviso «por qué no copia» salía sin color */
  --warn:#9A5B00; --warn-tint:rgba(214,138,0,.13); --warn-line:rgba(180,112,0,.40);
  /* v10: texto ámbar sobre su tinte encima del FONDO de la página (la franja
     «Falta MetaTrader 5»): --warn se quedaba en 3,9:1 (WCAG 1.4.3) */
  --warn-text:#7A4700;

  /* —— superficies (sin desenfoque) y vidrio (solo capas flotantes) —— */
  --surface:rgba(255,255,255,.74);
  --surface-2:rgba(255,255,255,.56);
  --surface-solid:rgba(246,245,242,.97);
  --nav-bg:rgba(255,255,255,.92);   /* v10: ≥4,5:1 para las etiquetas pase lo que pase debajo */
  --glassline:rgba(255,255,255,.66);
  --spec:rgba(255,255,255,.65);
  --blur:blur(18px) saturate(1.6);
  --e1:0 1px 1px rgba(20,21,26,.04), 0 4px 14px rgba(20,21,26,.07);
  --e2:0 2px 6px rgba(20,21,26,.05), 0 14px 38px rgba(20,21,26,.12);
  --e3:0 26px 64px rgba(20,21,26,.24);

  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  color-scheme:light;
}

:root[data-theme="dark"]{
  /* —— NOCHE: grafito neutro, nunca azul marino —— */
  --bg:#0E0F12; --bg-2:#08090B;
  --ink:#F0EFEB; --ink-2:#C7C8C4; --muted:#9A9DA8; --on-ink:#15161A;
  --line:#2C2F37; --hairline:rgba(255,255,255,.085);

  --accent:#2BC5B4; --accent-2:#5CD9CB; --accent-deep:#0E7264;
  --accent-ink:#062019;
  --accent-tint:rgba(43,197,180,.15);
  --accent-line:rgba(43,197,180,.42);
  --accent-text:#7FE7DA;
  --ring:rgba(43,197,180,.6);

  --ok:#34C172; --ok-tint:rgba(52,193,114,.15); --ok-line:rgba(52,193,114,.4); --ok-text:#6FE0A4;
  --bad:#FF5C5C; --bad-tint:rgba(255,92,92,.13); --bad-line:rgba(255,92,92,.4); --bad-text:#FFA3A3;
  --warn:#F2B64C; --warn-tint:rgba(242,182,76,.13); --warn-line:rgba(242,182,76,.38);
  --warn-text:#F2B64C;

  --surface:rgba(28,31,38,.78);
  --surface-2:rgba(40,44,52,.56);
  --surface-solid:rgba(24,27,33,.97);
  --nav-bg:rgba(20,22,27,.92);
  --glassline:rgba(255,255,255,.12);
  --spec:rgba(255,255,255,.08);
  --e1:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --e2:0 2px 8px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.5);
  --e3:0 28px 70px rgba(0,0,0,.66);
  color-scheme:dark;
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* El fondo va en <html> (el lienzo), no en <body>: así el ambiente de
   body::before sigue visible y cualquier herramienta (lectores, axe en
   WebKit, capturas) resuelve el fondo real en vez de suponer blanco. */
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);
  /* Browser focus scrolling must clear the sticky header and fixed dock,
     including the safe areas of an installed mobile app. */
  scroll-padding-block-start:calc(100px + var(--sat));
  scroll-padding-block-end:calc(var(--dock-h) + var(--dock-gap) + 24px + var(--sab));
}
html.modal-open{overflow:hidden}
/* con barras de desplazamiento clásicas (Windows), abrir un diálogo no mueve la página */
html{scrollbar-gutter:stable}
[hidden]{display:none !important}
input,select,textarea{font-size:max(16px,1em)} /* guarda anti-zoom iOS */
body{
  font-family:var(--ff); font-stretch:var(--wd-norm);
  color:var(--ink);
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Ambiente con color, estático (una sola capa fija, sin animación). */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(56% 40% at 6% -8%, rgba(28,160,143,.16) 0%, transparent 64%),
    radial-gradient(44% 34% at 96% -6%, rgba(94,110,140,.14) 0%, transparent 70%),
    radial-gradient(64% 46% at 50% 114%, rgba(28,160,143,.10) 0%, transparent 72%),
    linear-gradient(var(--bg),var(--bg-2));
}
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(56% 42% at 6% -10%, rgba(43,197,180,.13) 0%, transparent 64%),
    radial-gradient(48% 36% at 98% -8%, rgba(96,124,178,.13) 0%, transparent 70%),
    radial-gradient(66% 48% at 50% 116%, rgba(14,114,100,.10) 0%, transparent 72%),
    linear-gradient(var(--bg),var(--bg-2));
}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;touch-action:manipulation}
a{color:var(--accent-text);text-decoration:none}
svg{display:block}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-stretch:var(--wd-semi)}
.faint{color:var(--muted);font-weight:600}
code,.mono{font-family:var(--mono);font-size:.92em}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:8px 14px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-weight:900}
.skip:focus{left:12px}

:focus{outline:none}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px}
/* PN-R1: en WebKit el foco de un campo de fecha/hora cae en su segmento
   interno y el campo no cumple :focus-visible: sin esto no se veía el anillo */
input:focus-visible,select:focus-visible,textarea:focus-visible,
input[type=date]:focus,input[type=time]:focus,input[type=datetime-local]:focus,input[type=month]:focus,input[type=week]:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--ring)}

::selection{background:var(--accent-tint)}

/* —— utilidades (sustituyen a los style= de v8) —— */
.w100{width:100%}
.block{display:block}
.center{text-align:center}
.ml-auto{margin-left:auto}
.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mb-10{margin-bottom:10px}
.full{flex:1 1 100%}
.row-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row-wrap.g14{gap:14px}
.row-end{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.note{color:var(--muted);font-size:var(--fs-sm);font-weight:600;margin-top:6px;line-height:var(--lh-loose)}
.note.sm{font-size:var(--fs-xs)}
.hint{font-size:var(--fs-xs);color:var(--muted);font-weight:600;line-height:var(--lh-loose)}
/* confirmación neutra (registro recibido, contraseña cambiada); vacía, no ocupa sitio */
.ok-note{color:var(--ok-text);font-weight:700}
.ok-note:empty{display:none}
/* acción secundaria con aspecto de enlace, alcanzable con el teclado */
.linkbtn{display:block;margin-inline:auto;padding:6px 10px;min-height:36px;border-radius:var(--r-xs);
  font-size:var(--fs-sm);font-weight:800;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.modal-p{color:var(--muted);font-weight:600;font-size:14px;line-height:1.55;margin-top:8px}
.muted-strong{font-weight:700;color:var(--muted)}
.small{font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* v10: guía de primeros pasos */
.pasos{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.pasos li{display:flex;gap:12px;align-items:flex-start}
.pasos .num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.pasos li.hecho .num{background:var(--ok-tint);border-color:var(--ok-line);color:var(--ok-text)}
.pasos li.hecho b{color:var(--muted);font-weight:700}
.xsmall{font-size:11.5px}
.brk{overflow-wrap:anywhere}
.upper{text-transform:uppercase}
.rel{position:relative}
.fld-wide{flex:1;min-width:260px}
.offscreen{position:fixed;left:-9999px;top:0;opacity:0}
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}
/* v10: textos según dónde corre (data-entorno lo pone el servidor) */
html[data-entorno="nube"] [data-solo="escritorio"],
html:not([data-entorno="nube"]) [data-solo="nube"],
html:not([data-entorno="mac"]) [data-solo="mac"],
html:not([data-entorno="windows"]) [data-solo="windows"]{display:none !important}

/* ============================================================
   SHELL
   ============================================================ */
.wrap{max-width:1080px;margin:0 auto;padding:0 calc(var(--sar) + var(--sp-5)) 0 calc(var(--sal) + var(--sp-5))}
header.bar{
  position:sticky;top:0;z-index:40;
  padding:calc(var(--sat) + var(--sp-3)) 0 var(--sp-3);
  background:transparent;
}
header.bar .in{
  display:flex;align-items:center;gap:var(--sp-3);min-width:0;
  background:var(--nav-bg);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glassline);border-radius:var(--r-lg);
  box-shadow:var(--e1), inset 0 1px 0 var(--spec);
  padding:10px var(--sp-4);
}
/* La marca NO se recorta: si falta sitio cede el chip del email (que se
   corta con puntos suspensivos SOLO entonces: un tope en píxeles truncaba
   «propietario@copier.lo…» en una ventana de 1700 px con sitio de sobra).
   Sin chip (móvil), la marca se compacta y, en los más estrechos, queda solo
   el logo. Medido en Chrome y WebKit de 320 a 1920 px: sin solapes, sin
   recortes y sin desbordar la página. */
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:0}
.brand .badge{
  width:32px;height:32px;border-radius:9px;flex:none;
  /* v10: el tinte y la nube siguen el color de la marca */
  background:linear-gradient(color-mix(in srgb, var(--accent-deep) 30%, #0B0C0F),
                             color-mix(in srgb, var(--accent-deep) 14%, #08090B));
  display:grid;place-items:center;
  box-shadow:var(--e1), inset 0 1px 0 rgba(255,255,255,.14);
}
.brand .badge svg{width:20px;height:20px}
.brand .badge svg path{fill:var(--accent-2)}
.brand .wm{font-weight:900;font-size:var(--fs-lg);font-stretch:var(--wd-exp);letter-spacing:-.01em;line-height:1;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis} /* red de seguridad: jamás encima de los botones */
@media (max-width:560px){
  .brand{flex-shrink:1}
  .brand .wm .wm-x{display:none}
}
@media (max-width:460px){
  .brand{gap:8px}
  .brand .badge{width:28px;height:28px;border-radius:8px}
  .brand .wm{font-size:14px}
  .bar .who{gap:6px}
}
@media (max-width:400px){ .bar .brand .wm{display:none} }
.brand .wm b{color:var(--accent-text)}
.bar .who{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);min-width:0;flex:1 1 auto}
.who .chip{
  display:flex;align-items:center;gap:7px;min-width:0;flex:0 1 auto;
  background:var(--surface-2);border:1px solid var(--glassline);border-radius:var(--r-pill);
  padding:6px 12px;font-weight:700;font-size:var(--fs-sm);
}
.who .chip .em{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .chip .role{font-size:var(--fs-2xs);font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);white-space:nowrap;flex:none}
@media (max-width:560px){ .who .chip{display:none} }
.iconbtn{
  width:38px;height:38px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--glassline);
  box-shadow:inset 0 1px 0 var(--spec);
  transition:transform var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
.iconbtn svg{width:18px;height:18px}
.iconbtn:active{transform:scale(.92)}
.iconbtn.small{width:36px;height:36px;border-radius:11px}
.iconbtn.small svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
  .iconbtn:hover{color:var(--ink);transform:translateY(-1px)}
}

/* —— indicador de conexión en vivo ——
   Junto a la marca y FUERA del grupo de la derecha: su texto («conectando»,
   «en vivo», «reconectando») cambia de ancho y el chip del email aparece al
   llegar el primer estado; separados, ninguno de los dos mueve al otro (antes
   el punto saltaba 115 px al pintar el email: layout shift). */
.live{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex:none}
.live i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.live.on{color:var(--ok-text)}
.live.on i{background:var(--ok);box-shadow:0 0 0 3px var(--ok-tint)}
.live.off{color:var(--bad-text)}
.live.off i{background:var(--bad)}
/* En móvil queda el punto; el texto se oculta SOLO a la vista: el lector de
   pantalla sigue anunciando «en vivo / reconectando» (display:none lo callaba). */
@media (max-width:460px){
  .live b{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

main{padding:var(--sp-4) 0 calc(var(--dock-h) + var(--dock-gap) + 32px + var(--sab))}

/* ============================================================
   DOCK — barra de navegación flotante (firma liquid glass)
   ============================================================ */
nav.dock{
  position:fixed;left:50%;bottom:calc(var(--dock-gap) + var(--sab));z-index:50;
  transform:translateX(-50%);
  display:flex;gap:4px;
  width:min(660px, calc(100% - 24px - var(--sal) - var(--sar)));
  max-width:calc(100% - 24px - var(--sal) - var(--sar));
  background:var(--nav-bg);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glassline);border-radius:28px;
  box-shadow:var(--e2), inset 0 1px 0 var(--spec);
  padding:7px 8px;
}
.dock .tab{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:74px;min-height:58px;flex:1 0 auto;padding:7px 10px 6px;border-radius:18px;
  font-size:var(--fs-2xs);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted);font-stretch:var(--wd-norm);
  transition:color var(--dur-1) var(--ease-out);
}
.dock .tab .ico{width:23px;height:23px;position:relative;z-index:1;transition:transform var(--dur-2) var(--spring)}
.dock .tab .ico svg{width:23px;height:23px}
.dock .tab .lbl{position:relative;z-index:1;text-align:center;max-width:100%;line-height:1.15;white-space:nowrap;overflow-wrap:normal;word-break:normal}
.dock-label-short{display:none}
.dock .tab .halo{
  position:absolute;inset:3px 6px;border-radius:16px;
  background:var(--accent-tint);border:1px solid var(--accent-line);
  opacity:0;transform:scale(.72);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--spring);
}
.dock .tab.on{color:var(--ink)}
.dock .tab.on .ico{transform:translateY(-1px)}
.dock .tab.on .halo{opacity:1;transform:scale(1)}
.dock .tab:active .ico{transform:scale(.9)}
.dock .tab .badge-n{position:absolute;top:4px;right:14px}
@media (hover:hover) and (pointer:fine){
  .dock .tab:hover{color:var(--ink-2)}
  .dock .tab:not(.on):hover .halo{opacity:.45;transform:scale(1)}
}
@media (max-width:640px){
  nav.dock{left:calc(12px + var(--sal));right:calc(12px + var(--sar));transform:none;width:auto;max-width:none;justify-content:space-around;gap:0;padding:7px 4px}
  .dock .tab{min-width:44px;flex:1 0 auto;padding:7px 2px 6px;min-height:58px;letter-spacing:0}
  /* Give longer labels their natural width; every target remains at least
     44px wide and every visible label stays on a readable single line. */
  .dock .tab .lbl{font-size:10px;letter-spacing:0;max-width:100%;line-height:1.15}
  .dock-label-full{display:none}
  .dock-label-short{display:inline}
}
@media (max-width:360px){
  .dock .tab .lbl{font-size:9px}
}

/* ============================================================
   PANTALLAS
   ============================================================ */
.screen{display:none}
.screen.on{display:block;animation:enter var(--dur-3) var(--ease-out)}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:riseIn .42s var(--ease-out) both;animation-delay:min(calc(var(--i,0)*30ms),340ms)}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.head{margin:var(--sp-4) 0 var(--sp-5)}
.head h1{font-size:var(--fs-3xl);font-weight:900;font-stretch:var(--wd-exp);letter-spacing:-.018em;line-height:var(--lh-tight);margin-top:5px}
.head .rule{height:4px;width:46px;background:var(--accent);border-radius:2px;margin-top:var(--sp-3)}
.head .sub{color:var(--muted);font-size:var(--fs-base);font-weight:600;margin-top:var(--sp-3);line-height:var(--lh);max-width:60ch}

/* ============================================================
   MATERIAL — tarjetas (translúcidas, SIN desenfoque)
   ============================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--glassline);border-radius:var(--r-lg);
  box-shadow:var(--e2), inset 0 1px 0 var(--spec);
  padding:var(--sp-5);
}
.card + .card{margin-top:var(--sp-4)}
.card + .tiles{margin-top:var(--sp-4)}
/* un aviso de error vacío al final de una tarjeta no deja un hueco */
.card > .err:last-child:empty{min-height:0;margin:0}
.card h2{font-size:var(--fs-xl);font-weight:900;font-stretch:var(--wd-exp);letter-spacing:-.01em;margin-bottom:var(--sp-4)}
.card h2 small{display:block;margin-top:3px;font-size:var(--fs-sm);color:var(--muted);font-weight:600;font-stretch:var(--wd-norm);letter-spacing:0}

/* —— Instrumentos: azulejos de métricas —— */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.tile{
  background:var(--surface);
  border:1px solid var(--glassline);border-radius:var(--r-md);
  box-shadow:var(--e1), inset 0 1px 0 var(--spec);
  padding:var(--sp-4);
  display:flex;flex-direction:column;gap:6px;min-height:92px;
  container-type:inline-size;
}
.tile .k{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-stretch:var(--wd-semi)}
/* las cifras no se parten por dentro: el tamaño sigue al del azulejo y cada
   importe va entero (.nw); solo saltan entre importes («·») */
.tile .v{font-size:clamp(17px,15cqi,var(--fs-2xl));font-weight:900;font-variant-numeric:tabular-nums;font-stretch:var(--wd-semi);letter-spacing:-.01em;margin-top:auto;overflow-wrap:normal;min-width:0}
.tile .v small{font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.tile .v small.sub{display:block;margin-top:3px}
.nw{white-space:nowrap}
.tile.hot .v{color:var(--accent-text)}
.tile.bad .v{color:var(--bad-text)}

/* Roles del trader: lecturas independientes, sin sumar divisas entre sí. */
.trader-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.trader-role{min-width:0;background:var(--surface-2);border:1px solid var(--glassline);border-radius:var(--r-md);padding:var(--sp-4);container-type:inline-size}
.trader-role-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2)}
.trader-role-head h3{font-size:var(--fs-lg);font-weight:900;font-stretch:var(--wd-exp)}
.trader-role-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin:var(--sp-3) 0}
.trader-role-stats dt{font-size:var(--fs-2xs);font-weight:800;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.trader-role-stats dd{font-size:var(--fs-md);font-weight:800;font-variant-numeric:tabular-nums;margin-top:4px;overflow-wrap:normal;min-width:0}
/* en una tarjeta estrecha (móvil) las dos lecturas van una debajo de otra: ningún importe se parte */
@container (max-width:280px){ .trader-role-stats{grid-template-columns:minmax(0,1fr)} }
.trader-role-stats dd small{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--muted);margin-top:4px}
@media (max-width:640px){
  .trader-roles{grid-template-columns:minmax(0,1fr)}
}

/* —— Tablas —— */
.tblwrap{overflow-x:auto;margin:0 calc(-1 * var(--sp-5))}
/* región desplazable: se alcanza con el teclado (WCAG 2.1.1) */
.tblwrap:focus-visible{outline:2.5px solid var(--focus);outline-offset:-3px;border-radius:12px}
.tblwrap table{min-width:640px}
table{width:100%;border-collapse:collapse}
th{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-stretch:var(--wd-semi);text-align:left;padding:8px var(--sp-3);border-bottom:1px solid var(--hairline);white-space:nowrap}
td{padding:11px var(--sp-3);border-bottom:1px solid var(--hairline);font-size:var(--fs-sm);font-weight:600;vertical-align:middle;white-space:nowrap}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.wrap{white-space:normal;min-width:180px}
.tblwrap th:first-child,.tblwrap td:first-child{padding-left:var(--sp-5)}
.tblwrap th:last-child,.tblwrap td:last-child{padding-right:var(--sp-5)}
/* «Últimas copias» y «Mapa de copias» en un móvil: cada copia es una ficha
   (máster, símbolo y ESTADO arriba; esclavo, ticket, volumen y hace debajo).
   Con desplazamiento lateral el estado quedaba fuera de la pantalla. Las
   etiquetas generadas no se leen dos veces (texto alternativo vacío). */
@media (max-width:560px){
  .tblwrap.fichas{overflow:visible;margin:0}
  .tblwrap.fichas table,.tblwrap.fichas tbody{display:block;min-width:0}
  .tblwrap.fichas thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .tblwrap.fichas tr{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;padding:12px 0;border-bottom:1px solid var(--hairline)}
  .tblwrap.fichas tr:last-child{border-bottom:0}
  .tblwrap.fichas tr::after{content:"";order:4;flex-basis:100%}
  .tblwrap.fichas td,.tblwrap.fichas td:first-child,.tblwrap.fichas td:last-child{display:block;padding:0;border:0;text-align:start;min-width:0}
  .tblwrap.fichas .c-mp{order:1;font-size:var(--fs-md);font-weight:800}
  .tblwrap.fichas .c-sym{order:2;font-weight:800;overflow-wrap:anywhere;white-space:normal}
  .tblwrap.fichas .c-st{order:3;margin-left:auto}
  .tblwrap.fichas :is(.c-esc,.c-tk,.c-vol,.c-sl,.c-tp){order:5;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
  .tblwrap.fichas .c-tk{font-family:inherit}
  .tblwrap.fichas .vacio{display:none}   /* sin ticket, SL o TP: la ficha no enseña «—» */
  .tblwrap.fichas .c-hace{order:6;margin-left:auto;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
  .tblwrap.fichas .c-esc::before{content:"esclavo ";content:"esclavo " / ""}
  .tblwrap.fichas .c-tk::before{content:"ticket ";content:"ticket " / ""}
  .tblwrap.fichas .c-vol::before{content:"vol. ";content:"vol. " / ""}
  .tblwrap.fichas .c-sl::before{content:"SL ";content:"SL " / ""}
  .tblwrap.fichas .c-tp::before{content:"TP ";content:"TP " / ""}
}
.empty{color:var(--muted);font-weight:600;font-size:var(--fs-sm);padding:var(--sp-4) 0;text-align:center}

/* —— Píldoras de estado —— */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-2xs);font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--glassline);
  background:var(--surface-2);color:var(--ink-2);font-stretch:var(--wd-semi);white-space:nowrap
}
.pill.amber{background:var(--accent-tint);border-color:var(--accent-line);color:var(--accent-text)}
.pill.ok{background:var(--ok-tint);border-color:var(--ok-line);color:var(--ok-text)}
.pill.bad{background:var(--bad-tint);border-color:var(--bad-line);color:var(--bad-text)}
.pill.warn{background:var(--warn-tint);border-color:var(--warn-line);color:var(--warn-text)}
.pill.dim{opacity:.75}
/* v9: punto estático (v8 animaba box-shadow sin fin en cada cuenta en línea) */
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-tint)}

/* ============================================================
   CONTROLES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:900;font-size:var(--fs-base);letter-spacing:.01em;
  border-radius:var(--r-pill);padding:12px 22px;min-height:46px;
  background:color-mix(in srgb, var(--ink) 88%, transparent);color:var(--on-ink);
  box-shadow:0 10px 24px color-mix(in srgb, var(--ink) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),opacity var(--dur-1);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.ghost{
  background:var(--surface-2);color:var(--ink);
  border:1px solid var(--glassline);
  box-shadow:var(--e1), inset 0 1px 0 var(--spec);
}
.btn.danger{background:var(--bad-tint);border:1px solid var(--bad-line);color:var(--bad-text);box-shadow:none}
.btn.sm{padding:8px 14px;min-height:36px;font-size:var(--fs-sm)}
/* WS-09: los iconos de ICO no traen tamaño: sin esta regla el «+» llenaba la píldora */
.btn svg{width:16px;height:16px;flex:none}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px)}
}

/* —— Formularios —— */
.f{display:block;margin-bottom:var(--sp-4)}
.f .lb{display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-stretch:var(--wd-semi);margin-bottom:7px}
input,select,textarea{
  width:100%;font-family:inherit;color:var(--ink);font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;box-shadow:inset 0 1px 0 var(--spec);
  transition:border-color var(--dur-1),box-shadow var(--dur-1);
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
input::placeholder{color:var(--muted);font-weight:500}
input[aria-invalid="true"]{border-color:var(--bad-line)}
input.mini{width:86px;padding:7px 9px;text-align:right;font-variant-numeric:tabular-nums;border-radius:var(--r-xs)}
.frow{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.frow .f{flex:1;min-width:min(100%,220px)}  /* en un móvil, un campo por fila: un select de 150 px truncaba sus opciones */
.frow .f.full{flex:1 1 100%}
.err{color:var(--bad-text);font-size:var(--fs-sm);font-weight:700;min-height:20px;margin:2px 0 8px}

/* —— Interruptor —— */
.switch{
  width:46px;height:27px;border-radius:var(--r-pill);flex:none;position:relative;
  background:color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.14);
  transition:background var(--dur-2) var(--ease-out);
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform var(--dur-2) var(--spring);
}
.switch.on{background:var(--ok)}
.switch.on::after{transform:translateX(19px)}
.switch.danger.on{background:var(--bad)}
.switch[aria-busy="true"]{opacity:.6;pointer-events:none}
/* zona de pulsación ampliada (invisible): 54 × 45 px aunque el conmutador mida 46 × 27 */
.switch::before{content:"";position:absolute;inset:-9px -4px;border-radius:inherit}

/* ============================================================
   GATE — portada login/registro
   ============================================================ */
.gate{
  min-height:100vh;min-height:100dvh;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--sp-8);align-items:center;
  max-width:1080px;margin:0 auto;
  padding:calc(var(--sat) + var(--sp-6)) calc(var(--sar) + var(--sp-6)) calc(var(--sab) + var(--sp-6)) calc(var(--sal) + var(--sp-6));
}
.gate .hero{display:flex;flex-direction:column;gap:var(--sp-5)}
.gate .statement{font-size:var(--fs-4xl);font-weight:900;font-stretch:var(--wd-exp);letter-spacing:-.022em;line-height:var(--lh-tight)}
.gate .statement em{font-style:normal;color:var(--accent-text)}
.gate .spec{
  background:var(--surface);
  border:1px solid var(--glassline);border-radius:var(--r-md);
  box-shadow:var(--e1), inset 0 1px 0 var(--spec);
  padding:var(--sp-2) var(--sp-5);
}
.gate .spec .row{display:flex;justify-content:space-between;gap:var(--sp-4);padding:10px 0;border-bottom:1px solid var(--hairline)}
.gate .spec .row:last-child{border-bottom:none}
.gate .spec .k{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-stretch:var(--wd-semi)}
.gate .spec .v{font-size:var(--fs-sm);font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.gate .hint{font-size:var(--fs-xs);color:var(--muted);font-weight:600;line-height:var(--lh-loose)}
.gate .box .card{padding:var(--sp-6)}
.gate .topline{position:absolute;top:calc(var(--sat) + 14px);right:calc(var(--sar) + 16px);display:flex;gap:var(--sp-2)}

.tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--glassline);border-radius:var(--r-pill);padding:4px;margin-bottom:var(--sp-5)}
.tabs button{
  flex:1;padding:9px 10px;border-radius:var(--r-pill);
  font-weight:900;font-size:var(--fs-sm);letter-spacing:.02em;color:var(--muted);
  transition:color var(--dur-1),background var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.tabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--e1), inset 0 1px 0 var(--spec)}
.tabs button:active{transform:scale(.97)}

.install{
  display:none;align-items:center;flex-wrap:wrap;gap:10px;
  background:var(--surface);border:1px solid var(--glassline);border-radius:var(--r-md);
  box-shadow:var(--e1), inset 0 1px 0 var(--spec);
  padding:var(--sp-3) var(--sp-4);
}
.install.show{display:flex}
.install .t{font-size:var(--fs-sm);font-weight:700}
.install .t small{display:block;color:var(--muted);font-weight:600;font-size:var(--fs-xs)}
.install .btn{margin-left:auto}
.install .t{min-width:0;overflow-wrap:anywhere}
.notification-actions .btn{white-space:normal;max-width:100%;scroll-margin-block:100px}
#deviceNotificationStatus,#deviceNotificationError{overflow-wrap:anywhere}
[data-install-card] .install{margin-block:12px}
/* Expanded accordions must not reveal focusable children of a closed dialog. */
.modal:not(.on),.modal:not(.on) *{visibility:hidden !important}

@media (max-width:900px){
  .gate{grid-template-columns:1fr;gap:var(--sp-6);align-content:start}
  .gate .statement{font-size:var(--fs-3xl)}
  .gate .box{order:-1;margin-top:var(--sp-8)}
}

/* ============================================================
   TARJETAS DE CUENTA
   ============================================================ */
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));gap:var(--sp-4)}
.grid2 .card{margin:0}

/* analítica (v10): curva en SVG propio (sin librerías, cabe en la CSP) */
.chart{width:100%}
.chart svg{display:block;width:100%;height:auto}
.chart path{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.chart .s0{stroke:var(--accent)}
.chart .s1{stroke:var(--warn)}
.chart .cero{stroke:var(--line);stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.chart text{fill:var(--muted);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.leyenda{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-2);font-size:var(--fs-sm);font-weight:700}
.leyenda .ley::before{content:"";display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;background:currentColor}
.leyenda .s0{color:var(--accent-text)}
.leyenda .s1{color:var(--warn)}
.pos{color:var(--ok-text)}
.neg{color:var(--bad-text)}
.acc .top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:var(--sp-2);min-width:0}
.acc .login{font-size:var(--fs-xl);font-weight:900;font-variant-numeric:tabular-nums;font-stretch:var(--wd-semi);letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}
.acc .top .dot{margin-left:auto}
.acc .pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--sp-2);min-width:0}
/* un estado largo («el equipo la está retirando…») se parte dentro de su
   tarjeta en vez de salirse de ella */
.acc .pills .pill,.cop .who .nm .pill,.userrow .who .nm .pill{white-space:normal;max-width:100%;line-height:1.3}
.acc .stats{display:flex;gap:var(--sp-6);margin:var(--sp-3) 0;flex-wrap:wrap}
.acc .stats .s{display:flex;flex-direction:column;gap:3px}
.acc .stats .k{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-stretch:var(--wd-semi)}
.acc .stats .v{font-weight:800;font-size:var(--fs-md);font-variant-numeric:tabular-nums;white-space:nowrap}
/* pie de la tarjeta: el servidor arriba y, debajo, UNA fila con el conmutador y
   su etiqueta (siempre juntos), «Rendimiento» y el menú. Era una sola fila que
   al partirse (768 px, nombres de servidor largos) separaba «Habilitada» de su
   conmutador y dejaba el menú huérfano. */
.acc .ctl{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--hairline)}
.acc .ctl .srv,.acc .ctl .lbl{font-size:var(--fs-xs);font-weight:700;color:var(--muted);overflow-wrap:anywhere;min-width:0}
.acc .ctl .acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.acc .ctl .sw{display:inline-flex;align-items:center;gap:8px}
.acc .ctl .acts > .btn{margin-left:auto}
/* Columna flexible: el pie (servidor, conmutador, «Rendimiento», menú) cae al
   fondo y en cada fila de la rejilla los pies quedan alineados. Sin colapso de
   márgenes en flex: cada hijo fija su separación de arriba (las de antes). */
.acc{display:flex;flex-direction:column}
.acc > .top{margin-block:0}
.acc > .pills{margin-block:var(--sp-2) 0}
.acc > .pills:empty{display:none}
.acc > .term-aviso{margin-block:var(--sp-2) 0}
.acc > .stats{margin-block:var(--sp-3) 0}
.acc > .diagbtn{margin-top:var(--sp-3)}
.acc > .ctl{margin-top:auto}
.acc > :nth-last-child(2){margin-bottom:var(--sp-3)}
@media (max-width:360px){
  /* en 320 px la fila solo cabe sin la palabra: el conmutador conserva su aria-label */
  .acc .ctl .sw .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* ============================================================
   CAPAS ALTAS — toast, aviso de versión
   ============================================================ */
/* Centrados con left/right + margin auto y anchura natural: con left:50% el
   ancho de ajuste quedaba limitado a MEDIO viewport y en un móvil el toast
   salía como una píldora alta de siete líneas. Encima del dock, nunca debajo. */
#toast{
  position:fixed;left:calc(16px + var(--sal));right:calc(16px + var(--sar));bottom:calc(var(--dock-h) + var(--dock-gap) + 10px + var(--sab));z-index:95;
  margin-inline:auto;width:max-content;max-width:min(560px,calc(100% - 32px - var(--sal) - var(--sar)));
  transform:translateY(16px);
  background:color-mix(in srgb, var(--ink) 92%, transparent);color:var(--on-ink);
  border-radius:22px;padding:11px 20px;font-weight:800;font-size:var(--fs-sm);line-height:var(--lh);
  box-shadow:var(--e2), inset 0 1px 0 rgba(255,255,255,.14);
  opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--spring);
  text-align:center;overflow-wrap:anywhere;
}
#toast.on{opacity:1;transform:none}
#toast.bad{background:var(--bad);color:#fff}
/* Debajo de la píldora de la cabecera (12 + 60 + 12): en un móvil se partía en
   tres líneas ENCIMA de la campana y el tema. Oculto por opacidad/visibility. */
.updbanner{
  position:fixed;top:calc(var(--sat) + 84px);left:calc(16px + var(--sal));right:calc(16px + var(--sar));z-index:96;
  margin-inline:auto;width:max-content;max-width:min(560px,calc(100% - 32px - var(--sal) - var(--sar)));
  background:var(--accent);color:var(--accent-ink);
  border-radius:22px;padding:11px 20px;font-weight:900;font-size:var(--fs-sm);line-height:var(--lh);text-align:center;
  box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);
  transition:transform var(--dur-3) var(--spring),opacity var(--dur-2) ease,visibility 0s linear var(--dur-3);
}
.updbanner.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:transform var(--dur-3) var(--spring),opacity var(--dur-2) ease,visibility 0s}

/* ============================================================
   MODALES, ACORDEONES, CAMPANA, CUPOS, COPIADORES
   ============================================================ */
.modal-veil{position:fixed;inset:0;z-index:80;background:color-mix(in srgb, var(--bg) 58%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity var(--dur-1) ease}
.modal-veil.on{opacity:1;pointer-events:auto;transition:opacity var(--dur-2) ease}
.modal{position:fixed;z-index:81;inset:0;display:grid;place-items:center;padding:18px;pointer-events:none;visibility:hidden}
.modal.on{visibility:visible}
.modal .box{width:min(720px,100%);max-height:min(86dvh,880px);overflow:auto;overscroll-behavior:contain;scroll-padding-block-end:96px;background:var(--surface-solid);border:1px solid var(--glassline);border-radius:22px;box-shadow:0 30px 80px color-mix(in srgb, var(--ink) 25%, transparent), inset 0 1px 0 var(--spec);padding:var(--modal-pad);transform:translateY(14px) scale(.98);opacity:0;transition:transform var(--dur-1) var(--ease-io),opacity var(--dur-1) ease;pointer-events:none}
.modal.on .box{transform:none;opacity:1;pointer-events:auto;transition:transform var(--dur-2) var(--spring),opacity var(--dur-2) ease}
.modal h2{font-size:var(--fs-xl);font-weight:900;font-stretch:var(--wd-exp);display:flex;align-items:flex-start;gap:10px}
/* el texto del título (y su número) envuelve dentro de .t: antes cada trozo era
   un elemento flex que no encogía y «Override — resincronizar 52000002» hacía
   desplazable la caja en 320 y 390 px */
.modal h2 .t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.modal h2 .t .tnum{white-space:nowrap}
.modal h2 small{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:600;font-stretch:var(--wd-norm);margin-top:2px}
.modal .x{margin-left:auto;flex:none;margin-top:-5px}
.modal .foot{display:flex;flex-wrap:wrap-reverse;gap:var(--sp-3);justify-content:flex-end;margin-top:var(--sp-4);position:sticky;bottom:calc(-1 * var(--modal-pad));padding:var(--sp-3) 0 var(--sp-2);background:linear-gradient(to top, var(--surface-solid) 72%, transparent)}

.sec{border:1px solid var(--line);border-radius:16px;margin-top:var(--sp-3);overflow:hidden;background:var(--surface-2);
  display:grid;grid-template-rows:auto 0fr;
  transition:grid-template-rows var(--dur-3) var(--ease-io)}
.sec.on{grid-template-rows:auto 1fr}
.sec > button.h{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;gap:10px;cursor:pointer;padding:14px 16px;font-weight:800;font-size:var(--fs-md);font-stretch:var(--wd-semi)}
.sec > button.h:focus-visible{outline:2.5px solid var(--focus);outline-offset:-3px;border-radius:16px}
.sec > button.h .car{margin-left:auto;transition:transform var(--dur-2) ease;opacity:.6}
.sec.on > button.h .car{transform:rotate(180deg)}
/* WS-04: al abrir, el contenido es visible (y enfocable) en el mismo fotograma;
   al cerrar, se oculta cuando termina la animación. Una transición de
   visibility al abrir dejaba el primer campo del diálogo sin foco. */
.sec > .b{display:block;min-height:0;overflow:hidden;padding:0 16px;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-2) var(--ease-out),padding var(--dur-3) var(--ease-io),visibility 0s linear var(--dur-3)}
.sec.on > .b{padding:4px 16px 16px;opacity:1;visibility:visible;
  transition:opacity var(--dur-2) var(--ease-out),padding var(--dur-3) var(--ease-io),visibility 0s}
.sec .hint{font-size:var(--fs-xs);color:var(--muted);font-weight:600;margin:6px 0 14px;line-height:var(--lh-loose)}
.sec > .b > .hint:last-child{margin-bottom:0}

.ckrow{display:flex;flex-wrap:wrap;gap:10px 18px;margin:10px 0}
.ck{display:flex;align-items:center;gap:8px;min-height:28px;font-weight:700;font-size:var(--fs-sm);cursor:pointer;user-select:none}
.ck input{appearance:none;width:24px;height:24px;min-height:0;padding:0;border-radius:7px;border:1.5px solid var(--line);background:var(--surface-2);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-1) ease,border-color var(--dur-1) ease;flex:none}
.ck input:checked{background:var(--accent);border-color:var(--accent)}
.ck input:checked::after{content:"";width:11px;height:7px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.ck .warn{color:var(--bad-text)}

.quota{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.quota .bar{width:130px;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.quota .bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width var(--dur-3) ease}
.quota.full .bar i{background:var(--bad-text)}

.cop{border:1px solid var(--line);border-radius:18px;margin-top:var(--sp-3);background:var(--surface)}
.cop .mrow{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface-2);flex-wrap:wrap;border-radius:18px 18px 0 0}
.cop .mrow .who,.cop .srow .who{display:flex;flex-direction:column;min-width:130px;max-width:100%}
.cop .mrow .who .nm{font-weight:900;font-stretch:var(--wd-semi);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cop .srow .who .nm{font-weight:800;display:flex;gap:8px;align-items:center}
.cop .who .sub{font-size:var(--fs-xs);color:var(--muted);font-weight:600;overflow-wrap:anywhere}
.cop .mrow .acts,.cop .srow .acts{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;align-items:center}
.cop .srow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px dashed var(--line);flex-wrap:wrap}
.cop .srow .risk{display:flex;flex-direction:column;min-width:110px}
.cop .srow .risk .k{font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.cop .srow .risk .v{font-weight:800;font-size:var(--fs-sm)}
.cop .srow .sub.none{color:var(--muted);font-weight:600}
/* los estados de un esclavo van juntos (pastillas y sus botones) y las acciones
   en su propio grupo: antes se intercalaban al partirse la fila */
/* base = su contenido: con un estado corto las acciones caben en la misma fila
   (con 220 px fijos, en 1280 px cada esclavo ocupaba dos filas) */
.cop .srow .st{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0;flex:1 1 auto}
.cop .srow .st:empty{display:none}
.cop .acts > .sw{display:inline-flex;align-items:center;gap:8px;flex:none}
@media (max-width:640px){
  /* filas completas: los botones de texto se reparten la fila y el conmutador
     viaja con su menú (en 320 px el «⋯» se quedaba solo en una tercera fila) */
  .cop .mrow .acts,.cop .srow .acts{flex:1 1 100%;margin-left:0;justify-content:flex-start}
  .cop .acts > .btn{flex:1 1 auto}
  .cop .acts > .sw{margin-left:auto}
}
/* Cuentas: exportar y añadir viajan juntos (en móvil, a todo el ancho) */
.row-wrap > .acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
@media (max-width:480px){
  .row-wrap > .acts{flex:1 1 100%;margin-left:0}
  .row-wrap > .acts .btn{flex:1 1 auto}
}

.bellwrap{position:relative}
.badge-n{min-width:17px;height:17px;border-radius:99px;background:var(--bad);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}
.bellwrap .badge-n{position:absolute;top:-4px;right:-4px}
.notipanel{position:fixed;z-index:70;top:calc(84px + var(--sat));right:max(12px, env(safe-area-inset-right));width:min(400px, calc(100vw - 24px));max-height:min(560px,calc(100dvh - 84px - var(--dock-h) - var(--dock-gap) - 16px - var(--sat) - var(--sab)));display:none;flex-direction:column;background:var(--nav-bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glassline);border-radius:18px;box-shadow:0 24px 60px color-mix(in srgb, var(--ink) 25%, transparent), inset 0 1px 0 var(--spec);overflow:hidden}
.notipanel.on{display:flex}
.notipanel .list{overflow:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.noti{border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:var(--fs-sm);font-weight:600;overflow-wrap:anywhere;background:var(--surface-2)}
.noti .fr{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;font-weight:900;color:var(--accent-text);display:flex;gap:8px}
.noti .fr .tm{margin-left:auto;color:var(--muted)}
.noti.mine{background:var(--accent-tint);border-color:var(--accent-line)}
/* sobre el tinte, --muted bajaba de 4.5:1 en oscuro (WCAG 1.4.3) */
.noti.mine .fr .tm{color:var(--ink-2)}
.notipanel .comp{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.notipanel .comp input{flex:1}
.thread{display:flex;flex-direction:column;gap:8px;margin:14px 0;max-height:46dvh;overflow:auto;overscroll-behavior:contain}

.lock{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px;background:color-mix(in srgb, var(--bg) 78%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lock .box{width:min(480px,100%);text-align:center;background:var(--surface-solid);border:1px solid var(--glassline);border-radius:22px;padding:34px 28px;box-shadow:0 30px 80px color-mix(in srgb, var(--ink) 25%, transparent), inset 0 1px 0 var(--spec)}
.lock .box .big{font-size:44px;margin-bottom:8px}
.lock .box h2{font-size:var(--fs-xl);font-weight:900;font-stretch:var(--wd-exp);margin-bottom:8px}
.lock .box p{color:var(--muted);font-weight:600;font-size:var(--fs-sm);line-height:1.55}
.lock form.stack,.lock .stage{text-align:left;margin-top:16px}

.maprow{display:flex;gap:8px;align-items:center;margin-top:8px}
.maprow input{flex:1}
.maprow input.upper{text-transform:uppercase}
.maprow .arrow{font-weight:900}
.banner{border:1px solid var(--accent-line);background:var(--accent-tint);color:var(--accent-text);border-radius:14px;padding:12px 16px;font-weight:700;font-size:var(--fs-sm);margin-bottom:var(--sp-4);line-height:var(--lh-loose)}
/* un aviso detrás de una tarjeta (Cuentas: cupos → «Falta MetaTrader 5») no se
   pega a ella: el ritmo vertical es el de .card + .card */
.card + .banner,.card + .mt5ban > .banner:first-child{margin-top:var(--sp-4)}
.banner.bad{border-color:var(--bad-line);background:var(--bad-tint);color:var(--bad-text)}
.banner.warn{border-color:var(--warn-line);background:var(--warn-tint);color:var(--warn-text)}
.banner .subrow{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:10px}
.banner .subrow label{display:flex;align-items:center;gap:8px;font-weight:600}
.banner .btn{flex:0 0 auto}
.subman{display:flex;justify-content:flex-end;margin-bottom:var(--sp-4)}
.userrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;margin-top:10px;flex-wrap:wrap;background:var(--surface)}
.userrow.isbanned{border-color:var(--bad-line);background:var(--bad-tint)}
/* listas largas del panel: el navegador no pinta lo que no se ve */
.userrow .who{display:flex;flex-direction:column;min-width:170px}
.userrow .who .nm{font-weight:900;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.userrow .who .sub{font-size:var(--fs-xs);color:var(--muted);font-weight:600;overflow-wrap:anywhere}
.userrow .fld{display:flex;flex-direction:column;gap:2px}
.userrow .fld .k{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
.userrow .acts{display:flex;gap:8px;margin-left:auto;align-items:center;flex-wrap:wrap}

/* —— menú contextual por fila —— */
.menuwrap{position:relative;display:inline-flex}
.menu{position:absolute;top:calc(100% + 6px);right:0;z-index:55;min-width:220px;display:none;flex-direction:column;padding:6px;background:var(--surface-solid);border:1px solid var(--glassline);border-radius:14px;box-shadow:0 18px 44px color-mix(in srgb, var(--ink) 22%, transparent), inset 0 1px 0 var(--spec)}
.menu.on{display:flex}
/* colocarMenu (app.js): hacia la derecha si se saldría por la izquierda y hacia
   arriba si el dock lo taparía; por encima del dock (z 55 > 50) siempre */
.menu.ltr{left:0;right:auto}
.menu.up{top:auto;bottom:calc(100% + 6px)}
.menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:9px;font-weight:700;font-size:var(--fs-sm);cursor:pointer;color:var(--ink)}
.menu button:hover,.menu button:focus-visible{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.menu button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.menu button svg{width:16px;height:16px;flex:none;opacity:.75}
.menu button.danger{color:var(--bad-text)}
.menu button.danger:hover{background:var(--bad-tint)}
.menu .sep{height:1px;background:var(--line);margin:5px 8px}

/* ================= buscador de brokers (broker → entidad → server) ==== */
.bfind{margin:2px 0 4px}
.bfind .panel{border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-solid);box-shadow:var(--e1);
  max-height:290px;overflow:auto;padding:6px;display:none}
.bfind .panel.on{display:block}
.bf-co{border-radius:var(--r-xs)}
.bf-co+.bf-co{margin-top:2px}
.bf-cohead{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:9px 10px;border:0;background:transparent;color:var(--ink);
  font:inherit;font-weight:800;cursor:pointer;border-radius:var(--r-xs)}
.bf-cohead:hover{background:var(--accent-tint)}
/* sobre el tinte, el gris apagado no llegaba a 4,5:1 (4,36 en oscuro) */
.bf-cohead:hover .n,.bf-cohead:hover .car{color:var(--ink-2)}
.bf-cohead > span:first-child{min-width:0;overflow-wrap:anywhere}
.bf-cohead .tag{font-size:var(--fs-2xs);font-weight:800;color:var(--ok-text);
  background:var(--ok-tint);border:1px solid var(--ok-line);
  border-radius:var(--r-pill);padding:1px 8px}
.bf-cohead .n{margin-left:auto;font-size:var(--fs-2xs);color:var(--muted);font-weight:700;white-space:nowrap}
.bf-cohead .car{transition:transform var(--dur-2) var(--ease-out);color:var(--muted)}
.bf-co.on .bf-cohead .car{transform:rotate(180deg)}
.bf-servers{display:none;flex-wrap:wrap;gap:6px;padding:2px 10px 10px}
.bf-co.on .bf-servers{display:flex}
.bf-srv{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  border-radius:var(--r-pill);padding:5px 11px;font:inherit;
  font-size:var(--fs-sm);font-weight:700;cursor:pointer;max-width:100%;overflow-wrap:anywhere;text-align:start}
.bf-srv:hover{border-color:var(--accent-line);background:var(--accent-tint);color:var(--accent-text)}
.bf-empty{padding:10px;font-size:var(--fs-sm);font-weight:600;color:var(--muted);line-height:var(--lh-loose)}
.bf-foot{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:8px 10px 4px;
  font-size:var(--fs-2xs);color:var(--muted);font-weight:700;
  border-top:1px solid var(--hairline);margin-top:6px}
.bf-foot .ml-auto{margin-left:auto}
.bf-status{display:flex;align-items:center;gap:6px;margin-top:6px;
  font-size:var(--fs-xs);font-weight:700;color:var(--muted);min-height:18px}
.bf-status.ok{color:var(--ok-text)}

/* ================= roles, 2FA y equipo ================= */
.rolebadge{font-weight:900;letter-spacing:.08em}
.rb-superadmin{color:var(--accent-text);background:var(--accent-tint);border-radius:var(--r-pill);padding:2px 9px;border:1px solid var(--accent-line)}
.rb-admin{color:var(--ok-text);background:var(--ok-tint);border-radius:var(--r-pill);padding:2px 9px;border:1px solid var(--ok-line)}
.rb-viewer{color:var(--muted);background:var(--surface-2);border-radius:var(--r-pill);padding:2px 9px;border:1px solid var(--line)}

.stagehint{font-size:var(--fs-sm);color:var(--muted);font-weight:600;line-height:var(--lh-loose)}

/* seguridad de la cuenta (v11): contraseña, 2FA y sesiones por dispositivo */
.seg{display:grid;gap:var(--sp-3)}
.seg-fila{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--glassline);border-radius:var(--r-md);background:var(--surface-2)}
.seg-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px}
.seg-t b{font-weight:800;font-size:var(--fs-md)}
.seg-t .note{margin-top:0}
.seg-ses{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--hairline)}
.seg-ses-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.seg-ses-h h3{font-size:var(--fs-lg);font-weight:900;font-stretch:var(--wd-exp)}
.sesiones{list-style:none;display:grid;gap:8px;margin:0 0 var(--sp-3);padding:0}
.sesion{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.sesion .who{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 200px}
.sesion .nm{font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap;overflow-wrap:anywhere}
.sesion .sub{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
#sesList{min-height:64px}
#sesList > .note{margin:0 0 var(--sp-3)}
#err-ses:empty{min-height:0;margin:0}
.modal .box.narrow{width:min(540px,100%)}

/* estado del terminal (v11, C2): qué pasa y qué hacer, en la tarjeta */
.term-aviso{margin:0 0 var(--sp-2);padding:9px 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-xs);font-weight:650;line-height:var(--lh-loose);overflow-wrap:anywhere}
.term-aviso.amber{border-color:var(--accent-line);background:var(--accent-tint);color:var(--accent-text)}
.term-aviso.warn{border-color:var(--warn-line);background:var(--warn-tint);color:var(--warn-text)}
.term-aviso.bad{border-color:var(--bad-line);background:var(--bad-tint);color:var(--bad-text)}
.term-aviso .term-detalle{display:block;margin-top:3px;font-weight:600;font-family:var(--mono);font-size:.95em}
.term-aviso .term-desde{display:block;margin-top:3px;font-weight:700}
.totpsecret{display:flex;gap:8px;align-items:center;justify-content:space-between;
  border:1px dashed var(--accent-line);border-radius:var(--r-sm);padding:10px 12px;
  background:var(--accent-tint)}
.totpsecret code{font-family:var(--mono);font-size:13px;font-weight:700;
  word-break:break-all;color:var(--accent-text)}
.recovery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.recovery b{grid-column:1/-1}
.recovery code{font-family:var(--mono);font-weight:700;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-xs);padding:7px 4px;
  background:var(--surface-2)}
.tempbox{margin-top:12px;border:1px solid var(--ok-line);background:var(--ok-tint);
  color:var(--ok-text);border-radius:var(--r-sm);padding:12px 14px;font-weight:700;
  font-size:var(--fs-sm);line-height:1.6;word-break:break-all}
.tempbox code{font-family:var(--mono);font-size:14px;background:var(--surface);
  border-radius:6px;padding:2px 8px}
.tempbox p{margin:0}
#userTemp{margin:0 0 var(--sp-3)}

/* viewer = SOLO LECTURA: el servidor ya rechaza (403); esto lo refleja */
body.role-viewer :is(#pendList,#userList,#accAdmList,#killBox,#backupBox) :disabled,
body.role-viewer :is(#msgText,#msgSend,#srvName,#srvAdd,#srvScan,#srvSync):disabled{pointer-events:none;opacity:.4}

/* ============================================================
   Diagnóstico «por qué no copia», parada de emergencia
   ============================================================ */
.diagbtn{
  margin-top:10px; width:100%; text-align:left; cursor:pointer;
  background:var(--warn-tint); color:var(--warn-text);
  border:1px solid var(--warn-line);
  border-radius:12px; padding:9px 12px; font:inherit; font-size:12.5px;
  font-weight:800; letter-spacing:.2px; min-height:40px;
}
.diagbtn:hover{ background:color-mix(in srgb, var(--warn) 20%, transparent); }
.diaglist{
  display:none; margin:8px 0 0; padding:10px 12px 10px 28px;
  border-radius:12px; background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-2); font-size:12.5px; font-weight:650; line-height:1.6;
}
.diaglist li{ margin:3px 0; }
.diagbtn[aria-expanded="true"] + .diaglist{ display:block; }
.userrow > .diagbtn,.userrow > .diaglist{flex:1 1 100%}
/* el diagnóstico del máster cuelga de la tarjeta sin relleno: no toca sus bordes */
.cop > .diagbtn{margin:10px 16px 0;width:calc(100% - 32px)}
.cop > .diaglist{margin:8px 16px 0}

.killrow{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  color:var(--muted); font-weight:650; font-size:13.5px; line-height:1.55;
}
.killrow > span{ flex:1 1 260px; }

/* ============================================================
   ANALÍTICA — el panel del trader (v10)
   Ganancia y pérdida llevan colores PROPIOS de gráfico, validados con el
   validador de paletas en claro y en oscuro (daltonismo protan/deutan
   ΔE ≥ 12, visión normal ΔE ≥ 28, contraste ≥ 3:1 sobre la tarjeta y
   banda de luminosidad): el verde y el rojo de estado (--ok/--bad) se
   confunden con deuteranopía (ΔE 5,6). No siguen a la marca: el P&L
   significa lo mismo con cualquier color de operador.
   ============================================================ */
:root{--gain:#0F8A7E;--loss:#D62A2A}
:root[data-theme="dark"]{--gain:#1FA090;--loss:#E5533F}

.anfiltros{display:flex;flex-direction:column;gap:var(--sp-4)}
/* el aviso de error no deja hueco mientras está vacío (sigue en el árbol: role=alert) */
.anfiltros .err{margin:0}
.anfiltros .err:empty{min-height:0;margin-top:calc(-1 * var(--sp-4))}
.anfila{display:flex;flex-direction:column;gap:8px;min-width:0}
.anfila > .lb{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-stretch:var(--wd-semi)}
.ancuentas{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ancta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left;
  padding:10px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);
  transition:border-color var(--dur-1) ease,background var(--dur-1) ease}
.ancta .l{font-weight:900;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.ancta .s{font-size:var(--fs-xs);font-weight:700;color:var(--muted);max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.ancta[aria-checked="true"]{border-color:var(--accent-line);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent-line)}
.ancta[aria-checked="true"] .l{color:var(--accent-text)}
.ancta[aria-checked="true"] .s{color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){ .ancta:hover{border-color:var(--accent-line)} }
.segmento{display:flex;flex-wrap:wrap;gap:4px;align-self:flex-start;max-width:100%;
  background:color-mix(in srgb, var(--ink) 4%, var(--surface-2));border:1px solid var(--line);border-radius:22px;padding:4px}
.segmento button{padding:8px 14px;border-radius:var(--r-pill);font-weight:800;font-size:var(--fs-sm);color:var(--muted);min-height:36px;white-space:nowrap}
.segmento button[aria-checked="true"]{background:var(--surface-solid);color:var(--ink);box-shadow:var(--e1), inset 0 1px 0 var(--spec)}
#an_panel{transition:opacity var(--dur-2) var(--ease-out)}
#an_panel.cargando{opacity:.55}
.an-resumen{margin:var(--sp-3) 0 var(--sp-4)}
.an-detalle{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--hairline)}
.an-detalle-cab{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3)}
.an-detalle-cab h3{font-size:var(--fs-lg);font-weight:900;font-stretch:var(--wd-exp)}
.an-dia{display:block;width:100%;font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;text-align:inherit}
.an-dia:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
#an_ops_resumen{margin-bottom:var(--sp-3)}
.an-journal{margin-top:var(--sp-4)}
.an-journal-form{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.an-journal-form textarea{resize:vertical;min-height:96px}

/* —— cifras —— */
.ankpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.ankpis.mini{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:var(--sp-3)}
/* filas completas en cualquier ancho (con auto-fit, en una tableta quedaban
   4 + 1 y 4 + 2, con huecos): 5 y 6 en fila desde 1024 px; entre 600 y
   1023, 3 + 2 (rejilla de 6) y 3 + 3 */
@media (min-width:600px) and (max-width:1023px){
  .ankpis:not(.mini){grid-template-columns:repeat(6,minmax(0,1fr))}
  .ankpis:not(.mini) > .ankpi{grid-column:span 2}
  .ankpis:not(.mini) > .ankpi:nth-child(n+4){grid-column:span 3}
  .ankpis.mini{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .ankpis:not(.mini){grid-template-columns:repeat(5,minmax(0,1fr))}
  .ankpis.mini{grid-template-columns:repeat(6,minmax(0,1fr))}
}
.ankpi{background:var(--surface);border:1px solid var(--glassline);border-radius:var(--r-md);
  box-shadow:var(--e1), inset 0 1px 0 var(--spec);padding:var(--sp-4);display:flex;flex-direction:column;gap:8px;min-width:0;
  container-type:inline-size}
.ankpi.mini{padding:12px 14px;gap:4px}
.ankpi > .k{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-stretch:var(--wd-semi)}
/* las cifras jamás se parten por dentro: su tamaño sigue al de la tarjeta y,
   si aun así no caben, solo saltan entre el número y la divisa */
.ankpi .v{font-size:clamp(18px,13cqi,25px);font-weight:900;letter-spacing:-.01em;font-stretch:var(--wd-semi);line-height:1.1;overflow-wrap:normal}
.ankpi .v.hero{font-size:clamp(20px,14cqi,40px)}
.ankpi .v2{font-size:clamp(16px,11cqi,20px);font-weight:900;font-stretch:var(--wd-semi);line-height:1.15;overflow-wrap:normal}
.ankpi .sub{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.ankpi .fila{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.medidor{width:clamp(64px,40cqi,108px);height:auto;flex:none}
.an-arco{fill:none;stroke-width:10}
.an-arco.fondo{stroke:var(--hairline)}
.an-arco.g{stroke:var(--gain)}
.an-arco.p{stroke:var(--loss)}
.an-arco.e{stroke:var(--muted)}
.ankpi .ley{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.ankpi .ley .it{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ankpi .ley i.k{display:inline-block;width:12px;height:3px;border-radius:2px}
.ankpi .ley i.k.g{background:var(--gain)}
.ankpi .ley i.k.p{background:var(--loss)}
.ankpi .ley i.k.e{background:var(--muted)}
.reparto{display:flex;gap:2px;height:8px;border-radius:99px;overflow:hidden;background:var(--hairline);margin-top:auto}
.reparto i{display:block;height:100%;flex:0 0 50%}
.reparto i.g{background:var(--gain)}
.reparto i.p{background:var(--loss)}
.ley2{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-xs);font-weight:800;font-variant-numeric:tabular-nums}
.rachas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.racha{display:flex;flex-direction:column;gap:2px;min-width:0}
.racha .k2{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.racha b{font-size:var(--fs-2xl);font-weight:900;line-height:1.1}
.racha span:not(.k2):not(.mm){font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.racha .mm{font-size:var(--fs-2xs);font-weight:700;color:var(--muted);white-space:nowrap}
@container (max-width:250px){ .rachas{grid-template-columns:1fr;gap:8px} }

/* —— gráficos —— */
.angrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);margin-top:var(--sp-4)}
.angrid .card{margin:0;min-width:0}
@media (min-width:900px){
  .angrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .angrid .ancho{grid-column:1/-1}
}
.anplot{position:relative;border-radius:10px}
.anplot:focus-visible{outline:2.5px solid var(--focus);outline-offset:4px}
.anplot svg{display:block;width:100%;height:auto;overflow:visible}
.an-grid{fill:none;stroke:var(--hairline);stroke-width:1}
.an-cero{stroke:var(--line);stroke-width:1}
.an-tick{fill:var(--muted);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.an-linea{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.an-linea.g{stroke:var(--gain)}
.an-linea.p{stroke:var(--loss)}
.an-area.g{fill:var(--gain);fill-opacity:.12}
.an-area.p{fill:var(--loss);fill-opacity:.12}
.an-barra.g{fill:var(--gain)}
.an-barra.p{fill:var(--loss)}
.an-barra.on{opacity:.7}
.an-cruz{stroke:var(--muted);stroke-width:1}
.an-punto{fill:var(--ink);stroke:var(--surface-solid);stroke-width:2}
.antip{position:absolute;z-index:6;pointer-events:none;min-width:150px;max-width:260px;
  display:flex;flex-direction:column;gap:2px;padding:8px 12px;
  background:var(--surface-solid);border:1px solid var(--glassline);border-radius:12px;box-shadow:var(--e2)}
.antip .v{font-weight:900;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.antip .f{color:var(--muted);font-weight:700;font-size:var(--fs-xs)}

/* —— calendario —— */
.calcab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.calcab h2{margin:0;min-width:11ch;text-align:center}
.calstats{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.tblwrap.ancalwrap{margin:0}
.tblwrap.ancalwrap table{min-width:0}
.ancal{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px}
.ancal th{padding:4px;text-align:center;border:0}
.ancal td{height:78px;padding:6px 8px;vertical-align:top;border:0;border-radius:10px;background:var(--surface-2);
  white-space:normal;font-size:var(--fs-xs);font-weight:700}
.ancal td .n{display:block;text-align:right;font-weight:800;color:var(--muted)}
.ancal td .r{display:block;font-weight:900;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;margin-top:4px;white-space:nowrap}
.ancal td .r .rc{display:none}
.ancal td .o{display:block;font-weight:700;color:var(--ink-2);font-size:11px}
/* los días de otro mes se distinguen por el fondo y el peso, no por un gris
   más claro: con opacidad bajaban de 4.5:1 (WCAG 1.4.3) */
.ancal td.fuera{background:transparent}
.ancal td.fuera .n{font-weight:600}
.ancal td.con.g{background:color-mix(in srgb, var(--gain) 14%, var(--surface-2))}
.ancal td.con.p{background:color-mix(in srgb, var(--loss) 12%, var(--surface-2))}
/* sobre el tinte, --muted bajaba de 4.5:1 en oscuro */
.ancal td.con .n{color:var(--ink-2)}
.ancal th.sem,.ancal td.sem{text-align:right}
.ancal td.sem{background:transparent;border-left:1px solid var(--hairline);border-radius:0}
.tblwrap.ancalwrap .ancal th:first-child,.tblwrap.ancalwrap .ancal td:first-child{padding-left:8px}
.tblwrap.ancalwrap .ancal th:last-child,.tblwrap.ancalwrap .ancal td:last-child{padding-right:8px}
@media (max-width:640px){
  .ancal{border-spacing:2px}
  .ancal th.sem,.ancal td.sem{display:none}
  .ancal td{height:54px;padding:4px}
  .ancal td .o{display:none}
  .ancal td .r{font-size:11px}
  .ancal td .r .rl{display:none}
  .ancal td .r .rc{display:inline}
  .tblwrap.ancalwrap .ancal th:first-child,.tblwrap.ancalwrap .ancal td:first-child{padding-left:4px}
  .tblwrap.ancalwrap .ancal th:last-child,.tblwrap.ancalwrap .ancal td:last-child{padding-right:4px}
}
@media (max-width:360px){
  .ancal td{padding:3px 2px}
  .ancal td .r,.ancal td .n{font-size:10px}
  .tblwrap.ancalwrap .ancal th:first-child,.tblwrap.ancalwrap .ancal td:first-child{padding-left:2px}
  .tblwrap.ancalwrap .ancal th:last-child,.tblwrap.ancalwrap .ancal td:last-child{padding-right:2px}
}

/* —— puntuación —— */
.anscore{display:flex;flex-direction:column;gap:var(--sp-3)}
.radar{width:100%;max-width:400px;height:auto;margin:0 auto;display:block;overflow:visible}
.an-radar{fill:var(--accent-text);fill-opacity:.14;stroke:var(--accent-text);stroke-width:2;stroke-linejoin:round}
.an-radar-p{fill:var(--accent-text);stroke:var(--surface-solid);stroke-width:2}
.an-radar-t{font-size:12.5px}
.anscore .total{display:flex;flex-direction:column;gap:6px}
.anscore .total .k{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.anscore .total .v{font-size:var(--fs-3xl);font-weight:900;line-height:1}
.medida{height:8px;border-radius:99px;background:var(--hairline);overflow:hidden}
.medida i{display:block;height:100%;width:0;background:var(--accent-text);border-radius:99px}
.escala{display:flex;justify-content:space-between;font-size:var(--fs-2xs);font-weight:700;color:var(--muted)}
.componentes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 16px;margin:0}
.componentes div{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid var(--hairline)}
.componentes dt{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.componentes dd{margin:0;font-weight:900;font-variant-numeric:tabular-nums}

/* —— por símbolo —— */
.ansimb{display:flex;flex-direction:column;gap:10px}
.ansimb .fila{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr) auto;align-items:center;gap:10px}
.ansimb.doble .fila{grid-template-columns:minmax(72px,auto) minmax(0,1fr) minmax(0,1fr) auto}
.ansimb .nom{display:flex;flex-direction:column;min-width:0;font-weight:800;font-size:var(--fs-sm)}
.ansimb .nom small{font-size:var(--fs-2xs);font-weight:700;color:var(--muted)}
.ansimb .pista{display:flex;height:14px;min-width:0}
.ansimb.doble .pista.neg{justify-content:flex-end;border-right:1px solid var(--line)}
.ansimb .pista i{display:block;height:100%;width:0;min-width:2px}
.ansimb .pista i.g{background:var(--gain);border-radius:0 4px 4px 0}
.ansimb .pista i.p{background:var(--loss);border-radius:4px 0 0 4px}
.ansimb .val{font-weight:900;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* —— los datos, en tabla —— */
.andet{border-top:1px solid var(--hairline)}
.andet > summary{cursor:pointer;font-weight:800;font-size:var(--fs-sm);padding:12px 0;list-style-position:inside}
.andet > summary:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:8px}
.andet[open] > summary{margin-bottom:6px}

/* ============================================================
   ESQUELETO de la primera pintura (sin animación: nada infinito en la GPU)
   ============================================================ */
/* Hasta el primer estado (app.js: arranqueListo) las pantallas del trader
   enseñan su .arranque y nada que dependa de los datos: guía, avisos, tarjetas
   y vacíos aparecen de una vez, ya pintados. Lo que aparece no «salta»: no
   estaba visible antes (CLS 0 con la red lenta, medido en 390-1280 px). */
.arranque{display:none}
body.arrancando .arranque{display:block}
body.arrancando :is(#scr-resumen,#scr-copiadores,#scr-cuentas,#scr-live) > :not(.head,.arranque){display:none}
body.arrancando .who .chip{display:none}
body.arrancando #latLine{visibility:hidden}
.arranque .card{display:grid;gap:var(--sp-3)}
.arranque .card + .card,.arranque .tiles + .card{margin-top:var(--sp-4)}
.skel{display:block;background:color-mix(in srgb, var(--ink) 9%, transparent);border-radius:8px;user-select:none;pointer-events:none}
.sk-k{width:62%;height:11px}
.sk-v{width:74%;height:26px;margin-top:auto}
.sk-h{width:min(40%,260px);height:24px}
.sk-l{width:86%;height:14px}
.sk-corta{width:54%}
.arranque .trader-role{display:grid;gap:var(--sp-3);min-height:92px}

/* ============================================================
   OBJETIVOS TÁCTILES (WCAG 2.5.5): con puntero grueso todo control compacto
   crece a 44 px; con ratón se conserva la densidad del escritorio.
   ============================================================ */
@media (pointer:coarse){
  input,select,textarea{min-height:44px}
  .btn.sm,.linkbtn,.segmento button,.tabs button,.diagbtn,.menu button,.bf-cohead,.andet > summary{min-height:44px}
  .iconbtn,.iconbtn.small{width:44px;height:44px}
  .iconbtn.small{border-radius:14px}
  .ck{min-height:44px}
  .bf-srv{min-height:44px}
  .switch{width:50px;height:30px}
  .switch::after{width:24px;height:24px}
  .switch.on::after{transform:translateX(20px)}
}
/* diálogos en los móviles más estrechos: menos relleno y selects con más sitio */
@media (max-width:360px){
  :root{--modal-pad:16px}
  .modal{padding:12px}
  /* los acordeones del diálogo ceden 4 px por lado: un select de 182 px cortaba «Multiplicador por balance» */
  .sec > button.h{padding:14px 12px}
  .sec > .b{padding:0 12px}
  .sec.on > .b{padding:4px 12px 14px}
  select{padding-left:12px;padding-right:30px;background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%}
}
@media (max-width:480px){
  /* sin encoger por debajo de su texto: si no caben, saltan de fila (wrap-reverse) */
  .modal .foot .btn{flex:1 0 auto;max-width:100%;padding-inline:14px}
}

/* ============================================================
   AJUSTES FINALES
   ============================================================ */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  :root{--nav-bg:rgba(255,255,255,.96)}
  :root[data-theme="dark"]{--nav-bg:rgba(20,22,27,.97)}
}
/* Sin movimiento: las animaciones acaban al instante y no hay transiciones
   (una de 1 ms sobre «all» también retrasaba la visibilidad un fotograma). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:0s !important;transition-delay:0s !important;scroll-behavior:auto !important}
}
@media (prefers-reduced-transparency:reduce){
  :root{--surface:rgba(255,255,255,.97);--surface-2:rgba(255,255,255,.9);--nav-bg:rgba(255,255,255,.98);--blur:none}
  :root[data-theme="dark"]{--surface:rgba(28,31,38,.98);--surface-2:rgba(40,44,52,.94);--nav-bg:rgba(20,22,27,.98)}
}
@media print{
  nav.dock,header.bar,.notipanel,#toast,.updbanner{display:none !important}
  body::before{display:none}
}

/* ============================================================
   PANEL DEL EQUIPO Y PORTADA (polish-admin, PA-1…PA-10)
   ============================================================ */
/* PA-1 · capas de acceso (.lock): el panel se desplaza DENTRO de la capa. Con
   display:grid + place-items:center un formulario más alto que la ventana (alta
   del 2FA, códigos de recuperación en 320×568) quedaba cortado por arriba y por
   abajo, sin forma de llegar a «Los guardé — entrar al panel». margin:auto
   centra cuando cabe y alinea arriba cuando no. */
.lock{display:flex;overflow-y:auto;overscroll-behavior:contain}
.lock .box{margin:auto;flex:none}
@media (max-width:360px){
  .lock{padding:12px}
  .lock .box{padding:28px 20px}
}
/* PA-2 · filas del panel (.userrow.ur: Usuarios, Cuentas, Equipo). Debajo de
   1000 px el nombre ocupa su línea y cada grupo (conmutadores, cupos, ruta,
   acciones) salta ENTERO; desde 1000 px, rejilla con las mismas pistas en
   todas las filas: las columnas quedan alineadas de una fila a otra (antes cada
   fila colocaba sus controles según lo largo que fuera su nombre). */
.ur > .who{flex:1 1 100%;min-width:0}
.ur > .ur-sw,.ur > .ur-cupos{gap:14px}
.ur > .ur-del{margin-left:auto}
.ur > .diagbtn{margin-top:0}
@media (min-width:1000px){
  .userrow.ur{display:grid;column-gap:20px;row-gap:10px;align-items:center}
  .ur > .ur-sw,.ur > .ur-cupos{flex-wrap:nowrap}
  #accAdmList .ur{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) max-content 36px}
  #accAdmList .ur > .who{grid-column:1}
  #accAdmList .ur > .fld-wide{grid-column:2;min-width:0}
  #accAdmList .ur > .ur-sw{grid-column:3}
  #accAdmList .ur > .ur-del{grid-column:4;grid-row:1}   /* fila 1 aunque vaya detrás de las acciones en el DOM */
  #userList .ur,#teamList .ur{grid-template-columns:minmax(0,1fr) max-content max-content}
  #teamList .ur > .who{grid-column:1}
  #teamList .ur > .fld{grid-column:2}
  #teamList .ur > .acts{grid-column:3;margin-left:0}
  #accAdmList .ur > .acts,#userList .ur > .acts{grid-column:1 / -1;justify-content:flex-end;margin-left:0}
  .userrow.ur > .diagbtn,.userrow.ur > .diaglist{grid-column:1 / -1}
}
/* PA-3 · «.f.row-end» (Crear, Enviar, Añadir…): `.f{display:block}` va después
   de `.row-end{display:flex}` y la anulaba; el botón quedaba arriba, a la altura
   de las etiquetas, en vez de alineado con los campos. */
.frow .f.row-end{display:flex;align-items:flex-end;flex:0 1 auto;min-width:0}
/* PA-4 · portada en móvil: la marca encabeza la página (antes quedaba DEBAJO del
   formulario) y su nombre no se oculta (la regla de 400 px es de la cabecera). */
@media (max-width:900px){
  .gate .hero{display:contents}
  .gate .hero > .brand{order:-2;margin-top:-7px}
  .gate .box{margin-top:0}
}
/* PA-5 · portada a 320 px: las pestañas «Entrar / Crear cuenta» caben en una línea */
.tabs button{white-space:nowrap}
@media (max-width:360px){
  .gate{padding-left:calc(var(--sal) + 16px);padding-right:calc(var(--sar) + 16px)}
  .gate .box .card{padding:var(--sp-5) var(--sp-4)}
}
/* PA-6 · la confirmación (contraseña cambiada, enlace enviado) va en verde:
   `.gate .hint` (dos clases) le ganaba a `.ok-note` y salía gris */
.hint.ok-note,.gate .hint.ok-note{color:var(--ok-text);font-weight:700}
/* PA-7 · cabecera del panel del equipo entre 561 y 900 px: el sufijo «· ADMIN»
   cede su sitio al email (salía «propiet…» a 768 px) */
@media (max-width:900px){ .brand .wm .wm-x{display:none} }
/* PA-8 · contraseña temporal: el texto parte palabras solo si hace falta y la
   clave NUNCA se parte en dos líneas (break-all la cortaba: «…pQ7vL / 4wR») */
.tempbox{word-break:normal;overflow-wrap:anywhere}
.tempbox code{white-space:nowrap;display:inline-block}
/* PA-9 · selector de color de la marca: una muestra, no una barra a todo el ancho */
input[type="color"]{width:72px;padding:5px;cursor:pointer}
input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
input[type="color"]::-webkit-color-swatch{border:0;border-radius:8px}
input[type="color"]::-moz-color-swatch{border:0;border-radius:8px}
/* PA-10 · un destino de foco programático (título de una capa, aviso de la
   contraseña temporal) no lleva anillo: no es un control */
[tabindex="-1"]:focus-visible{outline:none}