/* ============================================================================
   EME2 · DESIGN KIT · CSS canónico. Vestir todo el SaaS desde aquí.
   Doctrina: cian=dato · semáforo=aviso · gris=contexto · Obsidiana=tinta.
   Variables SIEMPRE con guion (--ink-1, --cy-soft). Nitidez L-016/017.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');

/* EL INTERRUPTOR MANDA SOBRE CUALQUIER `display`. Sin esta línea, un `.aviso{display:flex}` gana al
   `[hidden]{display:none}` del navegador y el elemento se ve **aunque el HTML diga `hidden`**. El
   founder lo encontró en Criterio: una banda de aviso VACÍA pintada como una raya beige sobre las
   pestañas. Y no era un caso aislado — hay 83 usos de `hidden` en las nueve pantallas, todos
   expuestos al mismo defecto. El dossier ya lo había aprendido por su cuenta; aquí faltaba.
   Va antes que todo lo demás a propósito: es una garantía, no un estilo. */
[hidden]{display:none!important}

:root{--surf-d:#0E0E0E;--surf-d2:#080808;
  --font:"Geist","Inter",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --paper:#E7EDF0;
  --ink-1:#0B1A21;--ink-2:#3D4A50;--ink-3:#5F6C72;--ink-4:#9FAAAF;
  /* ink-3 #5F6C72: AA sobre el PEOR fondo real, el papel (4,59:1) — no sobre tarjeta.
     El valor anterior #647279 daba 4,21:1 sobre papel y solo 4,97 sobre tarjeta blanca:
     el comentario viejo medía contra la superficie equivocada (auditoría 27-07, B3).
     ink-4 #9FAAAF = 2,01:1 → SOLO decorativo (filetes, iconos), JAMÁS texto. */
  --hair:rgba(11,26,33,.08);--grid:rgba(11,26,33,.05);--track:rgba(11,26,33,.09);
  --tick:rgba(11,26,33,.14);--tick-2:rgba(11,26,33,.28);
  --cy:#12A3C6;--cy-b:#26C6E6;--cy-tx:#08738C;/* AA sobre papel 4,63:1 (el anterior #0C7A93 daba 4,21) */--cy-soft:rgba(18,163,198,.10);--cy-trail:rgba(18,163,198,.20);
  --ok:#1E8A50;--ok-bg:rgba(46,158,104,.11);--ok-tx:#197945;--ok-d:#46C07E;--ok-map:#1FC468;
  /* --ok-map: el verde de la CARTOGRAFÍA (founder 28-07). Tercer contexto del semáforo, junto a
     --ok (claro) y --ok-d (oscuro): el mapa es una superficie propia, siempre oscura, que no vira
     con el tema y que carga mucha información encima; el aro del pin necesita más energía que un
     LED sobre tarjeta. 8,42:1 sobre el disco del pin.
     SOLO para el mapa. Como texto sobre claro da 2,16:1 → jamás fuera de la cartografía. *//* ok-tx #197945: AA sobre papel 4,60:1 (el anterior #1A7B46 daba 4,48 — fallaba por 0,02) */
  /* SEMÁFORO ÚNICO (founder 04-08): el mismo verde, naranja y rojo para TODO lo que puntúe —
     numerales de score, píldoras TOP/MEDIO/BAJO y aros de los pines—, en claro y en oscuro, sin
     primos por pantalla. Valores: los intensos que ya usaba el popup del mapa. */
  --sem-top:#1FC468;--sem-medio:#F0A03A;--sem-bajo:#F07A6C;
  /* Pareja TINTA de cada señal: mismo tono, oscurecido hasta pasar 4,5:1 sobre el papel claro
     (medido: 4,52 · 4,51 · 4,51). Se usa SOLO para TEXTO sobre fondo claro — numerales y píldoras
     de la lista. La señal se queda para aros, LEDs y tintes, donde el contraste no es de lectura.
     En tema oscuro la tinta ES la señal: ahí ya da 6,7-8,5:1 (mismo método que --warn-tx). */
  --sem-top-tinta:#168848;--sem-medio-tinta:#AC660D;--sem-bajo-tinta:#E32D17;
  --dn:#D8463A;--dn-bg:rgba(199,91,64,.10);--dn-tx:#B23A30; /* rojo texto firmado en Mis Activos · AA 4.86:1 sobre tinte */
  --warn:#E08A1E;--warn-tx:#8F5710; /* ámbar texto AA 4.89:1 sobre tinte (transversal 22-07); el LED sigue siendo --warn */
  --d-1:#F4F8F9;--d-2:#B9C6CB;--d-3:#7E9098;--d-hair:rgba(255,255,255,.10);--d-2bg:rgba(255,255,255,.07);
  --card-sh:0 24px 60px rgba(11,26,33,.07),0 2px 6px rgba(11,26,33,.04);
  --tip-sh:0 12px 30px rgba(11,26,33,.34);
  /* superficies tokenizadas (antes literales #fff/rgba blanco) — flip por tema (E1 23-07) */
  --card-1:rgba(255,255,255,.97);--card-2:rgba(250,252,253,.88); /* gradiente de .card */
  --field:rgba(255,255,255,.6);--field-f:#fff; /* superficie de campo .finput (E3) — flip por tema */
  --glass:rgba(255,255,255,.75);   /* chip/pill/srch translúcidos (unifica .72/.75/.78) */
  --nav-on:#fff;                   /* nav/seg activo sólido */
  --sunk:rgba(11,26,33,.05);       /* pista hundida: track de .seg, .dp.nt, .cbtn */
  --ring:rgba(255,255,255,.65);--ring-h:rgba(255,255,255,.75); /* aro claro de .card */
  --hi:#fff;                       /* filo superior inset */
  --marker-ring:#fff;              /* aro que separa el punto de la banda (reg-marker) */
  --bar-bg:#E0E8EB;                /* pista de barra (funnel, micro-barras) */
  --th-bg:#FAFCFD;                 /* cabecera de tabla (.rt th) — un paso sobre el papel/card (Ola2) */
  --cy-chip-tx:#0A6980;            /* texto cian sobre --cy-soft (chips) — AA 5,5:1 en claro; vira en oscuro (Ola2, escalado barrido-c) */
  --dots:rgba(11,26,33,.045);--glow-1:rgba(18,163,198,.10);--glow-2:rgba(18,163,198,.06);--sheen:rgba(255,255,255,.65); /* capas del body */
  /* ---- MOVIMIENTO canónico del sistema (frente D · 23-07) · theme-agnóstico ---- */
  --ease:cubic-bezier(.2,.8,.2,1);        /* estándar: menú, modales, hovers, la mayoría */
  --ease-rise:cubic-bezier(.22,.61,.36,1);/* entrada de página (eme2Rise) */
  --dur-pop:.16s;                          /* apertura menú/modal: fade + scale .98→1 = 160ms */
  --dur-hover:.15s;                        /* estados/hovers: 150ms (banda 150-180) */
  /* ---- superficie SÓLIDA de modal (frente D · 23-07) · sin alfa: no deja pasar el texto de detrás ---- */
  --pm-surf-1:#FFFFFF;--pm-surf-2:#FBFCFD; /* claro: dos paradas opacas — cero bleed */
  --pm-ov:rgba(6,10,12,.45);               /* velo del overlay en claro + blur(2px) */
}
/* ============================================================================
   TEMA OSCURO (E1 23-07) · patrón calcado de los wireframes del producto:
   @media = preferencia del sistema · [data-theme] = el toggle explícito gana.
   Obsidiana (--surf-d/d2, --d-1..3, --d-hair, --d-2bg) NO cambia: ancla en ambos
   temas. Cian/semáforo conservan HUE; -tx sube de luminancia para AA sobre las
   superficies nuevas (pares medidos, ver reporte). Paper deriva del hue de --ink-1.
   ============================================================================ */
@media (prefers-color-scheme:dark){:root{
  --paper:#0F1518;
  --sem-top-tinta:var(--sem-top);--sem-medio-tinta:var(--sem-medio);--sem-bajo-tinta:var(--sem-bajo);
  --ink-1:#E9EFF1;--ink-2:#AEBABF;--ink-3:#7F8D93;--ink-4:#586268;
  --hair:rgba(255,255,255,.09);--grid:rgba(255,255,255,.06);--track:rgba(255,255,255,.11);
  --tick:rgba(255,255,255,.16);--tick-2:rgba(255,255,255,.30);
  --cy-tx:#4FD0EC;--cy-soft:rgba(38,198,230,.14);--cy-trail:rgba(38,198,230,.22);
  --ok-bg:rgba(46,158,104,.18);--ok-tx:#50C98A;
  --dn-bg:rgba(216,70,58,.20);--dn-tx:#EF7A69;
  --warn-tx:#EDB24A;
  --card-1:#192126;--card-2:#151C20;
  --field:rgba(255,255,255,.07);--field-f:rgba(255,255,255,.11); /* superficie de campo .finput (E3) — flip por tema */
  --glass:rgba(255,255,255,.055);--nav-on:rgba(255,255,255,.09);--sunk:rgba(255,255,255,.06);
  --ring:rgba(255,255,255,.09);--ring-h:rgba(255,255,255,.13);--hi:rgba(255,255,255,.06);--marker-ring:#192126;
  --bar-bg:rgba(255,255,255,.10);
  --th-bg:#1A2327;                 /* cabecera de tabla en oscuro (gate 23-07: #1D272C daba 4,45:1 con ink-3 → #1A2327 = 4,67:1 AA) */
  --cy-chip-tx:#4FD0EC;            /* texto cian de chip en oscuro — par cy-tx/cy-soft 6,85:1 medido (Ola2) */
  --dots:rgba(255,255,255,.04);--glow-1:rgba(18,163,198,.06);--glow-2:rgba(18,163,198,.04);--sheen:rgba(255,255,255,.02);
  --card-sh:0 24px 60px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
  --tip-sh:0 12px 30px rgba(0,0,0,.5);
  --pm-surf-1:#192126;--pm-surf-2:#151C20;--pm-ov:rgba(6,10,12,.6); /* modal sólido oscuro (frente D) */
}}
:root[data-theme="dark"]{
  --sem-top-tinta:var(--sem-top);--sem-medio-tinta:var(--sem-medio);--sem-bajo-tinta:var(--sem-bajo); /* el toggle fuerza oscuro aunque el sistema esté en claro (espejo del @media) */
  --paper:#0F1518;
  --ink-1:#E9EFF1;--ink-2:#AEBABF;--ink-3:#7F8D93;--ink-4:#586268;
  --hair:rgba(255,255,255,.09);--grid:rgba(255,255,255,.06);--track:rgba(255,255,255,.11);
  --tick:rgba(255,255,255,.16);--tick-2:rgba(255,255,255,.30);
  --cy-tx:#4FD0EC;--cy-soft:rgba(38,198,230,.14);--cy-trail:rgba(38,198,230,.22);
  --ok-bg:rgba(46,158,104,.18);--ok-tx:#50C98A;
  --dn-bg:rgba(216,70,58,.20);--dn-tx:#EF7A69;
  --warn-tx:#EDB24A;
  --card-1:#192126;--card-2:#151C20;
  --field:rgba(255,255,255,.07);--field-f:rgba(255,255,255,.11); /* superficie de campo .finput (E3) — flip por tema */
  --glass:rgba(255,255,255,.055);--nav-on:rgba(255,255,255,.09);--sunk:rgba(255,255,255,.06);
  --ring:rgba(255,255,255,.09);--ring-h:rgba(255,255,255,.13);--hi:rgba(255,255,255,.06);--marker-ring:#192126;
  --bar-bg:rgba(255,255,255,.10);
  --th-bg:#1A2327;                 /* cabecera de tabla en oscuro (gate 23-07: #1D272C daba 4,45:1 con ink-3 → #1A2327 = 4,67:1 AA) */
  --cy-chip-tx:#4FD0EC;            /* texto cian de chip en oscuro — par cy-tx/cy-soft 6,85:1 medido (Ola2) */
  --dots:rgba(255,255,255,.04);--glow-1:rgba(18,163,198,.06);--glow-2:rgba(18,163,198,.04);--sheen:rgba(255,255,255,.02);
  --card-sh:0 24px 60px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
  --tip-sh:0 12px 30px rgba(0,0,0,.5);
  --pm-surf-1:#192126;--pm-surf-2:#151C20;--pm-ov:rgba(6,10,12,.6); /* modal sólido oscuro (frente D) */
}
:root[data-theme="light"]{ /* el toggle fuerza claro aunque el sistema esté en oscuro (re-afirma la base) */
  --sem-top-tinta:#168848;--sem-medio-tinta:#AC660D;--sem-bajo-tinta:#E32D17;
  --paper:#E7EDF0;
  --ink-1:#0B1A21;--ink-2:#3D4A50;--ink-3:#5F6C72;--ink-4:#9FAAAF;/* espejo del :root base — si divergen, el toggle de tema resucita los valores viejos */
  --hair:rgba(11,26,33,.08);--grid:rgba(11,26,33,.05);--track:rgba(11,26,33,.09);
  --tick:rgba(11,26,33,.14);--tick-2:rgba(11,26,33,.28);
  --cy-tx:#08738C;--cy-soft:rgba(18,163,198,.10);--cy-trail:rgba(18,163,198,.20);
  --ok-bg:rgba(46,158,104,.11);--ok-tx:#197945;
  --dn-bg:rgba(199,91,64,.10);--dn-tx:#B23A30;
  --warn-tx:#8F5710;
  --card-1:rgba(255,255,255,.97);--card-2:rgba(250,252,253,.88);
  --field:rgba(255,255,255,.6);--field-f:#fff; /* superficie de campo .finput (E3) — flip por tema */
  --glass:rgba(255,255,255,.75);--nav-on:#fff;--sunk:rgba(11,26,33,.05);
  --ring:rgba(255,255,255,.65);--ring-h:rgba(255,255,255,.75);--hi:#fff;--marker-ring:#fff;
  --bar-bg:#E0E8EB;
  --th-bg:#FAFCFD;                 /* cabecera de tabla — un paso sobre el papel/card (Ola2) */
  --cy-chip-tx:#0A6980;            /* texto cian de chip en claro (Ola2) */
  --dots:rgba(11,26,33,.045);--glow-1:rgba(18,163,198,.10);--glow-2:rgba(18,163,198,.06);--sheen:rgba(255,255,255,.65);
  --card-sh:0 24px 60px rgba(11,26,33,.07),0 2px 6px rgba(11,26,33,.04);
  --tip-sh:0 12px 30px rgba(11,26,33,.34);
  --pm-surf-1:#FFFFFF;--pm-surf-2:#FBFCFD;--pm-ov:rgba(6,10,12,.45); /* modal sólido claro (frente D) */
}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:var(--font);color:var(--ink-1);background:var(--paper);
  background-image:
    radial-gradient(var(--dots) 1px,transparent 1px),
    radial-gradient(1100px 700px at 90% -8%,var(--glow-1),transparent 58%),
    radial-gradient(900px 700px at -6% 110%,var(--glow-2),transparent 55%),
    linear-gradient(180deg,var(--sheen),transparent 400px);
  background-size:26px 26px,auto,auto,auto;background-attachment:fixed}
@media (min-resolution:2dppx){body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-family:var(--mono)}
.mono{font-family:var(--mono)}
/* TODAS las cifras en Geist Mono, sin excepción (founder 02-08). Los `[data-eme]` son los huecos
   de dato del cableado: por definición llevan una cifra o un texto corto de dato, así que heredan
   la familia sin tener que ir marcando `.num` uno a uno — eran 17 los que se habían quedado sin
   marca en el Resumen y la mezcla de dos tipografías se veía a simple vista.
   `:not()` deja fuera los que son texto de verdad (dirección, municipio, provincia, motivos),
   que sí van en la voz de la marca. */
[data-eme]:not([data-eme*="direccion"]):not([data-eme*="municipio"]):not([data-eme*="provincia"]):not([data-eme*="porque"]):not([data-eme*="motivo"]):not([data-eme*="situacion"]):not([data-eme*="fuente"]):not([data-eme*="nivel"]):not([data-eme*="proveedor"]):not([data-eme*="confianza"]):not([data-eme*="estado"]):not([data-eme*="tema"]){
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-family:var(--mono)}

/* ---------- shell / sidebar / topbar ---------- */
.shell{display:grid;grid-template-columns:200px 1fr;max-width:1440px;margin:0 auto;min-height:100vh;
  transition:grid-template-columns .24s var(--ease)}
.side{padding:34px 16px 34px 28px}
.side .brand{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 46px 0;padding-left:13px}
/* el logo lleva a Resumen (kit): el <a> es transparente al layout (display:contents), así el img y
   el .mini siguen siendo los flex-items del brand y los selectores de abajo valen sin cambios */
.side .brand .brand-link{display:contents}
.side .brand .brand-link>*{cursor:pointer}
.side .brand img{display:block;width:142px;height:auto}
/* el logo es un <img> con el relleno quemado a #161616: en oscuro quedaba a 1,05:1 sobre el
   papel, o sea invisible. brightness(0) invert(1) lo lleva a blanco puro sea cual sea su tinta. */
@media(prefers-color-scheme:dark){.side .brand img{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .side .brand img{filter:brightness(0) invert(1)}
:root[data-theme="light"] .side .brand img{filter:none}
.nav a{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:500;color:var(--ink-3);text-decoration:none;padding:10px 13px;border-radius:12px;margin-bottom:2px;transition:color .15s}
.nav a:hover{color:var(--ink-2)}
.nav a.on{background:var(--nav-on);color:var(--ink-1);box-shadow:0 8px 22px rgba(11,26,33,.09)}
.nav a svg{stroke:currentColor;opacity:.7;flex:none;stroke-linecap:round;stroke-linejoin:round}
.nav a.on svg{stroke:var(--cy);opacity:1}
.nav .sep{height:1px;background:var(--hair);margin:16px 10px}

/* ============================================================================
   MENÚ PLEGABLE (26-07) · el lateral se reduce a una barra de iconos y el
   contenido se queda con el ancho que suelta. Todo se apoya en el grid de
   .shell: al cambiar la primera columna, el 1fr del .main crece SOLO — no hay
   que recalcular nada por pantalla. La clase la pone el kit en .shell.
   El objetivo es que plegado y desplegado se vean IGUAL de acabados: el icono
   activo conserva su pastilla, su cian y su sombra; solo desaparece el rótulo.
   ============================================================================ */
.shell.side-min{grid-template-columns:76px 1fr}
.side-min .side{padding:34px 14px 34px 14px}
.side-min .side .brand{flex-direction:column;align-items:center;gap:16px;padding-left:0;margin-bottom:38px}
.side-min .side .brand img{display:none}
.side .brand .mini{display:none;width:30px;height:auto;flex:none;color:var(--ink-1)}
.side .brand .mini polygon{fill:currentColor} /* inline y con currentColor → vale en ambos temas sin filtros */
.side-min .side .brand .mini{display:block}
/* rótulos: el JS los envuelve en .lbl para poder ocultarlos (en el HTML son texto suelto).
   nowrap NO es opcional: al pasar de nodo de texto a <span> se convierten en flex items, que sí
   parten — «Mis Activos» y «Capa de IA» se rompían en dos líneas con el menú DESPLEGADO. */
.nav a .lbl{white-space:nowrap}
.side-min .nav a{justify-content:center;gap:0;padding:11px 0}
.side-min .nav a .lbl{display:none}
.side-min .nav .sep{margin:16px 6px}
/* botón de plegado · discreto, 44px de área táctil, gira el chevron según el estado */
.side-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border:none;border-radius:9px;background:transparent;color:var(--ink-3);cursor:pointer;position:relative;
  transition:background .15s,color .15s}
.side-toggle::before{content:"";position:absolute;inset:-7px} /* área táctil 44×44 sin engordar el botón */
.side-toggle:hover{background:var(--sunk);color:var(--ink-1)}
.side-toggle:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.side-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s var(--ease)}
.side-min .side-toggle svg{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.shell,.side-toggle svg{transition:none}}
/* por debajo de 980 el lateral ya se comporta distinto en cada pantalla: no forzamos el plegado */
@media(max-width:980px){.shell.side-min{grid-template-columns:200px 1fr}
  .side-min .side{padding:34px 16px 34px 28px}
  .side-min .side .brand{flex-direction:row;align-items:center;padding-left:13px}
  .side-min .side .brand img{display:block}.side-min .side .brand .mini{display:none}
  .side-min .nav a{justify-content:flex-start;gap:11px;padding:10px 13px}
  .side-min .nav a .lbl{display:inline}}
.main{padding:30px 40px 90px 26px;min-width:0}
.topbar{display:flex;gap:12px;align-items:center;margin-bottom:38px}
.srch{flex:1;display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-3);background:var(--glass);border-radius:999px;padding:12px 18px;box-shadow:0 2px 14px rgba(11,26,33,.06),inset 0 1px 0 var(--hi)}
.srch.ai{flex:1.15}
.srch svg{stroke:var(--ink-3);flex:none;stroke-linecap:round;stroke-linejoin:round}
.srch.ai svg{stroke:var(--cy-tx)}
.srch .k{margin-left:auto;font-size:10.5px;color:var(--ink-3);border:1px solid var(--hair);border-radius:5px;padding:2px 6px;font-family:var(--mono)}
/* La barra de Thomas es un <form>: el botón y el input heredan la píldora, no pintan la suya.
   (Antes vivía inline en seis pantallas y Activos se quedó sin ella: input nativo blanco.) */
.srch.ai button{background:none;border:none;padding:0;display:flex;cursor:pointer;flex:none}
.srch.ai input{flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;color:var(--ink-1)}
.srch.ai input::placeholder{color:var(--ink-3)}
.avatar{width:35px;height:35px;border-radius:50%;background:linear-gradient(135deg,#C9D6DA,#8FA6AE);flex:none;box-shadow:0 2px 10px rgba(11,26,33,.10)}

/* ---------- jerarquía tipográfica (5 escalones) ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:40px}
.page-head h1{font-size:28px;font-weight:600;letter-spacing:-.015em;margin:0}
.page-head .sub{font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:8px}
.ghead{display:flex;align-items:baseline;gap:12px;margin:52px 2px 18px}
.ghead:first-of-type{margin-top:0}
.ghead .gt{font-size:17px;font-weight:600;letter-spacing:-.01em}
.ghead .gq{font-size:12px;color:var(--ink-3)}
.ghead .gr{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.hctl{display:flex;align-items:center;gap:10px}

/* ---------- controles ---------- */
.seg{display:inline-flex;background:var(--sunk);border-radius:999px;padding:3px}
.seg button{font-size:12px;font-weight:500;color:var(--ink-3);background:none;border:none;padding:8px 14px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--nav-on);color:var(--ink-1);box-shadow:0 2px 8px rgba(11,26,33,.10)}
.chip{font-size:12px;font-weight:500;color:var(--ink-2);background:var(--glass);border-radius:999px;padding:9px 14px;box-shadow:0 2px 10px rgba(11,26,33,.05)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--ink-2);background:var(--glass);border-radius:999px;padding:8px 13px;box-shadow:0 3px 12px rgba(11,26,33,.06),inset 0 1px 0 var(--hi)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--cy-b)}
.dp{display:inline-flex;gap:4px;align-items:center;white-space:nowrap;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;font-weight:600;border-radius:7px;padding:5px 9px}
.dp.up{background:var(--ok-bg);color:var(--ok-tx)}
.dp.dn{background:var(--dn-bg);color:var(--dn-tx)}
.dp.nt{background:var(--sunk);color:var(--ink-3)}
.dp.cy{background:var(--cy-soft);color:var(--cy-tx)}
.lnk{font-size:12px;font-weight:500;color:var(--cy-tx);text-decoration:none}

/* ---------- componentes subidos al kit (Ola2 23-07 · antes replicados en local) ----------
   Se suben con el estado AFINADO (ley §9): color:var(--paper) y hover brightness = theme-safe
   (fix del login) · pistas y pastillas con token, no blanco a fuego. Las pantallas con local
   propio siguen ganando por orden de fuente (aditivo, no rompe). */
/* botón de acción · pri (tinta) / sec (glass) / danger (rojo) · radio 999, ≥44px táctil */
.sbtn{font-family:var(--mono);font-size:11.5px;font-weight:600;border:none;border-radius:999px;padding:11px 14px;min-height:44px;cursor:pointer;transition:filter .15s,background .15s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.sbtn.pri{background:var(--ink-1);color:var(--paper)} /* paper = inverso de ink-1 en ambos temas */
.sbtn.sec{background:var(--glass);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair)}
.sbtn.danger{background:var(--dn);color:#fff} /* --dn no vira (hue semántico) → blanco AA en ambos temas */
.sbtn:hover:not(:disabled){filter:brightness(.92)}
.sbtn:disabled{opacity:.4;cursor:default}
.sbtn:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
/* pestañas de vista · pastilla para la activa · ≥44px táctil (canon: la de Cargas) */
.vtabs{display:inline-flex;background:var(--sunk);border-radius:10px;padding:3px;margin-bottom:16px}
.vtabs button{font-size:12.5px;font-weight:500;color:var(--ink-3);background:none;border:none;padding:9px 16px;border-radius:8px;cursor:pointer;min-height:44px;transition:color .15s}
.vtabs button.on{background:var(--ink-1);color:var(--paper)} /* pastilla tinta · paper = inverso theme-safe */
.vtabs button:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
/* spinner de espera · se detiene con reduced-motion */
.spin{width:38px;height:38px;border-radius:50%;border:3px solid var(--cy-soft);border-top-color:var(--cy);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}}
/* marca «fase 2» · patrón transversal (mercado/capa-ia) · .d sobre Obsidiana · .chart flotante */
.fase2{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);line-height:1;white-space:nowrap;vertical-align:middle}
.fase2::before{content:"";width:6px;height:6px;border-radius:2px;border:1px solid var(--ink-4);flex:none}
.fase2.d{color:var(--d-3)}
.fase2.d::before{border-color:rgba(255,255,255,.22)}
.fase2.chart{position:absolute;top:2px;right:2px;background:var(--card-1);border-radius:6px;padding:3px 7px;box-shadow:inset 0 0 0 1px var(--hair)} /* --card-1 vira por tema (gate 23-07) */

/* ---------- card premium (glass detrás del texto) ---------- */
.card{position:relative;border-radius:22px;padding:26px 28px;isolation:isolate;
  box-shadow:0 0 0 1px var(--ring),0 24px 60px rgba(11,26,33,.08),0 3px 8px rgba(11,26,33,.045);
  transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ring-h),0 30px 70px rgba(11,26,33,.10),0 4px 10px rgba(11,26,33,.05)}
/* fondo blanco limpio, idéntico al del Resumen (sin glow cian ni radial) */
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:linear-gradient(180deg,var(--card-1),var(--card-2));
  backdrop-filter:blur(30px) saturate(1.15);-webkit-backdrop-filter:blur(30px) saturate(1.15);
  box-shadow:inset 0 1px 0 var(--hi)}
.card>*{position:relative;z-index:1}
/* cabecera de card con objeto (icono + botón) */
.ct{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.ct.obj{align-items:center;gap:12px;margin-bottom:14px}
.ct .t{font-size:15px;font-weight:600;letter-spacing:-.005em}
.ct .u{font-size:12px;font-weight:400;color:var(--ink-3)}
.ct .tt{display:flex;flex-direction:column;gap:2px}
.ico{position:relative;width:34px;height:34px;border-radius:11px;background:var(--cy-soft);flex:none}
.ico svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;stroke:var(--cy-tx);stroke-linecap:round;stroke-linejoin:round}
.cbtn{position:relative;width:32px;height:32px;border-radius:50%;background:var(--sunk);margin-left:auto;flex:none;cursor:pointer}
.cbtn svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;stroke:var(--ink-2);stroke-linecap:round;stroke-linejoin:round}

/* ---------- KPI oscura (Obsidiana) ---------- */
.kd{position:relative;border-radius:20px;padding:20px 22px 24px;color:var(--d-1);overflow:hidden;
  background:linear-gradient(165deg,var(--surf-d),var(--surf-d2)); /* Obsidiana neutra — deuda teal saldada (transversal 22-07) */
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 22px 54px rgba(11,26,33,.28),inset 0 1px 0 rgba(255,255,255,.07)}
.kd::before{content:"";position:absolute;inset:0;background:radial-gradient(300px 160px at 88% -12%,rgba(38,198,230,.14),transparent 60%)}
.kd>*{position:relative}
.kd .l{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#7E9098}
.kd .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:34px;font-weight:300;letter-spacing:-.015em;color:#fff;margin-top:11px;line-height:1;display:flex;align-items:baseline;gap:7px}
.kd .v u{text-decoration:none;font-size:14px;color:#7E9098;font-weight:400}
.kd .v .kdp{font-size:11px;font-weight:600;color:#8DE4F6;background:rgba(38,198,230,.14);border-radius:7px;padding:4px 8px;margin-left:auto}
.kd .sub{font-size:11.5px;color:#B9C6CB;margin-top:9px}

/* ---------- funnel ---------- */
.funnel{display:grid;grid-template-columns:repeat(4,1fr)}
.fp{display:flex;flex-direction:column;padding:6px 24px 4px}
.fp:first-child{padding-left:0}
.fp+.fp{border-left:1px solid var(--hair)}
.fp .fn{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.fp .fn b{color:var(--ink-3);font-weight:500;font-family:var(--mono);font-size:11px}
.fp .fv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:44px;font-weight:300;letter-spacing:-.02em;line-height:1;min-height:46px}
.fp .fbar{height:5px;border-radius:99px;background:var(--bar-bg);margin-top:14px;overflow:hidden}
.fp .fbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cy),var(--cy-b))}
.fp .fs{font-size:11.5px;font-weight:400;color:var(--ink-3);margin-top:12px;line-height:1.7}
.fp .fs b{color:var(--ink-1);font-weight:500;font-variant-numeric:tabular-nums}
.miniband{position:relative;height:34px;margin-top:12px}
.miniband .ticks{position:absolute;left:0;right:0;top:22px;height:6px;background-image:linear-gradient(90deg,var(--tick) 0 1px,transparent 1px);background-size:calc(100%/22) 100%;background-repeat:repeat-x}
.miniband .bnd{position:absolute;top:13px;height:7px;border-radius:3.5px;background:var(--cy)}
.miniband .lbl{position:absolute;top:0;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--ink-3);transform:translateX(-50%);white-space:nowrap}

/* ---------- regla graduada ---------- */
.reg{margin-bottom:20px}.reg:last-child{margin-bottom:0}
.reg-head{display:flex;align-items:baseline;gap:9px;margin-bottom:12px}
.reg-label{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--ink-2)}
.reg-conf{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;font-weight:500;color:var(--ink-3)}
.reg-conf i{width:5px;height:5px;border-radius:1px;border:1px solid var(--ink-4);display:inline-block}
.reg-conf i.on{background:var(--ink-3);border-color:var(--ink-3)}
.reg-value{margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;font-weight:500}
.reg-value u{text-decoration:none;font-size:.6em;color:var(--ink-3);margin-left:2px}
.reg-track{position:relative;height:44px}
.reg-ticks{position:absolute;left:0;right:0;top:28px;height:4px;background-image:linear-gradient(90deg,var(--tick) 0 1px,transparent 1px);background-size:calc(100%/36) 100%;background-repeat:repeat-x}
.reg-ticks.mj{height:8px;background-image:linear-gradient(90deg,var(--tick-2) 0 1px,transparent 1px);background-size:calc(100%/6) 100%}
.reg-band{position:absolute;top:18px;height:6px;border-radius:3px;background:var(--cy)}
.reg-marker{position:absolute;top:0;width:0}
.reg-marker .head{position:absolute;left:-6.5px;top:14.5px;width:13px;height:13px;border-radius:50%;background:var(--ink-1);box-shadow:0 0 0 2.5px var(--marker-ring),0 2px 7px rgba(11,26,33,.35)} /* punto-sobre-banda, calcado del .px del VVE — canon redondo 22-07 */
.reg-marker .notch{display:none} /* el círculo ES el marcador — sin palo, como el .px del VVE */
.reg-edge{position:absolute;top:1px;font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--cy-tx);transform:translateX(-50%)}
.reg-cap{position:absolute;top:36px;font-family:var(--mono);font-size:9.5px;font-weight:500;color:var(--ink-3);transform:translateX(-50%)}
.reg-cap.lo{left:0;transform:none}.reg-cap.hi{right:0;left:auto}

/* ---------- peine (medidor de instrumento) ---------- */
.comb{position:relative;height:30px}
.comb .trail{position:absolute;left:0;top:5px;height:20px;border-radius:3px;background:linear-gradient(90deg,rgba(18,163,198,.03),var(--cy-trail))}
.comb .base{position:absolute;left:0;right:0;top:5px;height:20px;background-image:linear-gradient(90deg,var(--tick) 0 1px,transparent 1px);background-size:calc(100%/44) 100%;background-repeat:repeat-x}
.comb .needle{position:absolute;top:0;width:2.5px;height:30px;border-radius:1px;background:var(--cy);transform:translateX(-50%)}
.comb .gmark{position:absolute;top:3px;width:2px;height:24px;background:var(--ink-3);opacity:.6;transform:translateX(-50%)}

/* ---------- radar ---------- */
.rlab{font-family:var(--mono);font-size:10px;font-weight:500;fill:var(--ink-2)}
.rlab.hole{fill:var(--ink-4)}
/* la cifra de cada punta: del color del TRAZO, no del rótulo — el número es del activo, el
   rótulo es de la rejilla. Sin color nuevo: es el mismo --cy que ya pinta el polígono. */
.rval{font-family:var(--mono);font-size:9.5px;font-weight:600;fill:var(--cy);font-variant-numeric:tabular-nums}

/* ---------- ejes / leyendas / anotaciones (gráficas SVG) ---------- */
.axis-lab{font-family:var(--mono);font-size:9.5px;font-weight:500;fill:var(--ink-4)}
.anno{font-family:var(--mono);font-size:10.5px;font-weight:500;fill:var(--ink-2)}
.anno-cy{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--cy-tx)}
.legend{display:flex;gap:16px;font-size:11.5px;color:var(--ink-3);margin-top:12px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;border-top:2px solid;display:inline-block}
.legend i.dash{border-top-style:dotted}
.pillmark{position:absolute;font-family:var(--mono);font-size:11px;font-weight:600;border-radius:999px;padding:5px 10px;transform:translate(-50%,-50%)}
.pillmark.up{background:rgba(46,158,104,.16);color:var(--ok-tx);box-shadow:0 3px 10px rgba(46,158,104,.2)}
.pillmark.nt{background:rgba(199,154,46,.18);color:var(--warn-tx);box-shadow:0 3px 10px rgba(199,154,46,.2)}
.pillmark.dn{background:rgba(199,91,64,.16);color:var(--dn-tx);box-shadow:0 3px 10px rgba(199,91,64,.2)}

/* ---------- píldora de delta flotante (.zpill) + tooltip de línea (.ztip) · usados por EME2.line full ---------- */
.zpill{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:10.5px;font-weight:600;padding:5px 11px;border-radius:999px;white-space:nowrap;color:var(--ok-tx);background:rgba(30,138,80,.14);box-shadow:0 0 0 6px rgba(30,138,80,.05)}
.ztip{position:absolute;transform:translate(-50%,-100%);pointer-events:none;opacity:0;transition:opacity .12s;font-family:var(--mono);font-size:10.5px;color:#fff;background:var(--surf-d);padding:6px 10px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 20px rgba(11,26,33,.3);z-index:6}
.ztip b{color:var(--cy-b)}
.ztip .f{color:var(--d-3)}

/* ---------- marcadores ◆ real / ◇ estimado ---------- */
.vruler{position:relative;height:26px}
.vruler .ln{position:absolute;left:0;right:0;top:13px;height:1px;background:var(--track)}
.vruler .tk{position:absolute;left:0;right:0;top:9px;height:9px;background-image:linear-gradient(90deg,var(--tick) 0 1px,transparent 1px);background-size:calc(100%/32) 100%;background-repeat:repeat-x;opacity:.75}
.vruler .est,.vruler .real{position:absolute;top:7.5px;width:11px;height:11px;border-radius:50%;box-sizing:border-box;transform:translateX(-50%)}
.vruler .est{background:#fff;border:1.6px solid var(--ink-4)}
.vruler .real{background:var(--cy);box-shadow:0 0 0 3px rgba(18,163,198,.16),0 1px 4px rgba(18,163,198,.35)}

/* ---------- stat-célula / mini-línea / micro-barras ---------- */
.mbars{display:flex;gap:5px;align-items:flex-end;height:36px}
.mbars i{flex:1;max-width:7px;border-radius:99px;background:var(--bar-bg);display:block;cursor:crosshair;transition:filter .15s ease}
.mbars i.on{background:var(--cy);box-shadow:0 2px 8px rgba(18,163,198,.35)}

/* ---------- card oscura de acento (copiloto / salud) ---------- */
.dcard{position:relative;border-radius:22px;padding:28px 32px;color:var(--d-1);isolation:isolate;
  background:linear-gradient(168deg,var(--surf-d),var(--surf-d2)); /* teal retirado 23-07: Obsidiana neutra en TODO (censo: ninguna firmada usaba el teal) */
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 74px rgba(11,26,33,.30),inset 0 1px 0 rgba(255,255,255,.07)}
.dcard::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 300px at 12% 0%,rgba(38,198,230,.10),transparent 60%)}
.dcard>*{position:relative;z-index:1}
.dcard .dl{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--d-3);margin-bottom:12px}
.ai-panel{margin-top:22px;border-radius:16px;padding:20px 22px;color:var(--d-1);position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--surf-d),var(--surf-d2));box-shadow:0 0 0 1px rgba(255,255,255,.05),0 14px 34px rgba(11,26,33,.22)}
.ai-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(320px 150px at 90% -20%,rgba(38,198,230,.06),transparent 60%)}
.ai-panel>*{position:relative}
.ai-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--d-3);margin-bottom:12px}
.ai-ico{position:relative;width:24px;height:24px;border-radius:8px;background:rgba(38,198,230,.14);flex:none}
.ai-ico svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block}
.ai-tx{font-size:13px;line-height:1.7;color:var(--d-2)}
.ai-tx b{color:#fff;font-weight:500}
.ai-btn{margin-top:15px;font-family:var(--mono);font-size:12px;font-weight:600;color:#0B1A21;background:#EAF1F3;border:none;border-radius:999px;padding:11px 18px;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.28)}

/* arco de dientes */
.arc-c{position:relative;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.arc-c:hover{transform:scale(1.025)}
.arc-c svg rect{transition:filter .2s ease}
.arc-c:hover svg rect.lit{filter:drop-shadow(0 0 2.5px rgba(38,198,230,.6))}

/* ---------- tooltip global (hover) ---------- */
.gtip{position:fixed;pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 6px)) scale(.9);
  transition:opacity .14s ease,transform .2s cubic-bezier(.2,.85,.25,1),left .07s linear,top .07s linear;
  background:var(--surf-d,#0E0E0E);color:#fff;font-family:var(--mono);font-size:11.5px;font-weight:500;padding:8px 12px;border-radius:9px;z-index:9999;white-space:nowrap;box-shadow:var(--tip-sh)}
.gtip.on{opacity:1;transform:translate(-50%,calc(-100% - 12px)) scale(1)}
.gtip b{color:var(--cy-b);font-weight:600}
.gtip .gl{display:block;font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:#8B979C;margin-bottom:3px}

/* ---------- MOTION de entrada ---------- */
@keyframes eme2Rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.main>*{animation:eme2Rise .52s var(--ease-rise) both}
.main>*:nth-child(1){animation-delay:0s}.main>*:nth-child(2){animation-delay:.055s}
.main>*:nth-child(3){animation-delay:.11s}.main>*:nth-child(4){animation-delay:.165s}
.main>*:nth-child(5){animation-delay:.22s}.main>*:nth-child(6){animation-delay:.275s}
.main>*:nth-child(7){animation-delay:.33s}.main>*:nth-child(8){animation-delay:.385s}
.main>*:nth-child(9){animation-delay:.44s}.main>*:nth-child(10){animation-delay:.495s}
.main>*:nth-child(11){animation-delay:.55s}.main>*:nth-child(12){animation-delay:.605s}
.main>*:nth-child(13){animation-delay:.66s}.main>*:nth-child(14){animation-delay:.715s}
@media (prefers-reduced-motion:reduce){.main>*{animation:none!important}}

svg .hit{cursor:crosshair}

/* ---------- responsive ---------- */
/* ═══ El menú en tablet/móvil: CAJÓN deslizante, no amputación (founder 11-08). La regla
   anterior era `.side{display:none}` a ≤1150 — la app entera se quedaba SIN NAVEGACIÓN en iPad.
   Mismo markup del lateral, otra materia: panel fijo que entra desde la izquierda sobre un velo,
   abierto por la hamburguesa que el kit inyecta en la topbar. Todas las pantallas lo heredan. */
.menu-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border:none;border-radius:11px;background:var(--glass);color:var(--ink-2);cursor:pointer;position:relative;
  box-shadow:0 2px 14px rgba(11,26,33,.06),inset 0 1px 0 var(--hi)}
.menu-toggle::before{content:"";position:absolute;inset:-4px}  /* área táctil 46×46 */
.menu-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.menu-toggle:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.velo-menu{display:none;position:fixed;inset:0;z-index:59;background:rgba(8,8,8,.42);
  opacity:0;pointer-events:none;transition:opacity .22s ease;backdrop-filter:blur(2px)}
@media(max-width:1150px){
  .shell{grid-template-columns:1fr}
  .menu-toggle{display:inline-flex}
  .velo-menu{display:block}
  body.menu-abierto .velo-menu{opacity:1;pointer-events:auto}
  .side{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:264px;z-index:60;
    background:var(--paper);padding:30px 20px 30px 24px;overflow:auto;
    box-shadow:1px 0 0 var(--hair),0 24px 60px rgba(8,8,8,.35);
    transform:translateX(-103%);transition:transform .26s var(--ease,cubic-bezier(.2,.8,.2,1))}
  body.menu-abierto .side{transform:none}
  /* dentro del cajón, el menú va SIEMPRE desplegado: el plegado a mini es cosa del escritorio */
  .shell.side-min .side{padding:30px 20px 30px 24px}
  .side-min .nav a .lbl{display:inline}
  .side-min .nav a{justify-content:flex-start;gap:11px;padding:10px 13px}
  .side-min .side .brand img{display:block}.side-min .side .brand .mini{display:none}
  .side .side-toggle{display:none}   /* plegar no significa nada en un cajón: se cierra con el velo */
  .funnel{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.side,.velo-menu{transition:none}}
/* topbar móvil: los dos buscadores apilados a ancho completo (transversal 22-07) */
@media(max-width:720px){.topbar{flex-wrap:wrap}.srch,.srch.ai{flex:1 1 100%}}

/* ============================================================================
   MENÚ DE PERFIL · auto-inyectado en el .avatar del topbar (patrón initTema).
   Cero cambios por pantalla · dropdown anclado + 5 modales (Perfil · Cuenta y
   privacidad · Uso · Notificaciones · Cerrar sesión). Migra el contenido de
   Cargas·Cuenta (tema · % fiscal · marca · RGPD). Todo por token: el gate mide
   dark SIEMPRE. Esc/click-fuera/foco atrapado/aria/44px. (frente D · 23-07)
   ============================================================================ */
/* campo de formulario canónico (biblia §8) — sube al kit; las pantallas con
   .finput local siguen ganando por orden de fuente (aditivo, no rompe) */
.finput{width:100%;font-family:var(--font);font-size:13px;color:var(--ink-1);background:var(--field);border:1px solid var(--hair);border-radius:12px;padding:11px 14px;min-height:44px;transition:border-color .15s,background .15s}
.finput::placeholder{color:var(--ink-3)}
.finput:focus{outline:none;background:var(--field-f);border-color:var(--cy)}
.finput:focus-visible{outline:2px solid var(--cy);outline-offset:1px}

/* avatar clicable · hit ≥44px sin cambiar su tamaño visual (35px canon) */
.avatar{position:relative;cursor:pointer}
.avatar::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.avatar:focus-visible{outline:2px solid var(--cy);outline-offset:3px}

/* ---- dropdown anclado ---- */
.eme2-pm-menu{position:fixed;z-index:10000;min-width:238px;padding:7px;border-radius:16px;
  background:var(--card-1);box-shadow:var(--tip-sh),0 0 0 1px var(--hair);
  opacity:0;transform:translateY(-6px) scale(.98);transition:opacity var(--dur-pop),transform var(--dur-pop) var(--ease)}
.eme2-pm-menu.on{opacity:1;transform:none}
.eme2-pm-head{display:flex;align-items:center;gap:11px;padding:9px 10px 12px;border-bottom:1px solid var(--hair);margin-bottom:5px}
.eme2-pm-head .av2{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#C9D6DA,#8FA6AE);flex:none}
.eme2-pm-head .pn{font-size:13px;font-weight:600;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eme2-pm-head .pe{font-size:11px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eme2-pm-item{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;padding:0 12px;border:none;border-radius:11px;background:none;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:500;color:var(--ink-2);text-align:left;transition:background var(--dur-hover),color var(--dur-hover)}
.eme2-pm-item:hover{background:var(--sunk);color:var(--ink-1)}
.eme2-pm-item:focus-visible{outline:2px solid var(--cy);outline-offset:-2px}
.eme2-pm-item svg{stroke:var(--ink-3);flex:none;stroke-linecap:round;stroke-linejoin:round;fill:none}
.eme2-pm-item:hover svg{stroke:var(--cy-tx)}
.eme2-pm-item.danger{color:var(--dn-tx)}
.eme2-pm-item.danger svg{stroke:var(--dn-tx)}
.eme2-pm-item.danger:hover{background:var(--dn-bg);color:var(--dn-tx)}
.eme2-pm-sep{height:1px;background:var(--hair);margin:5px 8px}

/* ---- overlay + modal ---- */
.eme2-pm-ov{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--pm-ov);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-pop)}
.eme2-pm-ov.on{opacity:1}
.eme2-pm-modal{width:100%;max-width:480px;max-height:88vh;overflow:auto;border-radius:20px;padding:24px;
  background:linear-gradient(180deg,var(--pm-surf-1),var(--pm-surf-2));box-shadow:var(--card-sh),0 0 0 1px var(--ring);
  transform:scale(.98);transition:transform var(--dur-pop) var(--ease)}
.eme2-pm-ov.on .eme2-pm-modal{transform:none}
.eme2-pm-top{display:flex;align-items:flex-start;gap:12px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--hair)}
.eme2-pm-top .tt{flex:1;min-width:0}
.eme2-pm-top h2{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0;color:var(--ink-1)}
.eme2-pm-top .ms{font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.eme2-pm-x{position:relative;width:36px;height:36px;margin-top:-4px;border-radius:50%;background:var(--sunk);border:none;cursor:pointer;flex:none;display:grid;place-items:center}
.eme2-pm-x::before{content:"";position:absolute;inset:-5px}
.eme2-pm-x svg{stroke:var(--ink-2);stroke-linecap:round;stroke-linejoin:round;fill:none}
.eme2-pm-x:hover{filter:brightness(.95)}
.eme2-pm-x:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.eme2-pm-field{margin-bottom:14px}
.eme2-pm-field:last-child{margin-bottom:0}
.eme2-pm-lbl{display:block;font-size:11.5px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.eme2-pm-note{font-size:11px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.eme2-pm-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--hair)}
.eme2-pm-row:last-of-type{border-bottom:none}
.eme2-pm-row .tx{flex:1;min-width:0}
.eme2-pm-row .pn{font-size:13px;font-weight:600;color:var(--ink-1)}
.eme2-pm-row .pd{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.5}
.eme2-pm-row .seg,.eme2-pm-row .r{margin-left:auto;flex:none}
.eme2-pm-row .seg button{min-height:44px;padding:11px 16px}
.eme2-pm-row .finput{margin-left:auto;flex:none}
/* foto de perfil con «+» */
.eme2-pm-photo{display:flex;align-items:center;gap:15px;margin-bottom:20px}
.eme2-pm-photo .ph{position:relative;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#C9D6DA,#8FA6AE);background-size:cover;background-position:center;flex:none}
.eme2-pm-photo .ph .add{position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;background:var(--ink-1);border:2px solid var(--card-1);cursor:pointer;display:grid;place-items:center;padding:0}
.eme2-pm-photo .ph .add svg{stroke:var(--paper);stroke-linecap:round;stroke-linejoin:round;fill:none}
.eme2-pm-photo .ph .add:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.eme2-pm-photo .cap{font-size:11.5px;color:var(--ink-3);line-height:1.55}
/* dropzone compacta (patrón .drop de Cargas) */
/* Color de marca: la misma fila de la tarjeta, con el HEX a la derecha y su muestra al lado.
   El control es monocromo; el único color de la fila es el del propio swatch. */
.eme2-pm-color{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair)}
.eme2-pm-color:last-of-type{border-bottom:none}
.eme2-pm-color .cn{flex:1;font-size:13px;font-weight:600;color:var(--ink-1)}   /* mismo rótulo que .eme2-pm-row .pn */
.eme2-pm-color input{width:104px;font-family:var(--mono);font-size:12px;text-transform:uppercase;
  padding:7px 9px;border:1px solid var(--hair);border-radius:9px;background:transparent;color:var(--ink-1)}
.eme2-pm-color input:focus-visible{outline:2px solid var(--cy);outline-offset:1px}
.eme2-pm-color input:invalid{border-color:var(--dn-tx)}
.eme2-pm-color input.ancho{width:230px;text-transform:none;font-family:inherit;font-size:12.5px}
.eme2-pm-color .sw{width:26px;height:26px;border-radius:7px;flex:none;
  box-shadow:inset 0 0 0 1px var(--hair);background:var(--sw,transparent)}
.eme2-pm-drop{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--track);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .16s,background .16s;margin-bottom:10px}
.eme2-pm-drop:hover{border-color:var(--cy);background:var(--cy-soft)}
.eme2-pm-drop:has(:focus-visible){border-color:var(--cy);outline:2px solid var(--cy);outline-offset:1px}
.eme2-pm-drop .di{width:38px;height:38px;border-radius:11px;background:var(--cy-soft);display:grid;place-items:center;flex:none}
.eme2-pm-drop .di svg{stroke:var(--cy-tx);stroke-linecap:round;stroke-linejoin:round;fill:none}
.eme2-pm-drop .dtx{flex:1;min-width:0}
.eme2-pm-drop .dn{display:block;font-size:12.5px;font-weight:600;color:var(--ink-1)}
.eme2-pm-drop .dd{display:block;font-size:11px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eme2-pm-drop .dok{display:none;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ok-tx);flex:none}
.eme2-pm-drop .dok svg{stroke:var(--ok-tx);stroke-linecap:round;stroke-linejoin:round;fill:none}
.eme2-pm-drop.done{border-style:solid;border-color:var(--ok)}
.eme2-pm-drop.done .dok{display:inline-flex}
.eme2-pm-drop .dver{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--cy-tx);text-decoration:none;flex:none;margin-left:10px}
.eme2-pm-drop .dver:hover{text-decoration:underline}
.eme2-pm-drop .dver:focus-visible{outline:2px solid var(--cy);outline-offset:2px;border-radius:3px}
/* uso · rediseño nivel «pantalla de uso» (frente 1 · 23-07, cableado 22-08): la barra
   protagonista, cifras Sans 300 (canon §3), labels mono versal, respiro generoso. Sin tablas
   densas. */
/* la barra como protagonista */
.eme2-pm-plan{margin-bottom:24px}
.eme2-pm-plan .pl{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.eme2-pm-plan .pct{font-variant-numeric:tabular-nums;font-size:42px;font-weight:300;color:var(--ink-1);line-height:1;letter-spacing:-.02em;display:inline-flex;align-items:baseline;margin-bottom:16px}
.eme2-pm-plan .pct u{text-decoration:none;font-size:.44em;color:var(--ink-3);margin-left:4px}
.eme2-pm-bar{height:10px;border-radius:99px;background:var(--sunk);overflow:hidden}
.eme2-pm-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cy),var(--cy-b))}
.eme2-pm-plan .pleg{font-size:12px;color:var(--ink-3);margin-top:11px}
.eme2-pm-plan .pleg b{color:var(--ink-1);font-weight:600;font-variant-numeric:tabular-nums}
/* desglose en 2 stat-células separadas por hairline */
.eme2-pm-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);padding-top:20px}
.eme2-pm-stats .st{padding:0 20px}
.eme2-pm-stats .st:first-child{padding-left:0}
.eme2-pm-stats .st+.st{border-left:1px solid var(--hair)}
.eme2-pm-stats .sv{font-variant-numeric:tabular-nums;font-size:28px;font-weight:300;color:var(--ink-1);line-height:1;letter-spacing:-.01em}
.eme2-pm-stats .sl{font-size:11.5px;color:var(--ink-2);margin-top:9px;line-height:1.4}
.eme2-pm-stats .ss{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:6px;font-variant-numeric:tabular-nums}
.eme2-pm-usefoot{font-size:11px;color:var(--ink-3);margin-top:20px;line-height:1.5}
/* ============================================================================
   SWITCH CANÓNICO · pieza ÚNICA de todo el SaaS. Cualquier interruptor del
   producto usa esto — no se reimplementa por pantalla (26-07: el .fsw de los
   filtros de Activos había derivado a 38×22 con knob gris y márgenes
   asimétricos, y se veía distinto del de Notificaciones).
     · `.eme2-pm-sw` → el del kit (menú de perfil), estado por [aria-pressed]
     · `.eme2-sw`    → para pantallas, estado por `.on` en él o en su PADRE
   Geometría milimétrica: carril 40×24, knob 18×18 en top/left 3, tx 16 → el
   knob jamás sobresale y los márgenes quedan 3/3 en ambos extremos.
   ============================================================================ */
.eme2-pm-sw,.eme2-sw{position:relative;width:40px;height:24px;border-radius:999px;background:var(--sunk);border:none;cursor:pointer;flex:none;transition:background .16s}
.eme2-pm-sw::before,.eme2-sw::before{content:"";position:absolute;inset:-10px -6px} /* hit: 52×44 */
.eme2-pm-sw::after,.eme2-sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(11,26,33,.5),0 1px 2px rgba(11,26,33,.35);transition:transform .16s} /* gate 23-07: aro de tinta — sin él, el knob blanco era 1,10:1 sobre el carril claro en reposo */
.eme2-pm-sw[aria-pressed="true"],.eme2-pm-sw[aria-checked="true"],.eme2-sw.on,.on>.eme2-sw{background:var(--cy)} /* 26-07: carril ON al cian de marca (decisión del founder) */
.eme2-pm-sw[aria-pressed="true"]::after,.eme2-pm-sw[aria-checked="true"]::after,.eme2-sw.on::after,.on>.eme2-sw::after{transform:translateX(16px);box-shadow:0 1px 2px rgba(11,26,33,.28),0 2px 6px rgba(11,26,33,.20)} /* en ON, elevación en vez de aro: el aro de tinta existe para separar del carril CLARO del OFF; sobre el carril cian se leía como stroke negro (rechazado por el founder 26-07). Patrón iOS/Material: el knob flota */
.eme2-pm-sw:focus-visible,.eme2-sw:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
/* pie de acción + rgpd (migrado de Cargas) */
.eme2-pm-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.eme2-pm-rgpd{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.6;color:var(--ink-2);background:var(--sunk);border-radius:12px;padding:12px 15px;margin-top:16px}
.eme2-pm-rgpd b{color:var(--ink-1);font-weight:600}
.eme2-pm-rgpd svg{stroke:var(--ink-2);flex:none;margin-top:2px;stroke-linecap:round;stroke-linejoin:round;fill:none}
@media(prefers-reduced-motion:reduce){.eme2-pm-menu,.eme2-pm-ov,.eme2-pm-modal,.eme2-pm-sw,.eme2-pm-sw::after,.eme2-sw,.eme2-sw::after{transition:none}}
@media(max-width:520px){.eme2-pm-modal{padding:20px}.eme2-pm-plan .pct{font-size:36px}.eme2-pm-stats .st{padding:0 13px}.eme2-pm-stats .sv{font-size:24px}}

/* ═══ GATE DE ACCESIBILIDAD · reparación del 27-07 (auditoría extrema) ═══════
   Se resuelve en el KIT, no pantalla a pantalla: así cae en las 9 de una vez. */

/* §10 · área táctil ≥44px. Antes se aplicaba pieza a pieza y quedaban fuera
   .side-toggle (30), .avatar (35), .nav a (38), .seg button (30-36), .hbtn (38),
   .mchip (32), .epri/.esec (34-36), .abtn (32) y los zooms del mapa (34).
   La ampliación va por pseudo-elemento: NO cambia ni un píxel del diseño firmado. */
.side-toggle,.avatar,.nav a,.seg button,.hbtn,.mchip,.epri,.esec,.abtn,.dbtn,.ai-btn,
.enrbtn,.cbtn,.pbtn,.sbtn,.lnk-btn{position:relative}
.side-toggle::after,.avatar::after,.nav a::after,.seg button::after,.hbtn::after,
.mchip::after,.epri::after,.esec::after,.abtn::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);
  pointer-events:auto}

/* §10 · foco visible de la casa en TODO lo enfocable, no en 10 reglas sueltas.
   Antes: 13 de 14 controles caían al aro por defecto del navegador, que además
   cambia de color entre Chrome, Safari y Firefox. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--cy);outline-offset:2px;border-radius:4px}

/* §1.1 · el SEMÁFORO como TEXTO usa los tonos -tx, nunca los del LED.
   --warn (#E08A1E) da 2,27:1 sobre papel: vale para un LED, jamás para una cifra.
   El score en ámbar medía 2,47:1 (auditoría A7). */
.score.med,.sc.med,.tier.med{color:var(--warn-tx)}
.score.low,.sc.low,.tier.low{color:var(--dn-tx)}

/* §1.7 · el hueco honesto NO se pinta de rojo: rojo significa riesgo, no «no lo sé». */
.score.off,.sc.off{color:var(--ink-3);font-family:var(--mono)}

/* ═══ REPARACIÓN 27-07 · SUBPANTALLAS DE USUARIO (auditoría frente E) ═══════════

   E7 · el desplegable dejaba TRANSPARENTAR el texto de la página en tema claro:
   --card-1 lleva alfa (.97). El token opaco ya existía para esto. */
.eme2-pm-menu{background:var(--pm-surf-1)}

/* E3 · «Cambiar foto» medía 26×26: el único control del sistema bajo 44.
   OJO: NO tocar `position` — ya es absolute con right/bottom (línea 490) y ponerlo
   relative lo devolvía al flujo, saltando a la esquina superior izquierda (28-07).
   El área táctil se amplía solo con el pseudo-elemento. */
.eme2-pm-photo .ph .add::after{content:"";position:absolute;inset:-9px;border-radius:50%}

/* E6 · el segmentado daba 4,44:1 en claro (el par «opción no seleccionada» del kit,
   así que arrastraba a todo sitio donde el .seg viva sobre superficie casi blanca). */
.seg button{color:var(--ink-2)}
.seg button[aria-pressed="true"],.seg button.on{color:var(--ink-1)}

/* E8 · la subpantalla se veía DISTINTA según desde qué pantalla se abriera: el CSS local
   de cada una carga después del kit y le gana. El menú de perfil es universal: blinda
   sus propias medidas para que no dependa de dónde se invoque. */
.eme2-pm-modal .sbtn{flex:0 0 auto}
.eme2-pm-modal .finput{border-radius:8px;padding:10px 12px;font-size:13px}
.eme2-pm-modal .fase2{font-weight:400;text-transform:none;letter-spacing:0}

/* E4 · aviso de validación del perfil */
.eme2-pm-aviso{margin-top:10px;padding:9px 11px;border-radius:6px;background:var(--dn-bg);
  color:var(--dn-tx);font-size:12px;line-height:1.45}
.eme2-pm-modal .finput[aria-invalid="true"]{border-color:var(--dn);box-shadow:0 0 0 2px var(--dn-bg)}
/* un campo que se enseña pero no se edita (el correo de la sesión) tiene que PARECERLO */
.eme2-pm-modal .finput[readonly]{color:var(--ink-3);background:var(--sunk);cursor:default}
/* lo que aún no existe se ve apagado y no responde (notificaciones, fase 2) */
.eme2-pm-sw:disabled{opacity:.4;cursor:default}

/* E2 · las zonas de subida NO existían para el teclado: el <label> no es enfocable y el
   input va oculto. Se les da rol de botón real. */
.eme2-pm-drop{cursor:pointer}
.eme2-pm-drop:focus-visible{outline:2px solid var(--cy);outline-offset:2px}

/* ═══ WOW · micro-interacciones (28-07) ═══════════════════════════════════════
   Nada decorativo: cada una refuerza algo que el producto quiere decir.
   Todas mueren con prefers-reduced-motion (bloque al final). */

/* 1 · El viraje de tema deja de ser un salto seco. Solo superficies y tinta —NO el
   semáforo, que debe cambiar al instante para no dar sensación de dato «en tránsito»— */
body,.main,.card,.shell,.side,.topbar{
  transition:background-color .26s cubic-bezier(.2,.8,.2,1),color .26s cubic-bezier(.2,.8,.2,1)}

/* 2 · La fila de la lista se levanta al pasar por encima: el cursor «encuentra» el activo */
.arow{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s cubic-bezier(.2,.8,.2,1),background .16s}
.arow:hover{transform:translateY(-1px)}

/* 3 · Los chips y píldoras acusan la pulsación: sin esto un clic no se siente */
.chip,.fchip,.dchip,.mchip,.qchip,.hpill,.sbtn,.abtn,.hbtn,.pbtn{
  transition:transform .12s cubic-bezier(.2,.8,.2,1),background .15s,border-color .15s,color .15s}
.chip:active,.fchip:active,.dchip:active,.mchip:active,.qchip:active,
.sbtn:active,.abtn:active,.hbtn:active,.pbtn:active{transform:scale(.97)}

/* 4 · El LED de confianza respira una vez al entrar: el dato «se enciende» */
@keyframes eme2Led{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.led,.leds i,.cf i{animation:eme2Led .34s cubic-bezier(.2,.8,.2,1) both}
.leds i:nth-child(2),.cf i:nth-child(2){animation-delay:.07s}
.leds i:nth-child(3),.cf i:nth-child(3){animation-delay:.14s}

/* 5 · El foco no aparece: crece. Refuerza que el teclado es ciudadano de primera */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  transition:outline-offset .12s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:reduce){
  body,.main,.card,.shell,.side,.topbar,.arow,
  .chip,.fchip,.dchip,.mchip,.qchip,.hpill,.sbtn,.abtn,.hbtn,.pbtn{transition:none!important}
  .arow:hover{transform:none}
  .chip:active,.fchip:active,.dchip:active,.mchip:active,.qchip:active,
  .sbtn:active,.abtn:active,.hbtn:active,.pbtn:active{transform:none}
  .led,.leds i,.cf i{animation:none}
}