/* =====================================================================
   SERECI · CENTRO DE INTEGRIDAD CÍVICA — sistema de diseño
   ---------------------------------------------------------------------
   Software público moderno: superficies claras, jerarquía tipográfica,
   sombras discretas para separar planos, color reservado al estado.
   Todo deriva de las variables de este bloque. Ninguna pantalla inventa
   su propia escala: si un valor no está aquí, no debería existir abajo.
   Sin fuentes ni recursos remotos (§7.2 · §23).
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root{
  /* --- Ritmo. Toda distancia es múltiplo de --u; la densidad mueve --u
         y con ella el producto entero, sin tocar una sola pantalla. --- */
  --u:8px;
  --e-1:calc(var(--u)*.5);   /* 4  — separación interna mínima            */
  --e-2:var(--u);            /* 8  — entre elementos hermanos             */
  --e-3:calc(var(--u)*1.5);  /* 12 — relleno de controles                 */
  --e-4:calc(var(--u)*2);    /* 16 — relleno de tarjeta                   */
  --e-5:calc(var(--u)*3);    /* 24 — relleno amplio, canaleta de rejilla  */
  --e-6:calc(var(--u)*4);    /* 32 — entre secciones                      */
  --e-7:calc(var(--u)*6);    /* 48 — entre bloques mayores                */
  --e-8:calc(var(--u)*8);    /* 64 — respiración de página                */
  --gutter:var(--e-5);       /* canaleta única de la rejilla de 12        */
  --fila-y:10px;             /* alto de fila: lo único que mueve densidad */

  /* --- Radios. Sobrio: el back-office más recto, el portal más amable. */
  --r-xs:3px;
  --r-sm:4px;
  --r:6px;                   /* radio por defecto del back-office         */
  --r-md:8px;
  --r-lg:10px;               /* superficies ciudadanas                    */
  --r-pill:999px;

  /* --- Tipografía. Dos pesos en todo el producto: 400 y 600 (§23.4). --- */
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-0:.8125rem;           /* 13px — meta, chips                        */
  --fs-1:.9375rem;           /* 15px — texto base                         */
  --fs-2:1.125rem;           /* 18px — h3                                 */
  --fs-3:1.375rem;           /* 22px — h2                                 */
  --fs-4:2.125rem;           /* 34px — h1                                 */
  --fs-5:2rem;               /* 32px — KPI (nunca más que el h1)          */
  --lh-1:1.2;                /* titulares                                 */
  --lh-2:1.35;               /* subtítulos y celdas densas                */
  --lh-3:1.55;               /* texto corrido                             */
  --lh-4:1.7;                /* bloques de lectura larga                  */
  --tracking:.02em;
  --tracking-caps:.07em;     /* versalitas: etiquetas de grupo            */

  /* --- Planos. fondo < superficie < elevada; hundida = pozo (campos). - */
  --fondo:#0B111A;
  --fondo-2:#101724;
  --fondo-3:#18212F;
  --superficie:#111925;
  --elevada:#172131;
  --hundida:#0D131C;
  --linea:#334155;
  --linea-fuerte:#475569;
  --velo:rgba(4,7,12,.62);   /* fondo de modal y paleta                   */

  /* --- Texto. Tres niveles, los tres AA sobre superficie. --- */
  --texto:#F3F6FA;
  --texto-2:#B8C3D1;
  --texto-3:#8695AD;
  --texto-sobre-color:#0B1017;

  /* --- Color de estado. Palabra + color, nunca color solo (§14 · §61). */
  --rojo:#F2685C;            /* bloqueo                                   */
  --amarillo:#F5C13D;        /* atención                                  */
  --verde:#3FBF77;           /* conforme                                  */
  --cian:#5EC8F8;            /* informativo, enlaces                      */
  --naranja:#FF8A4C;         /* acento institucional                      */
  --acero:#7A8899;           /* neutro sin carga                          */
  --acento:var(--naranja);
  --acento-solido:#FF8A4C;   /* fondo del botón primario                  */
  --rojo-solido:#F2685C;
  --amarillo-solido:#F5C13D;
  --verde-solido:#3FBF77;
  --cian-solido:#5EC8F8;
  --sobre-solido:#0B1017;    /* texto sobre cualquier fondo sólido        */

  /* --- Tintes de estado: fondo apenas insinuado, nunca un bloque. --- */
  --rojo-s:rgba(242,104,92,.14);
  --amarillo-s:rgba(245,193,61,.14);
  --verde-s:rgba(63,191,119,.13);
  --cian-s:rgba(94,200,248,.12);
  --acento-s:rgba(255,138,76,.13);

  /* --- Foco visible: obligatorio, nunca sustituido por nada. --- */
  --foco:#8BD5FF;
  --foco-halo:rgba(139,213,255,.28);
  --foco-ancho:2px;
  --foco-sep:2px;

  /* --- Sombras: separan planos, no decoran. --- */
  --sombra-0:none;
  --sombra-1:0 1px 2px rgba(0,0,0,.34);
  --sombra-2:0 2px 6px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.30);
  --sombra-3:0 12px 32px rgba(0,0,0,.46),0 2px 8px rgba(0,0,0,.34);
  --sombra-foco:0 0 0 3px var(--foco-halo);

  /* --- Estructura. --- */
  --ancho-max:1280px;
  --ancho-lectura:62ch;
  --ancho-form:560px;
  --ancho-ciudadano:1280px;
  --sidebar-w:252px;
  --topbar-h:52px;
  --panel-w:min(520px,100vw);
  --navmovil-h:60px;
  --toque:44px;              /* zona táctil mínima (WCAG 2.2 AA)          */

  /* --- Movimiento: 150–220 ms, entrada y progreso. Nada más. --- */
  --t:170ms;
  --t-l:220ms;
  --ease:cubic-bezier(.2,.6,.3,1);

  --scale:1;

  /* Popovers, menús y listas nativas — siguen el tema activo. */
  --popover-bg:#111827;
  --popover-fg:#F8FAFC;
  --popover-border:#475569;
  --popover-selected-bg:#334155;
  --popover-selected-fg:#FFFFFF;
}

html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

/* ---------------------------------------------------------------------
   1.2 TEMA CLARO — no es una inversión: es un tema construido.
   Fondo gris muy claro, superficies blancas, filetes finos y sombras
   suaves que separan los planos donde el color ya no puede hacerlo.
   --------------------------------------------------------------------- */
[data-theme="light"]{
  --fondo:#F5F7FA;
  --fondo-2:#FFFFFF;
  --fondo-3:#EDF1F7;
  --superficie:#FFFFFF;
  --elevada:#F0F3F7;
  --hundida:#F7F9FC;
  --linea:#E2E7EE;
  --linea-fuerte:#C9D2DE;
  --velo:rgba(15,23,42,.42);

  --texto:#172033;
  --texto-2:#617087;
  --texto-3:#7A8799;
  --texto-sobre-color:#FFFFFF;

  --rojo:#B42318;
  --amarillo:#92610A;
  --verde:#15803D;
  --cian:#0E6FA8;
  --naranja:#9A3412;
  --acero:#5A6779;
  --acento:#9A3412;
  --acento-solido:#C2410C;
  --rojo-solido:#B42318;
  --amarillo-solido:#92610A;
  --verde-solido:#15803D;
  --cian-solido:#0E6FA8;
  --sobre-solido:#FFFFFF;

  --rojo-s:rgba(180,35,24,.08);
  --amarillo-s:rgba(146,97,10,.10);
  --verde-s:rgba(21,128,61,.09);
  --cian-s:rgba(14,111,168,.08);
  --acento-s:rgba(194,65,12,.08);

  --foco:#0B5FA0;
  --foco-halo:rgba(11,95,160,.22);

  --sombra-1:0 1px 2px rgba(15,23,42,.06);
  --sombra-2:0 1px 3px rgba(15,23,42,.09),0 4px 12px rgba(15,23,42,.06);
  --sombra-3:0 12px 32px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.08);

  --popover-bg:#FFFFFF;
  --popover-fg:#172033;
  --popover-border:#E2E7EE;
  --popover-selected-bg:#F0F3F7;
  --popover-selected-fg:#172033;
}

/* ---------------------------------------------------------------------
   1.3 ESCALA Y DENSIDAD
   [data-sala] amplía todo para proyección; [data-densidad] regula cuánta
   información cabe, nunca cuánto grita (§23.6). Los tres valores son los
   que emite js/app.js: operativo · analitico · sala.
   --------------------------------------------------------------------- */
[data-sala="1"]{--scale:1.25}

/* Sugerencia de comodidad por perfil. Se declara antes que la densidad
   explícita para que la elección del usuario siempre gane. Sólo actúa si
   la coquilla llega a exponer data-rol; hoy es inerte y no estorba. */
[data-rol="ciudadano"]{--u:9px;--fila-y:13px}
[data-rol="oficial"]{--u:8px;--fila-y:11px}
[data-rol="supervisor"]{--u:7px;--fila-y:9px}
[data-rol="dntic"],[data-rol="auditor"]{--u:6px;--fila-y:7px}
[data-rol="direccion"]{--u:9px;--fila-y:12px}

[data-densidad="operativo"]{--u:8px;--fila-y:11px}
[data-densidad="sala"]{--u:9px;--fila-y:13px}
[data-densidad="analitico"]{--u:6px;--fila-y:6px}
[data-densidad="analitico"] .list li{padding:6px 0}
[data-densidad="analitico"] table.t td{padding:5px 8px}
[data-densidad="analitico"] .sec{margin-top:calc(var(--u)*3)}
[data-densidad="analitico"] .metrica{padding:var(--e-3)}
[data-densidad="analitico"] .metrica .valor{font-size:var(--fs-3)}

/* =====================================================================
   2. BASE
   ===================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:calc(16px * var(--scale));-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--fondo);
  color:var(--texto);
  font-size:var(--fs-1);
  line-height:var(--lh-3);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
img,svg{max-width:100%}
a{color:var(--cian);text-decoration:none}
a[data-nav]{cursor:pointer}
a[data-nav]:hover{text-decoration:underline}
.autonoma{font-family:var(--mono);font-size:.9em;color:var(--texto-2);line-height:var(--lh-4)}
.autonoma .dot{background:var(--verde)}

/* §23.4 — dos pesos en toda la aplicación: 400 y 600. Ninguno más. */
h1{font-size:var(--fs-4);font-weight:600;line-height:var(--lh-1);letter-spacing:-.01em}
h2{font-size:var(--fs-3);font-weight:600;line-height:var(--lh-2);letter-spacing:-.005em}
h3{font-size:var(--fs-2);font-weight:600;line-height:var(--lh-2)}
h4,strong,b{font-weight:600}
.mono,code,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.95em}
kbd{background:var(--elevada);border:1px solid var(--linea);border-radius:var(--r-sm);padding:1px 6px;font-size:.82em;color:var(--texto-2)}

/* Foco: siempre visible, siempre nítido. Nunca outline:none sin relevo. */
:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-only:focus-visible{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;z-index:200;background:var(--superficie);border:1px solid var(--linea-fuerte);border-radius:var(--r);padding:var(--e-2) var(--e-3);box-shadow:var(--sombra-3)}
/* Oculta a la vista, presente para el teclado y el lector de pantalla.
   Nunca display:none: eso también lo retiraría del foco. */
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

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

/* =====================================================================
   3. ESTRUCTURA DE LA COQUILLA
   ===================================================================== */
#app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:100vh}

#topbar{
  grid-column:1/-1;position:relative;z-index:40;
  display:flex;align-items:center;gap:var(--e-4);
  padding:var(--e-2) var(--e-4);
  min-height:var(--topbar-h);
  background:var(--superficie);
  border-bottom:1px solid var(--linea);
  box-shadow:var(--sombra-1);
}
/* Área de respeto = altura del logotipo, sin recolorear ni deformar (§7.5). */
#brand{display:flex;align-items:center;gap:var(--e-4);white-space:nowrap;padding-right:var(--e-4)}
#brand img{height:28px;width:auto;display:block;filter:none}
#brand .sep{width:1px;height:24px;background:var(--linea);margin:0 var(--e-1)}
#brand .leady{font-weight:600;letter-spacing:var(--tracking)}
#brand .sub{color:var(--texto-2);font-size:.92em}
#brand .logo-ph{font-family:var(--mono);color:var(--texto-3);border:1px dashed var(--linea);padding:2px 6px;border-radius:var(--r-sm)}

#context{flex:1;min-width:0;display:flex;align-items:center;gap:var(--e-2);color:var(--texto-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#context .ctx-id{font-family:var(--mono);color:var(--texto);font-weight:600}

#topbar .tools{display:flex;gap:var(--e-1);align-items:center;white-space:nowrap;flex:none}
.tbtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 11px;min-height:36px;
  border-radius:var(--r);border:1px solid transparent;
  color:var(--texto-2);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.tbtn:hover{background:var(--elevada);color:var(--texto)}
.tbtn[aria-pressed="true"]{border-color:var(--linea-fuerte);color:var(--texto);background:var(--elevada)}
.tbtn[disabled]{opacity:.45;cursor:not-allowed}
.perfil-demo{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r);color:var(--texto-2)}
@media (max-width:900px){.tbtn .pres-only{display:none}}

#sidebar{
  background:var(--superficie);
  border-right:1px solid var(--linea);
  padding:var(--e-2) 0 var(--e-4);
  display:flex;flex-direction:column;gap:1px;
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
}
#sidebar .who{display:flex;align-items:center;gap:var(--e-2);padding:var(--e-3) var(--e-3) var(--e-3);border-bottom:1px solid var(--linea);margin-bottom:var(--e-1)}
#sidebar .who>div{min-width:0}
#sidebar .who strong{display:block;line-height:var(--lh-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sidebar .who span{display:block;color:var(--texto-2);font-size:var(--fs-0);line-height:var(--lh-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sidebar .who .ctxrol{display:block;font-size:var(--fs-0);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--texto-3);margin-bottom:2px}
#sidebar .who span:nth-of-type(3){display:none}
#sidebar .grp{padding:var(--e-3) var(--e-3) var(--e-1);color:var(--texto-3);font-size:var(--fs-0);letter-spacing:var(--tracking-caps);text-transform:uppercase}
#sidebar a{
  display:flex;align-items:center;gap:10px;
  padding:0 var(--e-3);min-height:46px;
  color:var(--texto-2);
  border-left:3px solid transparent;
  border-radius:0 var(--r) var(--r) 0;
  margin-right:var(--e-2);
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
#sidebar a .ico{flex:none}
#sidebar a .et{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sidebar a:hover{background:var(--elevada);color:var(--texto);text-decoration:none}
#sidebar a[aria-current="page"]{color:var(--texto);font-weight:600;border-left-color:var(--acento);background:var(--acento-s)}
#sidebar a .n{font-family:var(--mono);font-size:.82em;color:var(--texto-3);background:var(--elevada);border-radius:var(--r-pill);padding:1px 7px;min-width:22px;text-align:center}
#sidebar a .n.alert{color:var(--sobre-solido);background:var(--amarillo-solido)}

#main,.content-shell{
  padding:var(--e-6) var(--e-6) var(--e-8);
  max-width:var(--ancho-max);
  width:100%;min-width:0;
  margin-inline:auto;
  overflow-x:hidden;
}
#main:focus{outline:none}
#main:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-4px}

#footer{
  grid-column:1/-1;
  border-top:1px solid var(--linea);
  padding:var(--e-2) var(--e-4);
  color:var(--texto-3);font-size:var(--fs-0);
  display:flex;justify-content:space-between;gap:var(--e-2);flex-wrap:wrap;
  background:var(--superficie);
}
#watermark{position:fixed;right:12px;bottom:12px;font-family:var(--mono);font-size:10px;color:var(--texto-3);opacity:.55;pointer-events:none;z-index:40;letter-spacing:.04em}
[data-sala="1"] #watermark{font-size:var(--fs-1)}

/* =====================================================================
   4. REJILLA DE 12 COLUMNAS Y PRIMITIVAS DE COMPOSICIÓN
   ===================================================================== */
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.col-2{grid-column:span 2}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}
.col-12{grid-column:span 12}

.screen{display:block}
.screen>header{margin-bottom:var(--e-5)}
.screen>header h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen>header p{color:var(--texto-2);margin-top:var(--e-1);max-width:var(--ancho-lectura);line-height:var(--lh-3)}
.muted{color:var(--texto-2)}
.faint{color:var(--texto-3)}
.sec{margin-top:var(--e-6)}
.sec>h2,.sec>h3{margin-bottom:var(--e-3)}
.row{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:var(--e-2);max-width:var(--ancho-form)}
.stack.wide{max-width:720px}
.cols{display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}

.surface{
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--r-md);
  padding:var(--e-4);
  box-shadow:var(--sombra-1);
}
.elev{background:var(--elevada);border-radius:var(--r);padding:var(--e-3) var(--e-4)}
hr.thin{border:0;border-top:1px solid var(--linea);margin:var(--e-4) 0}
.pre{font-family:var(--mono);white-space:pre-wrap;background:var(--hundida);border:1px solid var(--linea);padding:var(--e-3);border-radius:var(--r);font-size:.92em;line-height:var(--lh-3);color:var(--texto-2)}
.big{font-size:var(--fs-4);font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;line-height:1}

/* --- Etiquetas heredadas (.tag) — mismo lenguaje que .chip. --- */
.tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.78em;letter-spacing:.03em;padding:2px 7px;border-radius:var(--r-pill);border:1px solid var(--linea);color:var(--texto-2);background:var(--elevada);vertical-align:middle;white-space:nowrap}
.tag.src{border-style:dashed;background:transparent}
.tag.rojo{color:var(--rojo);border-color:var(--rojo);background:var(--rojo-s)}
.tag.amarillo{color:var(--amarillo);border-color:var(--amarillo);background:var(--amarillo-s)}
.tag.verde{color:var(--verde);border-color:var(--verde);background:var(--verde-s)}
.tag.cian{color:var(--cian);border-color:var(--cian);background:var(--cian-s)}
.tag.letra{font-weight:600;color:var(--texto)}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acero);margin-right:6px;vertical-align:middle;flex:none}
.dot.rojo{background:var(--rojo)}
.dot.amarillo{background:var(--amarillo)}
.dot.verde{background:var(--verde)}
.dot.cian{background:var(--cian)}
.c-rojo{color:var(--rojo)}
.c-amarillo{color:var(--amarillo)}
.c-verde{color:var(--verde)}
.c-cian{color:var(--cian)}
.c-naranja{color:var(--naranja)}

/* =====================================================================
   5. BOTONES Y ENLACES
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;min-height:38px;
  border-radius:var(--r);
  border:1px solid var(--linea-fuerte);
  background:var(--superficie);
  color:var(--texto);
  box-shadow:var(--sombra-1);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.btn:hover{background:var(--elevada);border-color:var(--acero);box-shadow:var(--sombra-2)}
.btn:active{transform:translateY(1px);box-shadow:var(--sombra-1)}
.btn.primary{background:var(--acento-solido);border-color:var(--acento-solido);color:var(--sobre-solido);font-weight:600;padding:10px 20px;min-height:42px}
.btn.primary:hover{background:var(--acento-solido);border-color:var(--acento-solido);filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--linea);box-shadow:none}
.btn.ghost:hover{background:var(--elevada);box-shadow:none}
.btn.small{padding:4px 11px;min-height:30px;font-size:.92em}
.btn.danger{color:var(--rojo);border-color:var(--rojo);background:var(--rojo-s)}
.btn.danger:hover{background:var(--rojo-s);border-color:var(--rojo)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.busy{opacity:.7;pointer-events:none}

.link{color:var(--cian);background:none;border:0;padding:0;cursor:pointer;text-decoration:none;border-radius:var(--r-xs)}
.link:hover{text-decoration:underline}
.prov{font-family:var(--mono);font-size:.78em;color:var(--texto-3);border-bottom:1px dotted var(--texto-3);cursor:pointer;background:none;padding:0;border-radius:0}
.prov:hover{color:var(--cian);border-bottom-color:var(--cian)}
.actions{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center;margin-top:var(--e-4)}
.primary-zone{margin-top:var(--e-6);padding-top:var(--e-5);border-top:1px solid var(--linea)}

/* =====================================================================
   6. FORMULARIOS
   ===================================================================== */
.field{display:grid;gap:var(--e-1);margin-bottom:var(--e-3)}
.field label{color:var(--texto-2);font-size:.92em;font-weight:600}
.field input,.field select,.field textarea{
  background:var(--hundida);
  border:1px solid var(--linea-fuerte);
  border-radius:var(--r);
  padding:9px 11px;width:100%;min-height:40px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--acero)}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--superficie);border-color:var(--foco);box-shadow:var(--sombra-foco);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:1px}
.field textarea{min-height:96px;resize:vertical;line-height:var(--lh-3)}
.field .err{color:var(--rojo);font-size:.9em}
.field .err:empty{display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--rojo);background:var(--rojo-s)}
.field .hint{color:var(--texto-3);font-size:.88em}

/* Listas nativas y popovers — mismo tema en claro y oscuro (§ PASSE 6). */
select, .field select, .rolsel select, #pal-q{
  background-color:var(--popover-bg);
  color:var(--popover-fg);
  border-color:var(--popover-border);
  accent-color:var(--acento-solido);
}
select option, select optgroup{
  background-color:var(--popover-bg);
  color:var(--popover-fg);
}
select option:checked, select option:hover{
  background-color:var(--popover-selected-bg);
  color:var(--popover-selected-fg);
}
.form-panel{max-width:var(--ancho-form)}
.form-panel.wide{max-width:720px}

/* Detalle técnico — IOP, hash, arquitectura fuera del flujo principal. */
.detalle-tecnico{
  margin-top:var(--e-3);
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:var(--hundida);
  padding:0 var(--e-3);
}
.detalle-tecnico>summary{
  cursor:pointer;
  padding:var(--e-2) 0;
  color:var(--texto-2);
  font-size:var(--fs-0);
  font-weight:600;
  list-style:none;
}
.detalle-tecnico>summary::-webkit-details-marker{display:none}
.detalle-tecnico>summary::before{content:'▸ ';color:var(--texto-3)}
.detalle-tecnico[open]>summary::before{content:'▾ '}
.detalle-tecnico>.cuerpo{padding:0 0 var(--e-3);color:var(--texto-2);font-size:.92em;line-height:var(--lh-3)}
.detalle-tecnico .pre{margin-top:var(--e-2)}

/* =====================================================================
   7. TABLAS
   7.1 table.t — la tabla heredada del back-office.
   ===================================================================== */
table.t{display:block;overflow-x:auto;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
@media (min-width:901px){table.t{display:table}}
table.t th{text-align:left;color:var(--texto-3);font-weight:400;padding:var(--e-1) var(--e-2);border-bottom:1px solid var(--linea-fuerte);font-size:.88em;letter-spacing:.02em}
table.t td{padding:var(--fila-y) var(--e-2);border-bottom:1px solid var(--linea);vertical-align:top}
table.t td.num,table.t th.num{text-align:right;font-family:var(--mono)}
table.t tr:hover td{background:var(--elevada)}
table.t tr.clickable{cursor:pointer}
table.t tr.clickable:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-2px}
table.t.dense td{padding:4px var(--e-2)}

/* 7.2 .tablabox + .tabla — la tabla única de los componentes compartidos.
   Encabezado legible, filas con reacción al puntero y al teclado. */
.tablabox{
  border:1px solid var(--linea);
  border-radius:var(--r-md);
  background:var(--superficie);
  box-shadow:var(--sombra-1);
  overflow:hidden;
}
.tabla{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;text-align:left}
.tabla thead th{
  background:var(--hundida);
  color:var(--texto-2);
  font-weight:600;font-size:.85em;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  padding:var(--e-2) var(--e-3);
  border-bottom:1px solid var(--linea-fuerte);
  white-space:nowrap;
}
.tabla td{padding:var(--fila-y) var(--e-3);border-bottom:1px solid var(--linea);vertical-align:middle;line-height:var(--lh-2)}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla td.num,.tabla th.num{text-align:right;font-family:var(--mono)}
.tabla tbody tr{transition:background var(--t) var(--ease)}
.tabla tbody tr:hover{background:var(--elevada)}
.tabla tbody tr[data-nav]{cursor:pointer}
.tabla tbody tr[data-nav]:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-2px;background:var(--elevada)}
.tabla.densa td{padding:calc(var(--fila-y)*.6) var(--e-2)}
.tabla.densa thead th{padding:var(--e-1) var(--e-2)}
/* El tono nunca viaja solo: acompaña a un texto de estado en la fila. */
.tabla tr.f-rojo td:first-child{box-shadow:inset 3px 0 0 var(--rojo)}
.tabla tr.f-amarillo td:first-child{box-shadow:inset 3px 0 0 var(--amarillo)}
.tabla tr.f-verde td:first-child{box-shadow:inset 3px 0 0 var(--verde)}
.tabla tr.f-cian td:first-child{box-shadow:inset 3px 0 0 var(--cian)}
.tabla tr.f-rojo{background:var(--rojo-s)}
.tabla tr.f-amarillo{background:var(--amarillo-s)}
.tabla tr.f-verde{background:var(--verde-s)}
.tabla tr.f-cian{background:var(--cian-s)}

/* =====================================================================
   8. LISTAS, PARES CLAVE/VALOR, VACÍOS
   ===================================================================== */
.list{list-style:none}
.list li{padding:var(--fila-y) 0;border-bottom:1px solid var(--linea);display:flex;gap:var(--e-2);align-items:flex-start}
.list li:last-child{border-bottom:0}
.list .grow{flex:1;min-width:0}
.list .meta{color:var(--texto-3);font-size:.9em;margin-top:2px}
.list.compact li{padding:6px 0}

.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--e-1) var(--e-4);align-items:baseline}
.kv dt{color:var(--texto-3);font-size:.9em}
.kv dd{font-family:var(--mono);overflow-wrap:anywhere}

.empty{padding:var(--e-6);text-align:center;color:var(--texto-2);border:1px dashed var(--linea-fuerte);border-radius:var(--r-md);background:var(--superficie)}

/* =====================================================================
   9. COMPONENTES COMPARTIDOS (js/ui.js)
   Una sola gramática visual para los seis perfiles.
   ===================================================================== */

/* 9.1 Iconografía: trazo local, hereda el color del texto y se alinea a él. */
.ico{display:inline-block;flex:none;vertical-align:-.16em;stroke:currentColor;fill:none;color:inherit}
h1 .ico,h2 .ico,h3 .ico{vertical-align:-.12em;margin-right:6px;color:var(--texto-3)}
.btn .ico{vertical-align:-.18em}

/* 9.2 Pastilla de iniciales. */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:var(--r-pill);
  background:var(--elevada);border:1px solid var(--linea);
  color:var(--texto-2);font-weight:600;font-size:.8em;letter-spacing:.04em;
}

/* 9.3 Chips. La fuente se dice en dos palabras; el estado, con palabra y color. */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;min-height:22px;
  border-radius:var(--r-pill);
  border:1px solid var(--linea);
  background:var(--elevada);
  color:var(--texto-2);
  font-size:.78em;letter-spacing:.04em;line-height:var(--lh-2);
  white-space:nowrap;vertical-align:middle;
}
.chip.fuente{font-family:var(--mono);background:var(--hundida);color:var(--texto-2);border-color:var(--linea-fuerte)}
/* Fuente externa simulada: se distingue por el filete discontinuo y el
   punto delantero, no sólo por el color (§14). */
.chip.fuente.externa{border-style:dashed;color:var(--cian);border-color:var(--cian);background:var(--cian-s)}
.chip.fuente.externa::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.est{font-weight:600;letter-spacing:var(--tracking-caps)}
.chip.est::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip.est.est-verde{color:var(--verde);border-color:var(--verde);background:var(--verde-s)}
.chip.est.est-amarillo{color:var(--amarillo);border-color:var(--amarillo);background:var(--amarillo-s)}
.chip.est.est-rojo{color:var(--rojo);border-color:var(--rojo);background:var(--rojo-s)}

/* 9.4 Métrica: título · valor · estado · contexto · acción (§33). */
.metrica{
  display:flex;flex-direction:column;gap:6px;
  padding:20px;min-width:0;height:142px;
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--r-md);
  box-shadow:var(--sombra-1);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.metrica h3{
  display:flex;align-items:center;gap:6px;
  margin:0;font-size:var(--fs-0);font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--texto-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.metrica .valor{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-5);font-weight:600;line-height:1.1;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metrica .est{display:flex;flex-wrap:wrap;gap:var(--e-1)}
.metrica .ctx{color:var(--texto-2);font-size:var(--fs-0);line-height:1.35;margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metrica .acc{margin-top:auto;padding-top:var(--e-1);display:flex;flex-wrap:wrap;gap:var(--e-2)}
/* Variantes de tono: filete lateral + cifra teñida. El texto ya dice qué pasa. */
.metrica.t-rojo{border-left:3px solid var(--rojo)}
.metrica.t-amarillo{border-left:3px solid var(--amarillo)}
.metrica.t-verde{border-left:3px solid var(--verde)}
.metrica.t-cian{border-left:3px solid var(--cian)}
.metrica.t-naranja{border-left:3px solid var(--acento)}
.metrica.t-rojo .valor{color:var(--rojo)}
.metrica.t-amarillo .valor{color:var(--amarillo)}
.metrica.t-verde .valor{color:var(--verde)}
.metrica.clicable{cursor:pointer}
.metrica.clicable:hover{border-color:var(--acero);box-shadow:var(--sombra-2)}
.metrica.clicable:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep);box-shadow:var(--sombra-2)}

/* 9.5 Estado vacío: sereno, centrado y con salida (§72). */
.vacio{
  display:flex;flex-direction:column;align-items:center;gap:var(--e-2);
  padding:var(--e-5) var(--e-4);
  max-height:200px;
  text-align:center;
  color:var(--texto-2);
  background:var(--superficie);
  border:1px dashed var(--linea-fuerte);
  border-radius:var(--r-md);
}
.vacio .ico{color:var(--texto-3);margin-bottom:var(--e-1)}
.vacio h3{color:var(--texto);font-size:var(--fs-2)}
.vacio p{max-width:46ch;line-height:var(--lh-3)}
.vacio .btn,.vacio .link{margin-top:var(--e-2)}

/* 9.6 Cronología única: ciudadano, expediente y auditoría (§35). */
.linea{list-style:none;position:relative;padding:0;margin:0}
.linea li{position:relative;padding:0 0 var(--e-4) var(--e-5);min-height:24px}
.linea li:last-child{padding-bottom:0}
.linea li::before{content:"";position:absolute;left:6px;top:18px;bottom:0;width:1px;background:var(--linea)}
.linea li:last-child::before{display:none}
.linea .punto{
  position:absolute;left:0;top:5px;
  width:13px;height:13px;border-radius:50%;
  background:var(--superficie);
  border:2px solid var(--acero);
  box-sizing:border-box;
}
.linea .cuerpo{min-width:0}
.linea .cab{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-2);line-height:var(--lh-2)}
.linea .cuerpo p{color:var(--texto-2);margin-top:2px;line-height:var(--lh-3);max-width:var(--ancho-lectura)}
.linea .ts{display:block;margin-top:var(--e-1);font-family:var(--mono);font-size:.82em;color:var(--texto-3)}
.linea li.p-rojo .punto{border-color:var(--rojo);background:var(--rojo)}
.linea li.p-amarillo .punto{border-color:var(--amarillo);background:var(--amarillo)}
.linea li.p-verde .punto{border-color:var(--verde);background:var(--verde)}
.linea li.p-cian .punto{border-color:var(--cian);background:var(--cian)}
/* El último acontecimiento se lee primero: caja propia, no color solo. */
.linea li.hl>.cuerpo{
  background:var(--elevada);
  border:1px solid var(--linea);
  border-left:3px solid var(--acento);
  border-radius:var(--r);
  padding:var(--e-2) var(--e-3);
  margin-top:-4px;
}
.linea li.hl .punto{border-color:var(--acento);background:var(--acento)}
.linea.compacta li{padding-bottom:var(--e-2)}
.linea.compacta li::before{top:16px}
.linea.compacta .cuerpo p{margin-top:0}

/* 9.7 Pasos de una simulación externa: progreso, no espectáculo (§39). */
.pasos{
  list-style:none;counter-reset:paso;
  display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-4);
  margin:var(--e-3) 0 var(--e-4);
  padding:0;
}
.pasos li{
  counter-increment:paso;
  position:relative;
  display:flex;align-items:center;gap:7px;
  color:var(--texto-3);font-size:.92em;
  padding-right:var(--e-3);
}
.pasos li::before{
  content:counter(paso);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--linea-fuerte);
  background:var(--superficie);
  font-family:var(--mono);font-size:.78em;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.pasos li.hecho{color:var(--texto-2)}
.pasos li.hecho::before{content:"✓";background:var(--verde-solido);border-color:var(--verde-solido);color:var(--sobre-solido)}
.pasos li.curso{color:var(--texto);font-weight:600}
.pasos li.curso::before{background:var(--acento-solido);border-color:var(--acento-solido);color:var(--sobre-solido)}

/* 9.8 Tarjeta de documento: rejilla en escritorio, lista en móvil. */
.doccard{
  display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--e-3);
  padding:20px;
  height:240px;
  min-height:240px;max-height:240px;
  overflow:hidden;
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--r-md);
  box-shadow:var(--sombra-1);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.doccard:hover{border-color:var(--acero);box-shadow:var(--sombra-2)}
.doccard .mini,.ficha-archivo .mini{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:56px;height:70px;
  border-radius:var(--r-sm);
  border:1px solid var(--linea);
  background:var(--hundida);
  overflow:hidden;
}
.doccard .mini.img img,.ficha-archivo .mini.img img{width:100%;height:100%;object-fit:cover;display:block}
.doccard .mini.pdf,.ficha-archivo .mini.pdf{background:var(--elevada)}
.doccard .ext,.ficha-archivo .ext{font-family:var(--mono);font-size:.72em;letter-spacing:.06em;color:var(--texto-3);font-weight:600}
.doccard .cuerpo{min-width:0;display:flex;flex-direction:column;gap:var(--e-2)}
.doccard .cuerpo h3{font-size:var(--fs-2);line-height:var(--lh-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doccard .chips{display:flex;flex-wrap:wrap;gap:var(--e-1)}
.doccard .meta{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px var(--e-3);font-size:.9em}
.doccard .meta dt{color:var(--texto-3)}
.doccard .meta dd{color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doccard .nota{color:var(--texto-2);font-size:var(--fs-0);border-left:3px solid var(--amarillo);background:var(--amarillo-s);padding:var(--e-1) var(--e-2);border-radius:0 var(--r-sm) var(--r-sm) 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doccard .acciones{display:flex;flex-wrap:wrap;gap:var(--e-1);margin-top:auto}
.doccard .acciones:empty{display:none}

/* 9.9 Zona de carga: clara, invitante, con botón siempre presente (§49). */
.uploader{display:flex;flex-direction:column;gap:var(--e-2)}
.uploader .zona{
  display:flex;flex-direction:column;align-items:center;gap:var(--e-2);
  padding:var(--e-6) var(--e-4);
  text-align:center;
  border:2px dashed var(--linea-fuerte);
  border-radius:var(--r-lg);
  background:var(--hundida);
  color:var(--texto-2);
  cursor:pointer;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.uploader .zona:hover{border-color:var(--acento);background:var(--acento-s)}
.uploader .zona .ico{color:var(--texto-3)}
.uploader .zona:hover .ico{color:var(--acento)}
.uploader .zona.sobre{border-color:var(--acento);border-style:solid;background:var(--acento-s)}
.uploader .zona.sobre .ico{color:var(--acento)}
.uploader .zona p{margin:0}
.uploader .zona .o{color:var(--texto-3);font-size:.9em;text-transform:lowercase}
.uploader .zona .btn{min-height:var(--toque)}
.uploader .formatos{color:var(--texto-3);font-size:.85em;font-family:var(--mono)}
.uploader .elegido[hidden]{display:none}
.uploader .nota-local{display:flex;align-items:flex-start;gap:6px;color:var(--texto-3);font-size:.85em;line-height:var(--lh-3)}
.uploader .nota-local .ico{margin-top:2px}

/* 9.10 Ficha del archivo elegido, antes de enviarlo. */
.ficha-archivo{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"mini datos acciones" "enviar enviar enviar";
  gap:var(--e-3);align-items:center;
  padding:var(--e-3);
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--r-md);
  box-shadow:var(--sombra-1);
}
.ficha-archivo .mini{grid-area:mini}
.ficha-archivo .datos{grid-area:datos;display:flex;flex-direction:column;gap:2px;min-width:0}
.ficha-archivo .datos strong{overflow-wrap:anywhere;line-height:var(--lh-2)}
.ficha-archivo .datos .muted{font-size:.9em}
.ficha-archivo .acciones{grid-area:acciones;display:flex;flex-wrap:wrap;gap:var(--e-1);justify-content:flex-end}
.ficha-archivo .enviar{grid-area:enviar;width:100%;min-height:var(--toque)}

/* 9.11 Visor en el panel lateral. */
.visor{
  margin-top:var(--e-3);
  border:1px solid var(--linea);
  border-radius:var(--r-md);
  background:var(--hundida);
  padding:var(--e-3);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.visor img{display:block;max-width:100%;max-height:52vh;width:auto;height:auto;object-fit:contain;border-radius:var(--r-sm)}
.visor-pdf{display:flex;flex-direction:column;align-items:center;gap:var(--e-2);text-align:center;padding:var(--e-5) var(--e-3);color:var(--texto-2)}
.visor-pdf .ico{color:var(--texto-3)}
.visor-pdf strong{overflow-wrap:anywhere}
.visor-pdf p{max-width:44ch;line-height:var(--lh-3)}

/* 9.12 Pasarela de pagos: métodos, resumen y confirmación. */
.metodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e-2);margin-top:var(--e-3)}
.metodo{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  text-align:left;
  padding:var(--e-3) var(--e-4);
  min-height:64px;
  border:1px solid var(--linea-fuerte);
  border-radius:var(--r-md);
  background:var(--superficie);
  color:var(--texto);
  box-shadow:var(--sombra-1);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.metodo:hover{border-color:var(--acento);background:var(--acento-s);box-shadow:var(--sombra-2)}
.metodo .muted{font-size:.9em}
.resumen-pago{
  margin-top:var(--e-3);
  padding:var(--e-3) var(--e-4);
  background:var(--hundida);
  border:1px solid var(--linea);
  border-radius:var(--r-md);
  gap:var(--e-2) var(--e-4);
}
.resumen-pago dt{text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:.78em}
.pago-ok{
  display:flex;flex-direction:column;align-items:center;gap:var(--e-2);
  padding:var(--e-5) var(--e-3);
  color:var(--verde);
  border:1px solid var(--verde);
  background:var(--verde-s);
  border-radius:var(--r-md);
  margin-top:var(--e-3);
}
.pago-ok h3{color:var(--verde)}

/* =====================================================================
   10. PANTALLAS HEREDADAS
   ===================================================================== */
/* 10.1 Puesto */
.puesto-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--e-6);align-items:start}
.counter{display:flex;align-items:baseline;gap:var(--e-3);padding:var(--e-1) 0}
.counter .big{color:var(--texto-2);min-width:2ch;text-align:right}
.counter.hot .big{color:var(--texto)}
.priority{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e-5);align-items:center;
  padding:24px;
  border-radius:var(--r-md);
  background:var(--superficie);
  border:1px solid var(--linea);
  border-left:3px solid var(--amarillo);
  box-shadow:var(--sombra-1);
}
.ciu-hero .priority{max-height:260px;overflow:hidden}
.priority .label{color:var(--texto-3);font-size:var(--fs-0);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:var(--e-2)}
.priority h2{margin-bottom:6px;font-size:var(--fs-3)}
.priority .muted{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.resume{margin-top:var(--e-5);padding:var(--e-3) var(--e-4);background:var(--elevada);border-radius:var(--r);display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap}
.resume .grow{flex:1;min-width:0}

/* 10.2 Expediente */
.exp-head{display:flex;justify-content:space-between;gap:var(--e-4);align-items:flex-start;flex-wrap:wrap}
.exp-head .id{font-family:var(--mono);color:var(--texto-2)}
.tabs{display:flex;gap:var(--e-1);border-bottom:1px solid var(--linea);margin:var(--e-5) 0 var(--e-4);overflow-x:auto}
.tabs button{padding:9px 15px;min-height:var(--toque);color:var(--texto-2);border-bottom:2px solid transparent;white-space:nowrap;border-radius:var(--r) var(--r) 0 0;transition:color var(--t) var(--ease),background var(--t) var(--ease)}
.tabs button[aria-selected="true"]{color:var(--texto);font-weight:600;border-bottom-color:var(--acento)}
.tabs button:hover{color:var(--texto);background:var(--elevada)}
.tabs button:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-2px}

.diff{border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;background:var(--superficie)}
.diff .drow{display:grid;grid-template-columns:180px minmax(0,1fr) minmax(0,1fr) 150px;gap:0;border-bottom:1px solid var(--linea);align-items:stretch}
.diff .drow:last-child{border-bottom:0}
.diff .drow>div{padding:var(--e-2) var(--e-3);min-width:0;overflow-wrap:anywhere}
.diff .drow.head>div{color:var(--texto-3);font-size:.85em;letter-spacing:var(--tracking-caps);text-transform:uppercase;background:var(--hundida)}
.diff .drow.hit{background:var(--amarillo-s)}
.diff .drow.hit .val{font-weight:600}
.diff .drow.blocker{background:var(--rojo-s)}
.diff .campo{color:var(--texto-2)}
.diff .val{font-family:var(--mono)}
.diff .val .prov{display:block;margin-top:2px}
.diff .same{color:var(--texto-3)}
.diff .fold{padding:var(--e-2) var(--e-3);color:var(--texto-2);cursor:pointer;background:var(--hundida);border-bottom:1px solid var(--linea);list-style:none}
.diff .fold::-webkit-details-marker{display:none}
.diff .fold:hover{color:var(--texto)}
.diff .fold:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-2px}
.fold-wrap{display:block}
.fold-wrap[open] .fold{border-bottom:1px solid var(--linea-fuerte)}

.evid{font-family:var(--mono);font-size:.95em}
.evid .er{display:flex;gap:var(--e-2);padding:5px 0;border-bottom:1px dotted var(--linea)}
.evid .er .k{width:180px;color:var(--texto-2);flex:none}
.evid .er .v{flex:1;min-width:0}
.evid .concl{margin-top:var(--e-2);padding:var(--e-3) 0 0;border-top:1px solid var(--linea);font-weight:600}

.why{margin-top:var(--e-4)}
.why summary{cursor:pointer;color:var(--cian);list-style:none;border-radius:var(--r-xs);display:inline-block}
.why summary::-webkit-details-marker{display:none}
.why summary::before{content:"▸ ";color:var(--texto-3)}
.why[open] summary::before{content:"▾ "}
.why .body{margin-top:var(--e-2);padding:var(--e-3);background:var(--elevada);border:1px solid var(--linea);border-radius:var(--r)}
.why .body h4{font-size:.82em;color:var(--texto-3);font-weight:400;letter-spacing:var(--tracking-caps);text-transform:uppercase;margin:var(--e-2) 0 var(--e-1)}
.why .body h4:first-child{margin-top:0}

.timeline{list-style:none;border-left:1px solid var(--linea);margin-left:6px;padding-left:var(--e-4)}
.timeline li{position:relative;padding:var(--e-1) 0 var(--e-3)}
.timeline li::before{content:"";position:absolute;left:calc(var(--e-4) * -1 - 4px);top:9px;width:8px;height:8px;border-radius:50%;background:var(--acero);border:2px solid var(--fondo);box-sizing:content-box}
.timeline li.hl::before{background:var(--acento)}
.timeline .ts{font-family:var(--mono);color:var(--texto-3);font-size:.85em}

.relevo{padding:var(--e-3) var(--e-4);background:var(--elevada);border-radius:var(--r);margin-bottom:var(--e-4)}
.relevo dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px var(--e-4);margin-top:var(--e-1)}
.relevo dt{color:var(--texto-3)}
.presence{color:var(--cian);font-size:.9em}
.avoided{margin-top:var(--e-5);color:var(--texto-3);font-size:.9em;font-family:var(--mono);line-height:var(--lh-3)}

.chipfield{display:grid;grid-template-columns:160px minmax(0,1fr) auto auto;gap:var(--e-2);align-items:center;padding:var(--e-1) 0;border-bottom:1px dotted var(--linea)}
.chipfield .v{font-family:var(--mono)}
.chipfield.confirmed .v{color:var(--texto-2)}
.chipfield .ok{color:var(--verde);font-family:var(--mono);font-size:.85em}
.preview{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--e-1) var(--e-4);font-family:var(--mono);font-size:.95em;padding:var(--e-3);background:var(--hundida);border:1px solid var(--linea);border-radius:var(--r)}
.preview dt{color:var(--texto-3)}

/* 10.3 Interoperabilidad */
.trace svg{width:100%;height:auto;display:block}
.trace .node{fill:var(--elevada);stroke:var(--linea)}
.trace text{fill:var(--texto);font-family:var(--font);font-size:12px}
.trace .sub{fill:var(--texto-3);font-size:10px}
.trace .wire{stroke:var(--linea);stroke-width:1.5;fill:none}
.trace .pulse{fill:var(--cian)}
.trace .tn{transition:opacity var(--t) var(--ease)}
.trace .done .node,.trace.done .node{stroke:var(--cian)}
.trace .fail .node{stroke:var(--rojo)}
.tracelog{font-family:var(--mono);font-size:.9em}
.tracelog div{padding:3px 0;color:var(--texto-2)}
.tracelog div.now{color:var(--texto)}
.minim{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--e-4)}
.minim>div{padding:var(--e-4);border:1px solid var(--linea);border-radius:var(--r-md);background:var(--superficie)}
.minim>div.chosen{border-color:var(--cian);box-shadow:inset 3px 0 0 var(--cian)}
.minim h4{margin-bottom:var(--e-2)}

/* 10.4 Auditoría */
.chain-row{display:grid;grid-template-columns:110px minmax(0,1fr) 120px;gap:var(--e-2);padding:var(--e-2) 0;border-bottom:1px solid var(--linea);font-size:.95em}
.chain-row .h{font-family:var(--mono);color:var(--texto-3);font-size:.8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chain-row.broken{background:var(--rojo-s)}
.chain-status{padding:var(--e-3) var(--e-4);border-radius:var(--r);background:var(--elevada);font-family:var(--mono)}

/* 10.5 Seguridad — una sola alerta en forma completa (§23.2). */
.alerts{display:flex;flex-direction:column;gap:var(--e-2)}
.alerta-dom{padding:var(--e-4);border-radius:var(--r-md);border:1px solid var(--linea);border-left:3px solid var(--linea-fuerte);background:var(--superficie);box-shadow:var(--sombra-1)}
.alerta-dom.new{border-left-color:var(--rojo);background:var(--rojo-s)}
.alerta-dom .actions{margin-top:var(--e-2)}
.sim-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e-2)}
.sim-grid button{text-align:left;padding:var(--e-3);min-height:var(--toque);border:1px solid var(--linea);border-radius:var(--r);background:var(--superficie);transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.sim-grid button:hover{border-color:var(--acero);background:var(--elevada)}
.sim-grid button span{display:block;color:var(--texto-3);font-size:.85em;margin-top:2px}

/* 10.6 Sincronización */
.queue .list li.pending .tag{color:var(--amarillo);border-color:var(--amarillo);background:var(--amarillo-s)}
.conflict{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--e-4)}
.conflict>div{padding:var(--e-4);border:1px solid var(--linea);border-radius:var(--r-md);background:var(--superficie)}
.conflict .val.hit{background:var(--amarillo-s);font-weight:600}

/* 10.7 Matrices — la única tabla a la que se le permite desplazarse. */
.matrix{overflow:auto;border:1px solid var(--linea);border-radius:var(--r-md)}
.matrix table.t{min-width:900px}
.matrix td .tag.letra{font-size:.95em}

/* 10.8 Certificado */
.cert{max-width:560px;padding:var(--e-5);border:1px solid var(--linea);border-radius:var(--r-md);background:var(--superficie);box-shadow:var(--sombra-1)}
.cert .qr{width:120px;height:120px;display:grid;grid-template-columns:repeat(21,1fr);gap:0;background:#fff;padding:6px;border-radius:var(--r-xs)}
.cert .qr i{display:block;background:#fff}
.cert .qr i.on{background:#000}
.cert.revoked{border-color:var(--rojo)}

/* 10.9 Dirección */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gutter)}
.kpi{padding:var(--e-3) 0;border-top:2px solid var(--linea);cursor:pointer;transition:border-color var(--t) var(--ease)}
.kpi:hover{border-top-color:var(--acento)}
.kpi:hover .big{color:var(--texto)}
.kpi:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}
.kpi .big{color:var(--texto-2);margin:var(--e-1) 0;transition:color var(--t) var(--ease)}
.kpi .lbl{color:var(--texto-2)}
.kpi .src{color:var(--texto-3);font-size:.8em;font-family:var(--mono)}
.bars{display:grid;gap:var(--e-1)}
.bar{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;gap:var(--e-2);align-items:center}
.bar .track{height:8px;background:var(--elevada);border-radius:var(--r-pill);overflow:hidden}
.bar .fill{height:100%;background:var(--acero);border-radius:var(--r-pill);transition:width var(--t-l) var(--ease)}
.bar .fill.hot{background:var(--amarillo)}
.bar .n{font-family:var(--mono);text-align:right;color:var(--texto-2)}

/* =====================================================================
   11. BARRA SUPERIOR: SELECTOR DE ROL Y MENÚ «⋯» (§8)
   ===================================================================== */
.rolsel{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linea);border-radius:var(--r);padding:0 0 0 var(--e-2);background:var(--hundida)}
.roltag{font-size:var(--fs-0);letter-spacing:var(--tracking-caps);color:var(--texto-3);text-transform:uppercase}
.rolsel select{background:transparent;border:0;color:var(--texto);font:inherit;font-size:.92em;padding:7px var(--e-2);cursor:pointer;min-height:36px}
.rolsel select:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-2px}

.tools-menu{
  position:absolute;top:calc(100% + 4px);right:var(--e-4);z-index:60;
  min-width:236px;display:flex;flex-direction:column;
  background:var(--popover-bg);color:var(--popover-fg);
  border:1px solid var(--popover-border);border-radius:var(--r-md);
  padding:var(--e-1);box-shadow:var(--sombra-3);
  animation:aparecer var(--t) var(--ease);
}
.tools-menu button{text-align:left;background:none;border:0;color:var(--popover-fg);font:inherit;padding:9px var(--e-3);min-height:38px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--t) var(--ease)}
.tools-menu button:hover{background:var(--popover-selected-bg);color:var(--popover-selected-fg)}
.tools-menu button[aria-checked="true"]{font-weight:600}
.tools-menu button[aria-checked="true"]::after{content:' ·';color:var(--acento)}
.tools-menu .grp{font-size:var(--fs-0);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--texto-3);padding:var(--e-2) var(--e-3) var(--e-1)}

/* Menú lateral: funciones principales visibles, el resto en «Más» (§8). */
.nav-mas>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:0 var(--e-3);min-height:46px;color:var(--texto-3);font-size:var(--fs-0);letter-spacing:var(--tracking-caps);text-transform:uppercase;white-space:nowrap}
.nav-mas>summary::-webkit-details-marker{display:none}
.nav-mas>summary::after{content:' +'}
.nav-mas[open]>summary::after{content:' –'}
.nav-mas>summary:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-2px}

/* =====================================================================
   12. CAMPANA DE NOTIFICACIONES
   ===================================================================== */
.campana{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:var(--toque);height:var(--toque);
  border-radius:var(--r);border:1px solid transparent;
  color:var(--texto-2);
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.campana:hover{background:var(--elevada);color:var(--texto)}
.campana[aria-expanded="true"]{background:var(--elevada);color:var(--texto);border-color:var(--linea-fuerte)}
.campana .badge,.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);
  background:var(--rojo-solido);color:var(--sobre-solido);
  font-family:var(--mono);font-size:var(--fs-0);font-weight:600;line-height:1;
}
.campana .badge{position:absolute;top:4px;right:3px;border:2px solid var(--superficie)}
.campana-panel{
  position:absolute;top:calc(100% + 6px);right:var(--e-4);z-index:70;
  width:min(360px,calc(100vw - 24px));max-height:min(60vh,420px);overflow:auto;
  background:var(--popover-bg);color:var(--popover-fg);
  border:1px solid var(--popover-border);border-radius:var(--r-md);
  box-shadow:var(--sombra-3);
  padding:var(--e-1);
  animation:aparecer var(--t) var(--ease);
}
.campana-panel .grp{font-size:var(--fs-0);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--texto-3);padding:var(--e-2) var(--e-3) var(--e-1)}
.notif{
  display:block;width:100%;text-align:left;
  padding:var(--e-2) var(--e-3);
  border-radius:var(--r-sm);
  color:var(--texto-2);
  border-left:3px solid transparent;
  transition:background var(--t) var(--ease);
}
.notif:hover{background:var(--popover-selected-bg);color:var(--popover-selected-fg);text-decoration:none}
.notif strong{display:block;color:var(--popover-fg);font-weight:600}
.notif .ts{display:block;font-family:var(--mono);font-size:.82em;color:var(--texto-3);margin-top:2px}
/* «Nueva» se dice con el filete y con la palabra del propio texto, no sólo con color. */
.notif.nueva{border-left-color:var(--acento);background:var(--acento-s)}

/* =====================================================================
   13. TABLEROS POR ROL (§3–§7)
   Un grupo, una cifra, una frase. El color es excepción.
   ===================================================================== */
/* Bandeja del oficial: cuatro grupos separados por un filete de 1 px. */
.dash-bandeja{border-top:1px solid var(--linea);margin-top:var(--e-4)}
.dash-bandeja>details,.dash-bandeja>div{border-bottom:1px solid var(--linea)}
.dash-bandeja summary,.dash-bandeja>div{display:flex;gap:var(--e-3);align-items:baseline;padding:var(--e-3) 0;list-style:none}
.dash-bandeja summary{cursor:pointer;border-radius:var(--r-sm)}
.dash-bandeja summary::-webkit-details-marker{display:none}
.dash-bandeja summary::before{content:"▸";color:var(--texto-3);font-size:.8em;width:1em;flex:none}
.dash-bandeja summary:hover{color:var(--texto)}
.dash-bandeja details[open]>summary::before{content:"▾"}
.dash-bandeja summary:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-2px}
.dash-bandeja>div{color:var(--texto-3)}
.dash-bandeja>div::before{content:"·";color:var(--texto-3);width:1em;flex:none}
.dash-bandeja .g{font-family:var(--mono);font-size:.82em;color:var(--texto-3);width:12ch;flex:none;letter-spacing:var(--tracking-caps);text-transform:uppercase}
.dash-bandeja .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;min-width:2ch;text-align:right}
.dash-bandeja .d{color:var(--texto-2)}
.dash-bandeja ul{padding:0 0 var(--e-2) calc(12ch + var(--e-6))}

/* Bloques nombrados (QUÉ PASA / POR QUÉ / QUÉ FALTA / SIGUIENTE ACCIÓN). */
.dash-bloques{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gutter);margin-top:var(--e-4)}
.dash-bloques>div>span{display:block;font-family:var(--mono);font-size:var(--fs-0);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--texto-3);margin-bottom:var(--e-1)}
.dash-bloques .actions{margin-top:var(--e-2)}

/* Estado técnico DNTIC: una línea por control, sin recuadros. */
.dash-estado{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 var(--e-6);border-top:1px solid var(--linea);margin-top:var(--e-4)}
.dash-estado>a{display:flex;justify-content:space-between;gap:var(--e-2);padding:var(--e-2) 0;border-bottom:1px solid var(--linea);font-family:var(--mono);font-size:.95em;color:var(--texto);min-height:36px;align-items:center}
.dash-estado>a:hover{color:var(--cian);text-decoration:none}
.dash-estado>a:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-2px}
.dash-estado .k{color:var(--texto-3)}

.dash-kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;margin-top:24px;align-items:stretch;
}
.dash-kpis-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.dash-kpis .metrica{height:142px}
.dash-mas{margin-top:32px;display:flex;flex-direction:column;gap:8px}
.dash-mas>.why{margin:0;border-top:1px solid var(--linea);padding-top:8px}

.intent-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--e-3);
  margin-top:var(--e-4);
}
.intent-card{
  display:flex;flex-direction:column;gap:var(--e-2);
  padding:var(--e-4);
  border:1px solid var(--linea);
  border-radius:var(--radio,8px);
  min-height:140px;
  color:inherit;
  text-decoration:none;
}
.intent-card:hover{border-color:var(--acero,#7a8);box-shadow:var(--sombra-2)}
.intent-card h3{margin:0;font-size:var(--fs-2);font-weight:600}
.intent-card p{margin:0;color:var(--texto-2);font-size:var(--fs-0);line-height:1.4}
.exp-ref{font-family:var(--mono);font-size:var(--fs-0);color:var(--texto-3);letter-spacing:.02em}
.tramite-grupo{margin-bottom:var(--e-5)}
.tramite-grupo h3{margin:0 0 var(--e-2)}
.stepper{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-3);list-style:none;padding:var(--e-3) var(--e-4);margin:0 0 var(--e-5);background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-md);box-shadow:var(--sombra-1)}
.stepper li{display:flex;align-items:center;gap:8px;color:var(--texto-3);font-size:var(--fs-0);line-height:var(--lh-2);transition:color var(--t) var(--ease),opacity var(--t) var(--ease)}
.stepper li .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--linea);border-radius:50%;font-family:var(--mono);font-size:.88em;flex:none;transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
.stepper li .et{white-space:nowrap}
.stepper li.curso{color:var(--texto);font-weight:600}
.stepper li.curso .n{border-color:var(--acento-solido);background:var(--acento-s);color:var(--texto);box-shadow:0 0 0 2px var(--acento-s)}
.stepper li.hecho{color:var(--texto-2)}
.stepper li.hecho .n{border-color:var(--verde);background:var(--verde-s);color:var(--verde)}
.stepper li.hecho .n::after{content:''}
.stepper li.futuro{opacity:.72}
.stepper li.futuro .n{background:transparent}
.stepper a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-sm);padding:2px 4px;margin:-2px -4px}
.stepper a:hover{text-decoration:none;background:var(--elevada)}
.stepper a:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:2px}
.bloqueo-continuar{border-color:var(--naranja);margin:var(--e-4) 0;padding:var(--e-3) var(--e-4)}
.bloqueo-continuar .faltan-list{margin:8px 0 0;padding-left:1.2em;color:var(--texto-2)}
.review-completa .review-seccion{border:1px solid var(--linea);border-radius:var(--r-sm);padding:var(--e-3);margin:0 0 var(--e-3)}
.review-completa .review-seccion.ok{border-color:var(--verde-s)}
.review-completa .review-seccion.alerta{border-color:var(--naranja)}
.verif-checklist li{align-items:flex-start}
.fuente-medic{border:1px solid var(--linea);padding:var(--e-3);margin:0 0 var(--e-4);border-radius:var(--radio,8px)}
.fuente-medic p{margin:6px 0 0}
.dato-conocido{display:flex;justify-content:space-between;gap:var(--e-3);align-items:flex-start;border-bottom:1px solid var(--linea);padding:var(--e-3) 0}
.dato-conocido .meta{color:var(--texto-3);font-size:var(--fs-0)}
.nacimiento-resumen h3{margin:var(--e-4) 0 var(--e-1);font-size:var(--fs-1)}
.fase-maestro{margin-top:var(--e-3)}

/* =====================================================================
   14. ESPACIO CIUDADANO (§17–§28)
   Móvil primero, lenguaje claro, ancho de lectura cómodo, radios amables.
   ===================================================================== */
.screen.ciudadano{max-width:none;margin:0}
.screen.ciudadano .surface,
.screen.ciudadano .metrica,
.screen.ciudadano .doccard,
.screen.ciudadano .tablabox,
.screen.ciudadano .vacio{border-radius:var(--r-lg)}
.screen.ciudadano .btn{border-radius:var(--r-md)}
.screen.ciudadano p{line-height:var(--lh-3)}

.ciu-kpis,.ciu-bloques{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;margin-top:24px;align-items:stretch;
}
.ciu-kpis .metrica{height:142px}
.ciu-hero{margin-top:var(--e-4)}
.ciu-hero-copy{min-width:0}
.ciu-hero-acc{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ciu-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ciu-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.ciu-split h2{margin-bottom:12px}
.ciu-mini{padding:20px}
.ciu-mini strong{display:block;margin:4px 0}
.ciu-notifs{list-style:none}
.ciu-notifs li+li{border-top:1px solid var(--linea)}
.ciu-notifs button{
  display:block;width:100%;text-align:left;padding:12px 0;min-height:44px;
  color:inherit;background:none;border:0;
}
.ciu-notifs button strong{display:block}
.ciu-notifs button span{display:block;color:var(--texto-2);font-size:var(--fs-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ciu-notifs button.nueva strong{color:var(--texto)}
.ciu-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px;align-items:stretch}
.ciu-idgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
.ciu-idside{display:flex;flex-direction:column;gap:16px}
.ciu-identidad{padding:24px;max-width:420px}
.ciu-identidad h2{margin:6px 0 4px;font-size:var(--fs-3)}
.ciu-identidad svg{margin-top:16px;width:88px;height:88px}
.ciu-datosgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.ciu-dato{padding:20px}
.ciu-dato h2{font-size:var(--fs-2);margin-bottom:12px}
.ciu-dato .list li{display:block;border:0;padding:0}
.ciu-campo{padding:10px 0;border-bottom:1px solid var(--linea);min-width:0}
.ciu-campo:last-child{border-bottom:0}
.ciu-campo strong{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ciu-mas{position:relative}
.ciu-mas>summary{
  list-style:none;cursor:pointer;
  min-width:32px;min-height:30px;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--linea);border-radius:var(--r);
  color:var(--texto-2);font-weight:600;line-height:1;
}
.ciu-mas>summary::-webkit-details-marker{display:none}
.ciu-mas>div{
  position:absolute;right:0;bottom:calc(100% + 4px);z-index:6;
  min-width:140px;padding:4px;
  display:flex;flex-direction:column;gap:4px;
  background:var(--popover-bg);color:var(--popover-fg);
  border:1px solid var(--popover-border);
  border-radius:var(--r);box-shadow:var(--sombra-2);
}
.movil-mas{
  position:fixed;left:var(--e-2);right:var(--e-2);bottom:calc(var(--navmovil-h) + env(safe-area-inset-bottom,0px) + var(--e-2));z-index:55;
  background:var(--popover-bg);color:var(--popover-fg);
  border:1px solid var(--popover-border);border-radius:var(--r-md);
  box-shadow:var(--sombra-3);padding:var(--e-2);
  display:flex;flex-direction:column;gap:2px;
  max-height:min(50vh,360px);overflow:auto;
}
.movil-mas a{display:flex;align-items:center;gap:10px;padding:var(--e-2) var(--e-3);min-height:var(--toque);border-radius:var(--r-sm);color:var(--popover-fg)}
.movil-mas a:hover{background:var(--popover-selected-bg);text-decoration:none}
.ciu-resumen{
  display:flex;flex-wrap:wrap;gap:24px;align-items:baseline;
  padding:16px 20px;margin-top:16px;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-lg);
}
.ciu-resumen strong{font-family:var(--mono);font-size:var(--fs-3);margin-right:6px}
.ciu-cita{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:12px}
.ciu-cita .actions{grid-column:1/-1;margin-top:0}
.ciu-cita-fecha{display:flex;flex-direction:column;font-family:var(--mono);line-height:1.2}
.ciu-cita-fecha strong{font-size:var(--fs-2)}
.ciu-aut,.ciu-pago,.ciu-tramite{margin-top:12px;padding:20px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pill{
  display:inline-flex;align-items:center;padding:4px 12px;min-height:28px;
  border-radius:var(--r-pill);border:1px solid var(--linea);
  color:var(--texto-2);font-size:var(--fs-0);white-space:nowrap;
}
.pill:hover{text-decoration:none;border-color:var(--acero);color:var(--texto)}
.pill.on{background:var(--acento-s);border-color:var(--acento);color:var(--acento);font-weight:600}
html[data-rol="ciudadano"] .tbtn kbd,
html[data-rol="ciudadano"] .perfil-demo .chip{display:none}
html[data-rol="ciudadano"] #brand .sub{opacity:.55;font-size:var(--fs-0)}
html[data-rol="ciudadano"] [data-action="palette"]{display:none}
.chip{min-height:24px;max-height:28px}
.pie-demo{margin-top:24px}

/* Zonas táctiles suficientes en todas las acciones del portal. */
.ciu-tramite .actions .btn,.ciu-aut .actions .btn,.ciu-pago .actions .btn,.ciu-doc .actions .btn{min-height:var(--toque)}
.ciu-falta div{max-width:60ch}
.ciu-etapas>li,.ciu-cadena>li{border-bottom:0;padding:var(--e-1) 0}
.ciu-bloque{display:block;padding:var(--e-4);text-decoration:none;color:inherit;border-radius:var(--r-lg)}
a.ciu-bloque{cursor:pointer;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
a.ciu-bloque:hover{border-color:var(--acero);box-shadow:var(--sombra-2);text-decoration:none}
a.ciu-bloque:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}
.ciu-servicios{flex-wrap:wrap;gap:var(--e-2)}
.ciu-servicios .btn{flex:1 1 46%;justify-content:center;min-height:48px}

/* Avance del trámite: pasos, no barra de progreso decorativa. */
.ciu-etapas>li{display:flex;gap:var(--e-2);align-items:flex-start}
.ciu-etapas>li .mark{flex:none;width:2ch;font-family:var(--mono);color:var(--texto-3)}
.ciu-cadena>li{display:flex;gap:var(--e-2);align-items:center}

/* La credencial de demostración: sobria y estatal. Nunca imita una cédula. */
.ciu-identidad dl.kv{margin-top:var(--e-2)}
.ciu-consulta{padding:var(--e-4)}
.ciu-falta{border-top:1px solid var(--linea);padding-top:var(--e-3);margin-top:var(--e-3)}

/* =====================================================================
   15. CAPAS: PANEL, MODAL, AVISOS, PALETA, PRESENTACIÓN
   ===================================================================== */
/* Cerrado: invisible para el ratón, el teclado y el lector de pantalla. */
#panel{position:fixed;top:0;right:0;height:100vh;width:var(--panel-w);background:var(--superficie);border-left:1px solid var(--linea);transform:translateX(100%);visibility:hidden;transition:transform var(--t-l) var(--ease),visibility var(--t-l);z-index:80;overflow:auto;padding:var(--e-6) var(--e-5) var(--e-8);box-shadow:var(--sombra-3);overscroll-behavior:contain}
#panel.open{transform:translateX(0);visibility:visible}
#panel>h2,#panel>h3{padding-right:calc(var(--e-8) + var(--e-2))}
#panel .close{position:absolute;top:var(--e-3);right:var(--e-3);min-height:34px}

#modal-root{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:var(--velo);z-index:90;padding:var(--e-4)}
#modal-root.open{display:flex;animation:fundir var(--t) var(--ease)}
.modal{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-lg);
  width:min(640px,100%);max-height:90vh;overflow:auto;
  padding:var(--e-5);
  box-shadow:var(--sombra-3);
  animation:subir var(--t-l) var(--ease);
}
.modal h2{margin-bottom:var(--e-3)}

#toasts{position:fixed;left:50%;bottom:56px;transform:translateX(-50%);display:flex;flex-direction:column;gap:var(--e-1);z-index:95;pointer-events:none;width:min(520px,calc(100vw - 24px))}
.toast{background:var(--fondo-2);border:1px solid var(--linea-fuerte);border-radius:var(--r-md);padding:var(--e-3) var(--e-4);box-shadow:var(--sombra-3);opacity:0;transform:translateY(6px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);pointer-events:auto;max-width:100%}
.toast.show{opacity:1;transform:translateY(0)}
.toast strong{display:block}
.toast .undo{margin-left:var(--e-2)}

.sysmsg{padding:var(--e-3) var(--e-4);background:var(--elevada);border:1px solid var(--linea);border-left:3px solid var(--amarillo);border-radius:var(--r);margin:var(--e-4) 0;line-height:var(--lh-3)}
.sysmsg.rojo{border-left-color:var(--rojo);background:var(--rojo-s)}
.sysmsg.verde{border-left-color:var(--verde);background:var(--verde-s)}
.sysmsg.cian{border-left-color:var(--cian);background:var(--cian-s)}

.tip{color:var(--texto-3);font-size:.9em;margin-left:6px}
.tipq{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;text-align:center;border:1px solid var(--linea-fuerte);border-radius:50%;font-size:.8em;color:var(--texto-3);vertical-align:middle;margin-left:var(--e-1)}
.tipq:hover{color:var(--cian);border-color:var(--cian)}

#palette{position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;background:var(--velo);z-index:100;padding-top:12vh;padding-inline:var(--e-2)}
#palette.open{display:flex;animation:fundir var(--t) var(--ease)}
#palette .box{width:min(640px,94vw);background:var(--popover-bg);color:var(--popover-fg);border:1px solid var(--popover-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra-3);animation:subir var(--t-l) var(--ease)}
#palette input{width:100%;padding:var(--e-3) var(--e-4);background:var(--popover-bg);color:var(--popover-fg);border:0;border-bottom:1px solid var(--popover-border);font-size:var(--fs-2);min-height:52px}
#palette input:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-3px}
#palette .res{max-height:50vh;overflow:auto}
#palette .grp{padding:var(--e-2) var(--e-4) 2px;color:var(--texto-3);font-size:var(--fs-0);letter-spacing:var(--tracking-caps);text-transform:uppercase}
#palette .item{display:flex;justify-content:space-between;gap:var(--e-2);padding:var(--e-2) var(--e-4);min-height:38px;align-items:center;cursor:pointer}
#palette .item[aria-selected="true"],#palette .item:hover{background:var(--popover-selected-bg);color:var(--popover-selected-fg)}
#palette .item[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--acento)}
#palette .item .k{font-family:var(--mono);color:var(--texto-3)}

#presbar{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);display:none;gap:var(--e-2);align-items:center;background:var(--fondo-2);border:1px solid var(--linea-fuerte);border-radius:var(--r-md);padding:var(--e-2) var(--e-3);z-index:85;box-shadow:var(--sombra-3)}
#presbar.open{display:flex}
#presbar .step{font-family:var(--mono);color:var(--texto-2)}
#presbar .clock{font-family:var(--mono);color:var(--texto-3)}

[data-foco="1"] #sidebar,[data-foco="1"] .nofoco{display:none}
[data-foco="1"] #app{grid-template-columns:minmax(0,1fr)}
[data-pres="1"] #sidebar{display:none}
[data-pres="1"] #app{grid-template-columns:minmax(0,1fr)}

/* =====================================================================
   16. BARRA DE NAVEGACIÓN INFERIOR (móvil)
   La añade la coquilla; aquí sólo vive su forma. Oculta en escritorio.
   ===================================================================== */
.navmovil{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:88;
  background:var(--superficie);
  border-top:1px solid var(--linea);
  box-shadow:var(--sombra-3);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.navmovil button,.navmovil a{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--navmovil-h);
  padding:var(--e-1) 4px;
  color:var(--texto-3);
  font-size:var(--fs-0);line-height:var(--lh-1);
  text-align:center;
  border-top:2px solid transparent;
  transition:color var(--t) var(--ease),background var(--t) var(--ease);
}
.navmovil button span,.navmovil a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navmovil button:hover,.navmovil a:hover{color:var(--texto);background:var(--elevada);text-decoration:none}
.navmovil .activo{color:var(--acento);border-top-color:var(--acento);font-weight:600;background:var(--acento-s)}
.navmovil button:focus-visible,.navmovil a:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:-3px}

/* =====================================================================
   17. MICRO-ANIMACIONES — 150–220 ms, entrada y progreso. Nada más.
   ===================================================================== */
@keyframes fundir{from{opacity:0}to{opacity:1}}
@keyframes subir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes aparecer{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
#main>.screen{animation:fundir var(--t-l) var(--ease)}

/* =====================================================================
   18. RESPONSIVE
   Escritorio: tablero rico · Tableta: dos columnas · Móvil: una columna.
   Ninguna página se desplaza en horizontal, salvo .matrix.
   ===================================================================== */
@media (max-width:1180px){
  :root{--sidebar-w:220px}
  .ciu-docs{grid-template-columns:repeat(2,minmax(0,1fr))}
  #topbar{flex-wrap:wrap}
  #topbar .tools{width:100%;justify-content:flex-end;overflow-x:auto}
  #main{padding:var(--e-5) var(--e-4) var(--e-7)}
}

/* Tableta: dos columnas como máximo. */
@media (max-width:1024px){
  .ciu-kpis,.ciu-bloques{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ciu-split,.ciu-idgrid,.ciu-datosgrid{grid-template-columns:1fr}
  .priority{grid-template-columns:minmax(0,1fr)}
  .ciu-hero-acc{align-items:flex-start}
  .cols,.dash-bloques,.kpis,.dash-kpis,.dash-kpis-6,.intent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col-3,.col-4{grid-column:span 6}
  .col-8,.col-9{grid-column:span 12}
  .puesto-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .diff .drow{grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) 130px}
}

@media (max-width:900px){
  html[data-rol="ciudadano"] #sidebar{display:none}
  html[data-rol="ciudadano"] .navmovil{display:flex}
  #app{grid-template-columns:minmax(0,1fr)}
  #topbar{flex-wrap:wrap;gap:var(--e-2)}
  #topbar .tools{width:100%;overflow-x:auto;white-space:nowrap;gap:2px}
  #topbar .tools kbd{display:none}
  .tbtn{padding:6px var(--e-2);font-size:.92em}
  #sidebar{border-right:0;border-bottom:1px solid var(--linea);flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:0;padding:var(--e-1)}
  #sidebar a{white-space:nowrap;padding:var(--e-2) var(--e-3);min-height:var(--toque);border-left:0;border-bottom:2px solid transparent;border-radius:var(--r);margin-right:0}
  #sidebar a[aria-current="page"]{border-bottom-color:var(--acento)}
  #sidebar a .n{margin-left:6px}
  #sidebar .who,#sidebar .grp{display:none}
  .nav-mas{display:contents}
  .nav-mas>summary{padding:var(--e-2) var(--e-3)}
  #main{padding:var(--e-4) var(--e-3) var(--e-7)}
  .pre{overflow-x:auto}
  .cols,.grid12,.intent-grid{grid-template-columns:minmax(0,1fr)}
  .col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-12{grid-column:span 1}
  .exp-head{flex-direction:column}
  .puesto-hero{grid-template-columns:minmax(0,1fr)}
  .diff .drow{grid-template-columns:minmax(0,1fr)}
  .diff .drow.head{display:none}
  .diff .drow>div{padding:var(--e-1) var(--e-3)}
  .diff .drow>div.campo{padding-top:var(--e-2);color:var(--texto-3);font-size:.85em}
  .diff .drow>div:last-child{padding-bottom:var(--e-2)}
  #watermark{font-size:9px;bottom:30px;right:8px;background:var(--fondo);padding:2px 4px;border-radius:var(--r-xs)}
  .minim,.conflict{grid-template-columns:minmax(0,1fr)}
  /* La bandeja pasa a dos líneas por grupo: el título ya no compite. */
  .dash-bandeja summary,.dash-bandeja>div{flex-wrap:wrap}
  .dash-bandeja .g{width:auto}
  .dash-bandeja .d{flex-basis:100%;padding-left:1em}
  .dash-bandeja ul{padding-left:var(--e-5)}
  .chain-row{grid-template-columns:minmax(0,1fr)}
  .bar{grid-template-columns:104px minmax(0,1fr) 40px}
  .chipfield{grid-template-columns:minmax(0,1fr)}
  .evid .er{flex-direction:column;gap:0}
  .evid .er .k{width:auto}
  #panel{width:min(560px,100vw);padding:var(--e-5) var(--e-4) var(--e-7)}
  /* La barra contextual no desaparece en móvil: baja de línea (§22.13). */
  #context{order:3;width:100%;flex:none;border-top:1px solid var(--linea);padding-top:6px;font-size:.92em}
  #brand .sub{display:none}
}

/* La tabla compartida deja de ser tabla: se apila en fichas legibles. */
@media (max-width:640px){
  .tablabox{border:0;background:transparent;box-shadow:none;overflow:visible}
  .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla tr{
    background:var(--superficie);
    border:1px solid var(--linea);
    border-radius:var(--r-md);
    box-shadow:var(--sombra-1);
    padding:var(--e-3);
    margin-bottom:var(--e-2);
  }
  .tabla td{border-bottom:0;padding:2px 0;text-align:left}
  .tabla td.num{text-align:left}
  .tabla td:first-child{font-weight:600;font-size:var(--fs-2);margin-bottom:var(--e-1)}
  .tabla tr.f-rojo td:first-child,
  .tabla tr.f-amarillo td:first-child,
  .tabla tr.f-verde td:first-child,
  .tabla tr.f-cian td:first-child{box-shadow:none}
  .tabla tr.f-rojo{border-left:3px solid var(--rojo)}
  .tabla tr.f-amarillo{border-left:3px solid var(--amarillo)}
  .tabla tr.f-verde{border-left:3px solid var(--verde)}
  .tabla tr.f-cian{border-left:3px solid var(--cian)}
  .doccard{grid-template-columns:minmax(0,1fr);height:auto;min-height:0;max-height:none}
  .doccard .mini{width:100%;height:96px}
  .ficha-archivo{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mini datos" "acciones acciones" "enviar enviar"}
  .ficha-archivo .acciones{justify-content:flex-start}
  .metodos{grid-template-columns:minmax(0,1fr)}
  .pasos{gap:var(--e-1) var(--e-3);font-size:.9em}
}

/* Navegación inferior: sólo en móvil, y con su hueco reservado abajo. */
@media (max-width:720px){
  .navmovil{display:flex}
  html[data-rol="ciudadano"] #sidebar{display:none}
  .ciu-kpis,.ciu-bloques,.ciu-docs,.dash-kpis,.dash-kpis-6,.intent-grid{grid-template-columns:minmax(0,1fr)}
  .ciu-cita{grid-template-columns:minmax(0,1fr)}
  .priority,.ciu-hero .priority{max-height:none}
  .screen>header h1{white-space:normal}
  body:has(.navmovil) #app{padding-bottom:calc(var(--navmovil-h) + env(safe-area-inset-bottom,0px) + var(--e-3))}
  body:has(.navmovil) #watermark{bottom:calc(var(--navmovil-h) + env(safe-area-inset-bottom,0px) + var(--e-2))}
  body:has(.navmovil) #toasts{bottom:calc(var(--navmovil-h) + env(safe-area-inset-bottom,0px) + var(--e-3))}
  body:has(.navmovil) #presbar{bottom:calc(var(--navmovil-h) + env(safe-area-inset-bottom,0px) + var(--e-2))}
}

@media (max-width:420px){
  #brand img{height:22px}
  .btn.primary{width:100%}
  #presbar{width:calc(100vw - 16px);justify-content:space-between}
  .tools-menu,.campana-panel{right:var(--e-2);left:var(--e-2);width:auto;min-width:0}
  .modal{padding:var(--e-4);border-radius:var(--r-md)}
  #panel{padding:var(--e-4) var(--e-3) var(--e-7)}
  .kv{grid-template-columns:minmax(0,1fr)}
  .preview,.relevo dl{grid-template-columns:minmax(0,1fr)}
}

/* El espacio ciudadano se diseña para el móvil primero: 360 px de objetivo. */
@media (max-width:380px){
  #main{padding:var(--e-3) var(--e-2) var(--e-7)}
  .screen.ciudadano .cols,.screen.ciudadano .kpis,.dash-bloques,.dash-estado{grid-template-columns:minmax(0,1fr)}
  /* A 360 px las cuatro tarjetas de inicio siguen legibles en dos columnas. */
  .ciu-kpis,.ciu-bloques{grid-template-columns:1fr}
  .ciu-servicios .btn{flex:1 1 100%}
  .screen.ciudadano .ciu-servicios .btn{width:100%}
  .screen.ciudadano .btn{width:100%;justify-content:center;min-height:var(--toque)}
  .screen.ciudadano .row{flex-wrap:wrap}
  .screen.ciudadano table.t{display:block}
  .screen.ciudadano dl.kv{grid-template-columns:minmax(0,1fr)}
  .screen.ciudadano dl.kv dt{color:var(--texto-3);font-size:.85em}
  .vacio{padding:var(--e-5) var(--e-3)}
  .uploader .zona{padding:var(--e-5) var(--e-3)}
}

/* Catálogo ciudadano + red institucional */
.btn-iniciar-tramite{font-weight:600;letter-spacing:.02em;white-space:nowrap}
.catalogo-buscar{margin:16px 0}
.catalogo-buscar input{width:100%;max-width:560px;font-size:1.05em;padding:12px 14px}
.ciu-recom{margin-bottom:16px}
.ficha-tramite{display:grid;gap:12px;margin:20px 0}
.ficha-tramite dt{font-size:.78em;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-3)}
.ficha-tramite dd{margin:0 0 16px;line-height:1.5}
.tramite-timeline{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:10px}
.tramite-timeline li{display:flex;gap:12px;align-items:flex-start;opacity:.55}
.tramite-timeline li.hecho,.tramite-timeline li.curso{opacity:1}
.tramite-timeline .dot{width:10px;height:10px;border-radius:50%;background:var(--linea);margin-top:6px;flex:none}
.tramite-timeline li.hecho .dot{background:var(--verde)}
.tramite-timeline li.curso .dot{background:var(--amarillo);box-shadow:0 0 0 3px color-mix(in srgb,var(--amarillo) 35%,transparent)}
.chip.fuente{font-size:.72em;text-transform:uppercase;letter-spacing:.04em}
.dash-inbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.dash-inbox h3{font-size:.85em;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-3);margin:0 0 8px}

/* =====================================================================
   PANTALLA DE ACCESO — Centro de Integridad Cívica (punto de entrada)
   ===================================================================== */
#app.modo-acceso{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:1fr;
}
#app.modo-acceso #topbar,
#app.modo-acceso #sidebar,
#app.modo-acceso #footer,
#app.modo-acceso #navmovil{display:none!important}
#app.modo-acceso #main{
  max-width:none;width:100%;margin:0;padding:0;min-height:100vh;
}

.profile-home{
  --ph-fondo:#08111E;
  --ph-fondo-2:#0B1320;
  --ph-card:#111C2A;
  --ph-border:#24364A;
  --ph-text:#F7FAFC;
  --ph-muted:#9FB0C3;
  --ph-accent:var(--naranja);
  --ph-accent-s:rgba(255,138,76,.14);
  --ph-glow:rgba(255,138,76,.08);
  position:relative;min-height:100vh;display:flex;flex-direction:column;
  color:var(--ph-text);background:var(--ph-fondo);
  overflow-x:hidden;
}
[data-theme="light"] .profile-home{
  --ph-fondo:#F5F7FA;--ph-fondo-2:#EDF1F7;--ph-card:#FFFFFF;
  --ph-border:#E2E8F0;--ph-text:#172033;--ph-muted:#617087;
  --ph-accent-s:rgba(194,65,12,.08);--ph-glow:rgba(194,65,12,.06);
}

.profile-home-bg{
  pointer-events:none;position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%, var(--ph-glow), transparent 62%),
    radial-gradient(circle at 85% 75%, rgba(94,200,248,.04), transparent 45%),
    linear-gradient(180deg, var(--ph-fondo-2) 0%, var(--ph-fondo) 48%, var(--ph-fondo) 100%);
}
.profile-home-bg::before,
.profile-home-bg::after{
  content:'';position:absolute;inset:0;opacity:.35;
  background-image:
    linear-gradient(var(--ph-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--ph-border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}
.profile-home-bg::after{
  opacity:.18;background-size:24px 24px;background-image:radial-gradient(circle, var(--ph-border) 1px, transparent 1px);
}

.profile-home-head,
.profile-home-main,
.profile-home-foot{position:relative;z-index:1}

.profile-home-head{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--e-4);
  max-width:1400px;width:100%;margin:0 auto;padding:var(--e-6) var(--e-6) var(--e-4);
}
.ph-brand{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap}
.ph-brand img{height:32px;width:auto;display:block}
.ph-sep{width:1px;height:26px;background:var(--ph-border);margin:0 var(--e-1)}
.ph-leady{font-weight:600;letter-spacing:var(--tracking);color:var(--ph-text)}
.ph-sub{color:var(--ph-muted);font-size:var(--fs-0)}
.profile-home-head-text{flex:1 1 420px;min-width:0}
.profile-home-head-text h1{
  margin:0 0 6px;font-size:clamp(2rem,3.2vw,3.25rem);line-height:var(--lh-1);
  letter-spacing:.01em;font-weight:600;
  animation:phFadeUp 420ms var(--ease) both;
}
.ph-tagline{margin:0 0 6px;font-size:clamp(1rem,1.4vw,1.25rem);color:var(--ph-muted);animation:phFadeUp 420ms var(--ease) 60ms both}
.ph-system{margin:0;font-size:var(--fs-0);color:var(--ph-muted);max-width:52ch;animation:phFadeUp 420ms var(--ease) 100ms both}
.profile-home-tools{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center}

.profile-home-main{
  flex:1;display:flex;flex-direction:column;align-items:center;
  max-width:1400px;width:100%;margin:0 auto;padding:0 var(--e-6) var(--e-5);
}
.profile-hero{text-align:center;margin-bottom:var(--e-5);animation:phFadeUp 420ms var(--ease) 140ms both}
.ph-welcome{margin:0 0 4px;font-size:var(--fs-0);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ph-muted)}
.profile-hero h2{margin:0;font-size:clamp(1.25rem,2vw,1.75rem);font-weight:600;line-height:var(--lh-2)}

.profile-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--e-4);
  width:100%;list-style:none;margin:0;padding:0;
}
.profile-card{
  grid-column:span 4;display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-3);
  min-height:168px;padding:var(--e-5);
  background:var(--ph-card);border:1px solid var(--ph-border);border-radius:var(--r-lg);
  color:var(--ph-text);text-align:left;cursor:pointer;
  box-shadow:var(--sombra-1);
  transition:transform 200ms var(--ease),border-color 200ms var(--ease),box-shadow 200ms var(--ease),background 200ms var(--ease);
  animation:phCardIn 440ms var(--ease) var(--ph-delay,0ms) both;
}
.profile-card:nth-child(n+4){grid-column:span 3}
.profile-card-icon{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--r-md);
  background:var(--ph-accent-s);color:var(--ph-accent);
  transition:color 200ms var(--ease),background 200ms var(--ease),transform 200ms var(--ease);
}
.profile-card-icon svg{display:block}
.profile-card-body{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;width:100%}
.profile-card-title{
  font-size:clamp(1rem,1.2vw,1.35rem);line-height:var(--lh-2);letter-spacing:.02em;
  text-transform:uppercase;font-weight:600;
}
.profile-card-sub{font-size:var(--fs-0);color:var(--ph-muted);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.profile-card-meta{font-size:var(--fs-0);color:var(--ph-muted);line-height:var(--lh-3)}
.profile-card-desc{font-size:var(--fs-1);color:var(--ph-muted);line-height:var(--lh-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.profile-card-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;
  font-size:var(--fs-0);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--ph-accent);opacity:0;transform:translateX(-4px);
  transition:opacity 200ms var(--ease),transform 200ms var(--ease);
}
.profile-card-cta svg{transition:transform 200ms var(--ease)}
.profile-card:hover,
.profile-card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--ph-accent);
  box-shadow:var(--sombra-2),0 0 0 1px var(--ph-accent-s);
}
.profile-card:hover .profile-card-icon,
.profile-card:focus-visible .profile-card-icon{color:var(--ph-accent);transform:scale(1.04)}
.profile-card:hover .profile-card-cta,
.profile-card:focus-visible .profile-card-cta{opacity:1;transform:translateX(0)}
.profile-card:hover .profile-card-cta svg,
.profile-card:focus-visible .profile-card-cta svg{transform:translateX(3px)}
.profile-card:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}
.profile-card.entering{transform:scale(.985);opacity:.88;transition-duration:180ms}

.profile-card--orange{--ph-accent:#FF8A4C;--ph-accent-s:rgba(255,138,76,.14);--ph-glow:rgba(255,138,76,.10)}
.profile-card--amber{--ph-accent:#F5C13D;--ph-accent-s:rgba(245,193,61,.14);--ph-glow:rgba(245,193,61,.08)}
.profile-card--blue{--ph-accent:#5EC8F8;--ph-accent-s:rgba(94,200,248,.12);--ph-glow:rgba(94,200,248,.08)}
.profile-card--violet{--ph-accent:#A78BFA;--ph-accent-s:rgba(167,139,250,.12);--ph-glow:rgba(167,139,250,.07)}
.profile-card--gold{--ph-accent:#E8C468;--ph-accent-s:rgba(232,196,104,.12);--ph-glow:rgba(232,196,104,.08)}
.profile-card--teal{--ph-accent:#2DD4BF;--ph-accent-s:rgba(45,212,191,.12);--ph-glow:rgba(45,212,191,.08)}
.profile-card--green{--ph-accent:#3FBF77;--ph-accent-s:rgba(63,191,119,.13);--ph-glow:rgba(63,191,119,.08)}

.profile-home-extra{display:flex;justify-content:center;margin-top:var(--e-5);animation:phFadeUp 420ms var(--ease) 320ms both}
.profile-home-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-3);
  max-width:1400px;width:100%;margin:0 auto;padding:var(--e-4) var(--e-6) var(--e-6);
  font-size:var(--fs-0);color:var(--ph-muted);
}
.ph-status{display:inline-flex;align-items:center;gap:8px}
.ph-dot{width:8px;height:8px;border-radius:50%;background:var(--verde-solido);box-shadow:0 0 0 3px var(--verde-s)}

@keyframes phFadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes phCardIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.user-menu-caja{position:relative;display:inline-flex}
.user-menu-trigger{
  display:inline-flex;align-items:center;gap:8px;max-width:min(280px,42vw);
  padding:4px 10px 4px 4px;min-height:var(--toque);
  border:1px solid transparent;border-radius:var(--r-pill);
  background:transparent;color:var(--texto);cursor:pointer;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.user-menu-trigger:hover{background:var(--elevada);border-color:var(--linea)}
.user-menu-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left;line-height:1.25}
.user-menu-text strong{font-size:var(--fs-0);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.user-menu-text span{font-size:.78rem;color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.user-menu-panel{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  min-width:240px;padding:var(--e-2);
  background:var(--popover-bg);color:var(--popover-fg);
  border:1px solid var(--popover-border);border-radius:var(--r-md);
  box-shadow:var(--sombra-3);
}
.user-menu-head{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-2) var(--e-3) var(--e-3);border-bottom:1px solid var(--linea);margin-bottom:var(--e-1)}
.user-menu-head strong{display:block;line-height:var(--lh-2)}
.user-menu-head span{display:block;font-size:var(--fs-0);color:var(--texto-2)}
.user-menu-panel button{
  display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--popover-fg);font:inherit;padding:9px var(--e-3);min-height:38px;
  border-radius:var(--r-sm);cursor:pointer;
  transition:background var(--t) var(--ease);
}
.user-menu-panel button:hover{background:var(--popover-selected-bg);color:var(--popover-selected-fg)}
.user-perfil-modal{display:flex;gap:var(--e-4);align-items:flex-start;flex-wrap:wrap}

#sidebar .sidebar-foot{
  margin-top:auto;padding:var(--e-3) var(--e-3) 0;border-top:1px solid var(--linea);
}
#sidebar .sidebar-foot .btn{width:100%;justify-content:flex-start}

@media (max-width:1100px){
  .profile-card,.profile-card:nth-child(n+4){grid-column:span 6}
}
@media (max-width:720px){
  .profile-home-head{padding:var(--e-5) var(--e-4) var(--e-3)}
  .profile-home-main{padding:0 var(--e-4) var(--e-4)}
  .profile-home-foot{padding:var(--e-3) var(--e-4) var(--e-5)}
  .profile-grid{grid-template-columns:1fr;gap:var(--e-3)}
  .profile-card,.profile-card:nth-child(n+4){grid-column:auto;min-height:148px}
  .profile-card-cta{opacity:1;transform:none}
  .user-menu-text{display:none}
}
@media (max-width:900px){
  .user-menu-panel{right:var(--e-2);left:var(--e-2);width:auto;min-width:0}
}

/* =====================================================================
   19. IMPRESIÓN
   La marca de agua es discreta pero no ocultable: también se imprime (§4).
   ===================================================================== */
@media print{
  #sidebar,#topbar .tools,.navmovil,#presbar,#toasts,.campana-panel{display:none}
  #app{grid-template-columns:minmax(0,1fr)}
  body{background:#fff;color:#000}
  .surface,.metrica,.tablabox,.doccard,.modal{box-shadow:none;border-color:#999}
  #watermark{position:static;opacity:1;color:#000}
}