/* Identidad visual v2 del panel acore — Fase 0 (SOLO INTERFAZ). Especificación: docs/design/IDENTIDAD_VISUAL_v1.md

   REGLA QUE MANDA SOBRE TODO EL ARCHIVO: con la bandera apagada NO APLICA NI UNA REGLA. Todo el CSS
   cuelga de `html[data-identidad="v2"]` (lo pone identidad.js solo con la bandera encendida); lo único
   que no cuelga son las declaraciones que no pintan nada por sí solas (@font-face, @keyframes).
   El candado `tests/e2e_identidad_fase0.py` lo comprueba regla por regla.

   NO se edita `yc-tokens.css` (generado, «no editar a mano»): los colores y la tipografía nuevos se
   consiguen REDEFINIENDO sus tokens `--yc-*` aquí, dentro de v2, con especificidad suficiente para
   ganarle a `[data-appearance][data-theme]` del design system. */

/* ---- Fuentes autoalojadas (OFL; ver el doc). Subconjuntos latin y latin-ext. Sin terceros. ---- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/Manrope-var-ext.3911b66d.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/Manrope-var.a30ddcd3.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url("fonts/MartianMono-var-ext.c26a87ee.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url("fonts/MartianMono-var.d0be3a78.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- Tokens `--id-*` ----------------------------------------------------------------------------- */
html[data-identidad="v2"]{
  /* grafito y superficies */
  --id-grafito:#17191C; --id-grafito-2:#23272D; --id-grafito-3:#2E3238;
  --id-fondo:#F1F2F0; --id-tarjeta:#FFFFFF; --id-tarjeta-2:#F6F7F5;
  --id-linea:#E1E3E0; --id-linea-fuerte:#C9CCD1;
  /* texto */
  --id-texto:#17191C; --id-texto-2:#5F6570; --id-texto-3:#6F7580;
  --id-menu-texto:#C9CCD1; --id-menu-tenue:#8A909B; --id-menu-sub:#9AA0AA;
  /* acento (el operador elige; por omisión lima). Solo en lo interactivo: ítem activo, logo, foco, selección */
  --id-acento:#C8F04A; --id-acento-ink:#17191C;
  /* estados FIJOS (no dependen del acento): fondo, texto, ícono */
  --id-por-acreditar-bg:#E6E8EB; --id-por-acreditar-fg:#2B3038;
  --id-revision-bg:#FFE19A;      --id-revision-fg:#5E3F00;
  --id-disputado-bg:#FFD2C8;     --id-disputado-fg:#6B1E12;
  --id-acreditado-bg:#CFEFDD;    --id-acreditado-fg:#0F5C3A;
  --id-descartado-bg:#ECEDEA;    --id-descartado-fg:#4A4F58;
  --id-alerta-bg:#FFD2C8; --id-alerta-fg:#6B1E12; --id-alerta-ico:#B3261E;
  /* radios */
  --id-r-barra:18px; --id-r-pastilla:18px; --id-r-tarjeta:14px; --id-r-sello:13px; --id-r-menu:20px;
  /* tipografía */
  --id-font-texto:'Manrope', 'IBM Plex Sans', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --id-font-mono:'Martian Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --id-t-titulo:24px; --id-t-cuerpo:13px; --id-t-tabla:12.5px; --id-t-etiqueta:11px; --id-t-importe:15px;
  /* escalas de tamaño de ícono */
  --id-ico-menu:18px; --id-ico-sello:15px; --id-ico-vacio:24px;
  /* densidad de tablas: la mueve la tarjeta de usuario (clase `id-dens-*` en <html>) */
  --id-fila-alto:36px; --id-fila-pad-y:8px; --id-fila-fs:13px;
}
html[data-identidad="v2"][data-acento="cobalto"]{--id-acento:#3D6BFF; --id-acento-ink:#FFFFFF}
html[data-identidad="v2"][data-acento="rosa"]{--id-acento:#FF4DA6; --id-acento-ink:#1A1318}
html[data-identidad="v2"].id-dens-compacta{--id-fila-alto:30px; --id-fila-pad-y:5px; --id-fila-fs:12px}
html[data-identidad="v2"].id-dens-comoda{--id-fila-alto:44px; --id-fila-pad-y:13px; --id-fila-fs:13.5px}

/* ---- Los tokens del design system, repuntados (solo claro) -------------------------------------------
   Especificidad (0,3,1): le gana a `[data-appearance="cuadricula"][data-theme=…]` (0,2,0). Con esto el
   panel entero —que consume `--yc-*` por los alias de index.html— toma la paleta y la tipografía nuevas
   sin tocar una sola regla suya. */
html[data-identidad="v2"][data-appearance][data-theme]{
  --yc-bg:#F1F2F0; --yc-bg-subtle:#E9EAE7; --yc-surface:#FFFFFF; --yc-surface-elevated:#FFFFFF;
  --yc-border:#DADCD8; --yc-divider:#E7E9E5; --yc-border-control:#B4B8B3;
  --yc-text:#17191C; --yc-text-secondary:#5F6570; --yc-text-tertiary:#6F7580; --yc-text-disabled:#959B96;
  --yc-brand-base:#17191C; --yc-brand-strong:#17191C; --yc-brand-accent:#17191C; --yc-brand-subtle:#E6E8EB;
  --yc-focus-ring:#17191C; --yc-text-on-brand:#FFFFFF;
  --yc-font-sans:var(--id-font-texto); --yc-font-mono:var(--id-font-mono);
  --yc-radius-card:14px; --yc-radius-control:10px;
  /* los estados del panel, a los de la identidad (misma tinta y mismo fondo que los sellos) */
  --good:#0F5C3A; --good-bg:#CFEFDD;
  --warn:#5E3F00; --warn-bg:#FFE19A;
  --crit:#B3261E; --crit-bg:#FFD2C8;
  --gray:#2B3038; --gray-bg:#E6E8EB;
}

html[data-identidad="v2"] body{background:var(--id-fondo)}
html[data-identidad="v2"] .shell{background:var(--id-fondo)}

/* ---- Barra lateral flotante, grafito ------------------------------------------------------------------ */
html[data-identidad="v2"] .sidebar{
  width:208px; margin:10px 0 10px 10px; height:calc(100% - 20px);
  background:var(--id-grafito); border:0; border-radius:var(--id-r-barra);
  padding:14px 8px 10px; gap:2px; overflow:hidden;
  /* dentro de la barra el «tema» es oscuro: los tokens que las reglas heredadas usan para el menú
     (hover, activo, etiquetas) se redefinen aquí y no hace falta reescribir cada una */
  --ink:#FFFFFF; --ink-2:var(--id-menu-texto); --muted:var(--id-menu-tenue);
  --surface-2:var(--id-grafito-2); --line:var(--id-grafito-3);
  --info:var(--id-acento-ink); --info-bg:var(--id-acento);
  --warn:var(--id-grafito); --warn-bg:var(--id-linea-fuerte);
}
html[data-identidad="v2"] .sidebar.collapsed{width:64px; padding:14px 8px 10px; align-items:stretch}

html[data-identidad="v2"] .sidebar-head{padding:2px 4px 10px 8px; border-bottom:0; min-height:0; gap:10px}
html[data-identidad="v2"] .sidebar.collapsed .sidebar-head{padding:0 0 8px; gap:6px; align-items:center}
/* El chip de marca (Dirección, 2026-10-01, chip n.º 1 «sello con signo de dinero»): ficha cuadrada redondeada en el
   acento, MÁS GRANDE que la de antes (36 px expandido, 40 px en el riel; radio = 30 % del lado, como la maqueta). Un
   sello no se parece a un botón: sin hover, sin foco, sin cursor de mano y sin pieza animada. */
html[data-identidad="v2"] .sidebar .mark{width:36px; height:36px; border-radius:11px; box-shadow:none; flex:none;
  background:var(--id-acento); color:var(--id-acento-ink); cursor:default}
html[data-identidad="v2"] .sidebar.collapsed .mark{width:40px; height:40px; border-radius:12px}
html[data-identidad="v2"] .sidebar .mark svg{width:21px; height:21px}
html[data-identidad="v2"] .sidebar.collapsed .mark svg{width:23px; height:23px}
html[data-identidad="v2"] .sidebar .brandblock .eyebrow{display:none}
html[data-identidad="v2"] .sidebar .wordmark{font-family:var(--id-font-texto); font-weight:800; font-size:17px; text-transform:uppercase;
  letter-spacing:.06em; color:#FFFFFF}
html[data-identidad="v2"] .sidebar .collapse-toggle{width:32px; height:32px; border-radius:16px; color:var(--id-menu-texto)}
html[data-identidad="v2"] .sidebar .collapse-toggle:hover{background:var(--id-grafito-2); color:#FFFFFF}
html[data-identidad="v2"] .sidebar .collapse-toggle svg{width:18px; height:18px}
html[data-identidad="v2"] .sidebar.collapsed .collapse-toggle svg{transform:none}

html[data-identidad="v2"] .sidenav{padding:0; min-height:0; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:#3A3F47 transparent}

/* Ítems del menú: píldoras de 36 px, ícono Lucide de 18, el activo en el acento */
html[data-identidad="v2"] .sidebar .navitem{height:36px; padding:0 10px; border-radius:18px; gap:10px;
  font-size:var(--id-t-cuerpo); font-weight:500; margin-bottom:0; color:var(--ink-2)}
html[data-identidad="v2"] .sidebar .navitem svg{width:var(--id-ico-menu); height:var(--id-ico-menu)}
html[data-identidad="v2"] .sidebar .navitem:hover{background:var(--id-grafito-2); color:#FFFFFF}
html[data-identidad="v2"] .sidebar .navitem.active{background:var(--id-acento); color:var(--id-acento-ink); font-weight:700}
/* foco visible: dos anillos hacia adentro (grafito + blanco), legibles sobre grafito Y sobre el acento */
html[data-identidad="v2"] .sidebar :is(.navitem, .collapse-toggle, .id-uc):focus-visible{outline:none;
  box-shadow:inset 0 0 0 2px var(--id-grafito), inset 0 0 0 4px #FFFFFF}
html[data-identidad="v2"] .sidebar .id-uc:focus-visible{box-shadow:0 0 0 2px var(--id-acento)}

/* Encabezados de grupo: rótulo en versalitas, sin ícono propio, el plegado de siempre */
html[data-identidad="v2"] .sidebar .navgroup{height:34px; padding:8px 10px 0; margin-top:0; border-radius:12px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--id-menu-tenue); background:transparent}
html[data-identidad="v2"] .sidebar .navgroup:hover{background:transparent; color:#FFFFFF}
html[data-identidad="v2"] .sidebar:not(.collapsed) .navgroup > svg:not(.navchevron){display:none}
html[data-identidad="v2"] .sidebar .navgroup ~ .navitem:not(.navgroup){padding-left:10px}
html[data-identidad="v2"] .sidebar .navchevron{width:14px; height:14px; margin-right:6px}
html[data-identidad="v2"] .sidebar .navgroup + .navitem{margin-top:0}
html[data-identidad="v2"] .sidebar .navitem-legacy{color:var(--id-menu-sub); font-weight:500}
html[data-identidad="v2"] .sidebar .navitem-legacy:hover,
html[data-identidad="v2"] .sidebar .navitem-legacy.active{color:#FFFFFF}
html[data-identidad="v2"] .sidebar .navitem-legacy.active{color:var(--id-acento-ink)}
html[data-identidad="v2"] .sidebar .navseccion{padding-left:10px; color:#6F7580}
html[data-identidad="v2"] .sidebar .navsep{background:var(--id-grafito-3)}
html[data-identidad="v2"] .sidebar .navitem .nav-count{background:var(--id-linea-fuerte); color:var(--id-grafito);
  border-radius:9px; padding:1px 7px; font-size:10.5px; font-weight:700; letter-spacing:0}

/* Riel de 64 px: solo íconos; el nombre sale al pasar el cursor o enfocar (`.id-tip`, identidad.js).
   La etiqueta sigue en el árbol de accesibilidad: se oculta a la vista, no al lector de pantalla. */
html[data-identidad="v2"] .sidebar.collapsed .navitem{width:44px; margin:0 auto; padding:0; justify-content:center}
html[data-identidad="v2"] .sidebar.collapsed .navitem .label{display:block; position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
html[data-identidad="v2"] .sidebar.collapsed .navcat{border-top:1px solid var(--id-grafito-3); margin-top:6px; padding-top:6px}
html[data-identidad="v2"] .sidebar.collapsed .navcat:first-of-type{margin-top:6px}
html[data-identidad="v2"] .sidebar.collapsed .navgroup{display:none}
html[data-identidad="v2"] .sidebar.collapsed .navcat.colapsada:not([data-navcat="archivo"]) .navitem:not(.navgroup){display:flex}
/* «Archivo» en el riel: su encabezado queda como botón de ícono (es lo único que lo despliega) */
html[data-identidad="v2"] .sidebar.collapsed .navcat[data-navcat="archivo"] .navgroup{display:flex; width:44px; height:36px;
  margin:0 auto; padding:0; justify-content:center; border-radius:18px; color:var(--id-menu-texto)}
html[data-identidad="v2"] .sidebar.collapsed .navcat[data-navcat="archivo"] .navgroup:hover{background:var(--id-grafito-2)}
html[data-identidad="v2"] .sidebar.collapsed .navcat[data-navcat="archivo"] .navgroup .navchevron{display:none}

/* Nombre del riel */
html[data-identidad="v2"] .id-tip{position:fixed; z-index:950; height:32px; padding:0 14px; display:flex; align-items:center;
  background:var(--id-grafito); color:#FFFFFF; border-radius:16px; font-weight:700; font-size:12.5px;
  white-space:nowrap; pointer-events:none; box-shadow:0 0 0 1px var(--id-grafito-3)}
html[data-identidad="v2"] .id-tip[hidden]{display:none}

/* ---- Menú lateral · opción A «Por flujo del dinero» (Dirección, 2026-10-01) ---------------------------------------
   Secciones HOY · DINERO · COMPROBANTES, padres que se pliegan (Entrada del dinero, Expedientes, Archivo), el hijo activo
   en el acento, y el riel de 64 px donde cada padre abre su lista a un lado. El marcado lo reordena identidad.js
   (`montarMenuLateral`); aquí solo se viste. Ninguna regla casa sin la bandera. */

html[data-identidad="v2"] .sidebar .id-sec{padding:12px 10px 4px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--id-menu-tenue); line-height:1.3}
html[data-identidad="v2"] .sidebar .id-seccion:first-child .id-sec{padding-top:4px}
html[data-identidad="v2"] .sidebar .id-linea{height:1px; background:var(--id-grafito-3); margin:8px 10px}

/* el padre: ícono, rótulo, (contador), flecha; plegado o desplegado lo dice la flecha y `aria-expanded` */
html[data-identidad="v2"] .sidebar .navcat.id-par > .navgroup{height:36px; padding:0 10px; margin:0; border-radius:18px;
  font-size:var(--id-t-cuerpo); font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-2)}
html[data-identidad="v2"] .sidebar .navcat.id-par > .navgroup:hover{background:var(--id-grafito-2); color:#FFFFFF}
html[data-identidad="v2"] .sidebar .navcat.id-par > .navgroup > svg:not(.navchevron){display:block}
html[data-identidad="v2"] .sidebar .navcat.id-par.con-activo > .navgroup{color:#FFFFFF; font-weight:700}
html[data-identidad="v2"] .sidebar .navcat.id-par.con-activo > .navgroup > svg:first-child{color:var(--id-acento)}
html[data-identidad="v2"] .sidebar .id-cnt{margin-left:auto; flex:none; font-size:10.5px; font-weight:700; line-height:1.4;
  border-radius:9px; padding:1px 7px; background:#3A4048; color:#E4E6EA; font-variant-numeric:tabular-nums}
html[data-identidad="v2"] .sidebar .navcat.id-par > .navgroup > .id-cnt + .navchevron{margin-left:8px}

/* los hijos: sangrados bajo una línea fina, 32 px, sin ícono */
html[data-identidad="v2"] .sidebar .id-kids{margin:0 0 2px 19px; padding-left:8px; border-left:1.5px solid var(--id-grafito-3);
  display:flex; flex-direction:column; gap:1px}
html[data-identidad="v2"] .sidebar .navcat.colapsada > .id-kids,
html[data-identidad="v2"] .sidebar .id-exp.id-plegado > .id-kids{display:none}
html[data-identidad="v2"] .sidebar .id-kids .navitem{height:32px; padding:0 10px; border-radius:16px; font-size:var(--id-t-cuerpo)}
html[data-identidad="v2"] .sidebar .id-kids .navitem > svg{display:none}
html[data-identidad="v2"] .sidebar .id-kid{display:flex; align-items:center; width:100%; height:32px; padding:0 10px; border-radius:16px;
  font-size:var(--id-t-cuerpo); font-weight:500; color:var(--ink-2); text-decoration:none; white-space:nowrap; cursor:pointer}
/* «Del módulo»: lo que no depende de la campaña elegida, bajo una línea y un rótulo (Difusiones · Envíos por corrida) */
html[data-identidad="v2"] .sidebar .id-kids-grupo{margin:6px 4px 2px; padding:7px 6px 0; border-top:1px solid var(--id-grafito-3);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--id-texto-3, var(--ink-2)); white-space:nowrap}
html[data-identidad="v2"] .sidebar .id-kid:hover{background:var(--id-grafito-2); color:#FFFFFF}
html[data-identidad="v2"] .sidebar .id-kid.active{background:var(--id-acento); color:var(--id-acento-ink); font-weight:700}
html[data-identidad="v2"] .sidebar :is(.id-kid, .id-chev):focus-visible{outline:none;
  box-shadow:inset 0 0 0 2px var(--id-grafito), inset 0 0 0 4px #FFFFFF}

/* «Comprobantes»: el rótulo ya lo da la sección; el encabezado mudo queda en el DOM (la paleta lo lee) pero no se ve ni se tabula.
   Y como ya no se puede plegar desde aquí, un plegado guardado de antes no puede esconder a Expedientes. */
html[data-identidad="v2"] .sidebar .navcat.id-sin-cabecera > .navgroup{display:none}
html[data-identidad="v2"] .sidebar .navcat.id-sin-cabecera.colapsada .navitem:not(.navgroup){display:flex}

/* Expedientes: la pantalla (que navega) + la flecha que pliega sus vistas */
html[data-identidad="v2"] .sidebar .id-fila{position:relative}
html[data-identidad="v2"] .sidebar .id-chev{position:absolute; right:4px; top:4px; width:28px; height:28px; padding:0; border:0;
  border-radius:14px; background:transparent; color:var(--id-menu-tenue); display:flex; align-items:center; justify-content:center; cursor:pointer}
html[data-identidad="v2"] .sidebar .id-chev svg{width:14px; height:14px; transition:transform .15s}
html[data-identidad="v2"] .sidebar .id-exp.id-plegado .id-chev svg{transform:rotate(-90deg)}
html[data-identidad="v2"] .sidebar .id-chev:hover{background:var(--id-grafito-2); color:#FFFFFF}
html[data-identidad="v2"] .sidebar .id-fila .navitem.active ~ .id-chev{color:var(--id-acento-ink)}
html[data-identidad="v2"] .sidebar .id-fila .navitem.active ~ .id-chev:hover{background:rgba(23,25,28,.14)}
/* con una vista conocida activa, el padre pasa a «ancestro» (blanco, ícono en el acento) y la vista lleva el relleno */
html[data-identidad="v2"] .sidebar .id-exp.id-hijo-activo .navitem.active{background:transparent; color:#FFFFFF; font-weight:700}
html[data-identidad="v2"] .sidebar .id-exp.id-hijo-activo .navitem.active:hover{background:var(--id-grafito-2)}
html[data-identidad="v2"] .sidebar .id-exp.id-hijo-activo .navitem.active > svg{color:var(--id-acento)}
html[data-identidad="v2"] .sidebar .id-exp.id-hijo-activo .id-fila .navitem.active ~ .id-chev{color:var(--id-menu-tenue)}

/* ---- el riel de 64 px: íconos; los padres abren su lista a un lado, con el cursor o el foco (Esc la cierra) ---- */
html[data-identidad="v2"] .sidebar.collapsed .id-sec,
html[data-identidad="v2"] .sidebar.collapsed .id-cnt,
html[data-identidad="v2"] .sidebar.collapsed .id-chev{display:none}
html[data-identidad="v2"] .sidebar.collapsed .id-seccion + .id-seccion{border-top:1px solid var(--id-grafito-3); margin-top:6px; padding-top:6px}
html[data-identidad="v2"] .sidebar.collapsed .id-linea{margin:6px 8px}
html[data-identidad="v2"] .sidebar.collapsed .navcat,
html[data-identidad="v2"] .sidebar.collapsed .navcat:first-of-type{border-top:0; margin-top:0; padding-top:0}
html[data-identidad="v2"] .sidebar.collapsed .navcat.id-par > .navgroup{display:flex; width:44px; height:36px; margin:0 auto; padding:0;
  justify-content:center; border-radius:18px; color:var(--id-menu-texto)}
html[data-identidad="v2"] .sidebar.collapsed .navcat.id-par > .navgroup:hover{background:var(--id-grafito-2); color:#FFFFFF}
html[data-identidad="v2"] .sidebar.collapsed .navcat.id-grupo.con-activo-hijo > .navgroup{background:var(--id-acento); color:var(--id-acento-ink)}
html[data-identidad="v2"] .sidebar.collapsed .navcat.id-grupo.con-activo-hijo > .navgroup > svg:first-child{color:inherit}
html[data-identidad="v2"] .sidebar.collapsed .id-exp.id-hijo-activo .navitem.active{background:var(--id-acento); color:var(--id-acento-ink)}
html[data-identidad="v2"] .sidebar.collapsed .id-exp.id-hijo-activo .navitem.active > svg{color:inherit}
html[data-identidad="v2"] .sidebar.collapsed .id-grupo > .id-kids{display:none}
html[data-identidad="v2"] .sidebar.collapsed .id-grupo:not(.id-vuelo-cerrado):is(:hover, :focus-within) > .id-kids{
  display:flex; position:fixed; left:var(--id-vuelo-izq, 74px); top:var(--id-vuelo-arriba, 0); z-index:950; margin:0; gap:2px;
  min-width:172px; padding:9px 8px 8px; border:0; border-radius:14px; background:var(--id-grafito);
  box-shadow:0 0 0 2px var(--id-fondo), 0 10px 28px rgba(23,25,28,.22)}
html[data-identidad="v2"] .sidebar.collapsed .id-grupo > .id-kids::before{content:attr(data-nombre); padding:0 8px 5px;
  font-size:12.5px; font-weight:700; color:#FFFFFF; white-space:nowrap}
html[data-identidad="v2"] .sidebar.collapsed .id-grupo > .id-kids::after{content:""; position:absolute; left:-12px; top:0; width:12px; height:100%}
html[data-identidad="v2"] .sidebar.collapsed .id-kids .navitem{width:100%; height:30px; margin:0; padding:0 8px; justify-content:flex-start}
html[data-identidad="v2"] .sidebar.collapsed .id-kids .navitem .label{position:static; width:auto; height:auto; overflow:visible; clip:auto}
html[data-identidad="v2"] .sidebar.collapsed .id-kids .id-kid{height:30px; padding:0 8px}

/* ---- Tarjeta de usuario ------------------------------------------------------------------------------------ */
html[data-identidad="v2"] .sidebar .id-uc{margin-top:8px; flex:none; display:flex; align-items:center; gap:10px; width:100%;
  padding:8px; border:0; border-radius:16px; background:var(--id-grafito-2); color:#FFFFFF; font:inherit; text-align:left; cursor:pointer}
html[data-identidad="v2"] .sidebar .id-uc:hover{background:var(--id-grafito-3)}
html[data-identidad="v2"] .id-av{width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; background:var(--id-acento); color:var(--id-acento-ink); font-weight:800; font-size:12px; letter-spacing:0}
html[data-identidad="v2"] .id-av.id-av-grande{width:44px; height:44px; font-size:15px}
html[data-identidad="v2"] .sidebar .id-uc-txt{min-width:0; flex:1; display:flex; flex-direction:column}
/* el nombre y el rol SE PARTEN en renglones, no se cortan con puntos suspensivos: un nombre largo no puede quedar a medias */
html[data-identidad="v2"] .sidebar .id-uc-nombre{font-size:12.5px; font-weight:700; color:#FFFFFF; line-height:1.25;
  white-space:normal; overflow-wrap:anywhere}
html[data-identidad="v2"] .sidebar .id-uc-rol{font-size:11px; color:var(--id-menu-sub); line-height:1.25;
  white-space:normal; overflow-wrap:anywhere}
html[data-identidad="v2"] .sidebar .id-uc-flecha{flex:none; display:flex; color:var(--id-menu-texto)}
html[data-identidad="v2"] .sidebar .id-uc-flecha svg{width:16px; height:16px; transform:rotate(180deg)}
html[data-identidad="v2"] .sidebar.collapsed .id-uc{width:44px; margin:8px auto 0; padding:5px; justify-content:center}
html[data-identidad="v2"] .sidebar.collapsed .id-uc-txt,
html[data-identidad="v2"] .sidebar.collapsed .id-uc-flecha{display:none}

/* ---- El menú de usuario ----------------------------------------------------------------------------------------- */
html[data-identidad="v2"] .id-pop{position:fixed; z-index:900; width:316px; max-height:calc(100vh - 36px); overflow-y:auto;
  background:#FFFFFF; color:var(--id-texto); border:1px solid var(--id-linea-fuerte); border-radius:var(--id-r-menu);
  padding:16px; display:flex; flex-direction:column; gap:14px; font-family:var(--id-font-texto); font-size:var(--id-t-cuerpo)}
html[data-identidad="v2"] .id-pop[hidden]{display:none}
html[data-identidad="v2"] .id-pop button{font:inherit; border:0; background:none; color:inherit; padding:0; cursor:pointer}
html[data-identidad="v2"] .id-pop :focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] .id-pop-quien{display:flex; gap:12px; align-items:center}
html[data-identidad="v2"] .id-pop-datos{min-width:0}
html[data-identidad="v2"] .id-pop-nombre{font-size:14.5px; font-weight:800; letter-spacing:-.01em; overflow-wrap:anywhere}
html[data-identidad="v2"] .id-pop-correo{font-size:12px; color:var(--id-texto-2); overflow-wrap:anywhere}
html[data-identidad="v2"] .id-pop-lab{font-size:var(--id-t-etiqueta); font-weight:700; letter-spacing:.05em; color:var(--id-texto-3);
  text-transform:uppercase; margin-bottom:7px}
html[data-identidad="v2"] .id-pop-rolareas{display:flex; gap:6px; flex-wrap:wrap}
html[data-identidad="v2"] .id-chip{display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:0 11px; border-radius:13px;
  background:var(--id-fondo); font-size:12px; font-weight:600; color:#2B3038}
html[data-identidad="v2"] .id-chip svg{width:14px; height:14px}
html[data-identidad="v2"] .id-chip.id-chip-rol{background:var(--id-grafito); color:#FFFFFF}
html[data-identidad="v2"] .id-chip.id-chip-vacio{color:var(--id-texto-2); font-weight:500}
html[data-identidad="v2"] .id-pop-hr{height:1px; background:var(--id-linea); margin:0 -2px}
html[data-identidad="v2"] .id-pop-tema{display:flex; gap:6px}
html[data-identidad="v2"] .id-tb{flex:1; min-height:38px; border-radius:19px; background:var(--id-fondo); display:flex; align-items:center;
  justify-content:center; gap:7px; font-weight:600; font-size:12.5px}
html[data-identidad="v2"] .id-tb.on{background:#FFFFFF; box-shadow:inset 0 0 0 2px var(--id-grafito); font-weight:800}
html[data-identidad="v2"] .id-tb .id-ck{display:none}
html[data-identidad="v2"] .id-tb.on .id-ck{display:flex}
html[data-identidad="v2"] .id-tb .id-ck svg{width:14px; height:14px; stroke-width:2.4}
html[data-identidad="v2"] .id-dot{width:14px; height:14px; border-radius:50%; flex:none}
html[data-identidad="v2"] .id-dot-lima{background:#C8F04A; box-shadow:inset 0 0 0 1px #17191C}
html[data-identidad="v2"] .id-dot-cobalto{background:#3D6BFF}
html[data-identidad="v2"] .id-dot-rosa{background:#FF4DA6}
html[data-identidad="v2"] .id-pop-den{display:flex; background:var(--id-fondo); border-radius:19px; padding:3px; min-height:38px}
html[data-identidad="v2"] .id-db{flex:1; border-radius:16px; font-size:12.5px; font-weight:600; color:#3A3F47}
html[data-identidad="v2"] .id-db.on{background:var(--id-grafito); color:#FFFFFF; font-weight:700}
html[data-identidad="v2"] .id-pop-lista{display:flex; flex-direction:column; gap:2px}
html[data-identidad="v2"] .id-mi{display:flex; align-items:center; gap:11px; min-height:38px; padding:0 12px; border-radius:19px;
  font-weight:600; width:100%; text-align:left}
html[data-identidad="v2"] .id-mi:hover:not([disabled]){background:var(--id-fondo)}
html[data-identidad="v2"] .id-mi .id-mi-ico{width:18px; height:18px; flex:none}
html[data-identidad="v2"] .id-mi-txt{flex:1; min-width:0}
html[data-identidad="v2"] .id-mi-hint{margin-left:auto; font-family:var(--id-font-mono); font-size:10.5px; color:var(--id-texto-2);
  background:var(--id-fondo); border-radius:8px; padding:3px 7px}
html[data-identidad="v2"] .id-mi-peligro{color:#6B1E12}
html[data-identidad="v2"] .id-mi-peligro .id-mi-ico{color:#B3261E}
html[data-identidad="v2"] .id-mi-motivo{display:block; font-size:11px; font-weight:500; color:var(--id-texto-3); line-height:1.3}
html[data-identidad="v2"] .id-mi[disabled]{cursor:not-allowed; color:var(--id-texto-3); padding-top:6px; padding-bottom:6px}
html[data-identidad="v2"] .id-mi[disabled] .id-mi-ico{color:var(--id-texto-3)}

/* ---- Cabecera de cada pestaña: conserva TODO lo de hoy, con la piel nueva --------------------------------- */
html[data-identidad="v2"] .topbar{height:56px; min-height:56px; padding:0 18px; border-bottom:0; background:transparent; gap:14px}
html[data-identidad="v2"] .topbar h1{font-size:var(--id-t-titulo); font-weight:800; letter-spacing:-.02em; color:var(--id-texto)}
html[data-identidad="v2"] #page-sub{font-size:var(--id-t-cuerpo); color:var(--id-texto-2)}
/* el tema claro/oscuro pasa a la tarjeta de usuario: el medio círculo sale de la cabecera */
html[data-identidad="v2"] #btn-theme{display:none}
html[data-identidad="v2"] .topbar-right .icon-btn{width:36px; height:36px; border-radius:18px; background:#FFFFFF; border:0;
  color:var(--id-texto)}
html[data-identidad="v2"] .topbar-right .icon-btn svg{width:18px; height:18px; transition:transform .5s ease}
html[data-identidad="v2"] .topbar-right .icon-btn:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #btn-refresh:is(:hover, :focus-visible) svg{transform:rotate(180deg)}

/* ---- Familias de estado (FIJAS, no dependen del acento): color + ícono + texto -------------------------------- */
html[data-identidad="v2"] .id-estado{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px 0 8px;
  border-radius:var(--id-r-sello); width:fit-content; font-size:11.5px; font-weight:700; white-space:nowrap; line-height:1}
html[data-identidad="v2"] .id-estado::before{content:""; width:var(--id-ico-sello); height:var(--id-ico-sello); flex:none;
  background:currentColor; -webkit-mask:var(--id-ico) center / contain no-repeat; mask:var(--id-ico) center / contain no-repeat}
html[data-identidad="v2"] .id-estado--por-acreditar{color:var(--id-por-acreditar-fg); background:var(--id-por-acreditar-bg);
  --id-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12H16l-2 3H10L8 12H2'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E")}
html[data-identidad="v2"] .id-estado--revision{color:var(--id-revision-fg); background:var(--id-revision-bg);
  --id-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}
html[data-identidad="v2"] .id-estado--disputado{color:var(--id-disputado-fg); background:var(--id-disputado-bg);
  --id-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}
html[data-identidad="v2"] .id-estado--acreditado{color:var(--id-acreditado-fg); background:var(--id-acreditado-bg);
  --id-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0'/%3E%3Cpath d='M16 9l-5.5 5.5L8 12'/%3E%3C/svg%3E")}
html[data-identidad="v2"] .id-estado--descartado{color:var(--id-descartado-fg); background:var(--id-descartado-bg);
  --id-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0'/%3E%3Cpath d='M15 9l-6 6'/%3E%3Cpath d='M9 9l6 6'/%3E%3C/svg%3E")}
/* Alerta de alto riesgo: fondo, texto y el ícono en su propio rojo */
html[data-identidad="v2"] .id-alerta{display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:var(--id-r-tarjeta);
  background:var(--id-alerta-bg); color:var(--id-alerta-fg)}
html[data-identidad="v2"] .id-alerta svg{width:18px; height:18px; flex:none; color:var(--id-alerta-ico)}

/* ---- Animación de íconos: SOLO CSS, solo al pasar el cursor, enfocar con teclado o cambiar de estado.
   300–600 ms, una sola vez; «Cargando» es el único bucle. Las acciones que mueven dinero NO llevan
   ninguna de estas clases y no se animan. `prefers-reduced-motion` las apaga todas. ---------------------- */
html[data-identidad="v2"] .id-a{transform-box:fill-box}
html[data-identidad="v2"] .id-a-dr{stroke-dasharray:1}
html[data-identidad="v2"] :is(.navitem, .id-mi, .icon-btn, .id-host):is(:hover, :focus-visible) .id-a-dr{animation:id-dibuja .6s ease-in-out 1 both}
html[data-identidad="v2"] .id-a-d2{animation-delay:.08s !important}
html[data-identidad="v2"] .id-a-d3{animation-delay:.16s !important}
html[data-identidad="v2"] .id-a-needle{transform-origin:0% 100%}
html[data-identidad="v2"] :is(.navitem, .id-mi, .icon-btn, .id-host):is(:hover, :focus-visible) .id-a-needle{animation:id-aguja .6s ease-in-out 1}
html[data-identidad="v2"] :is(.navitem, .id-mi, .icon-btn, .id-host):is(:hover, :focus-visible) .id-a-thead{animation:id-punta .6s ease-in-out 1 both}
html[data-identidad="v2"] :is(.navitem, .id-mi, .icon-btn, .id-host):is(:hover, :focus-visible) .id-a-uback{animation:id-suma .6s ease-in-out 1}
html[data-identidad="v2"] :is(.navitem, .id-mi, .icon-btn, .id-host):is(:hover, :focus-visible) .id-a-atop{animation:id-arriba .6s ease-in-out 1}
html[data-identidad="v2"] :is(.navitem, .id-mi, .icon-btn, .id-host):is(:hover, :focus-visible) .id-a-abot{animation:id-abajo .6s ease-in-out 1}
html[data-identidad="v2"] :is(.navitem, .id-mi, .icon-btn, .id-host):is(:hover, :focus-visible) .id-a-tray{animation:id-bandeja .6s ease-in-out 1}
/* cambio de estado (lo pone la Fase 1 al cambiar la familia de un sello): la ficha del ícono «pop» */
html[data-identidad="v2"] .id-estado.id-estado--cambia::before{animation:id-pop .45s ease-out 1}
html[data-identidad="v2"] .id-girar{animation:id-gira .9s linear infinite}

@keyframes id-dibuja{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes id-aguja{0%,100%{transform:rotate(0)}30%{transform:rotate(-55deg)}60%{transform:rotate(28deg)}80%{transform:rotate(-6deg)}}
@keyframes id-punta{0%{opacity:0;transform:translate(-3px,3px)}100%{opacity:1;transform:translate(0,0)}}
@keyframes id-suma{0%{opacity:.25;transform:translateX(-4px)}100%{opacity:1;transform:translateX(0)}}
@keyframes id-arriba{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes id-abajo{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@keyframes id-bandeja{0%,100%{transform:translateY(0)}40%{transform:translateY(3px)}70%{transform:translateY(-1px)}}
@keyframes id-pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes id-gira{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  html[data-identidad="v2"] .id-a,
  html[data-identidad="v2"] .id-a *,
  html[data-identidad="v2"] .id-estado::before,
  html[data-identidad="v2"] .id-girar{animation:none !important}
  html[data-identidad="v2"] .topbar-right .icon-btn svg,
  html[data-identidad="v2"] .sidebar,
  html[data-identidad="v2"] .sidebar .id-chev svg,
  html[data-identidad="v2"] .sidebar .navchevron{transition:none !important}
  html[data-identidad="v2"] #btn-refresh:is(:hover, :focus-visible) svg{transform:none}
}

/* ======================================================================================================
   FASE 1 · EXPEDIENTES completo + FICHA DE MOVIMIENTO (SOLO INTERFAZ, Dirección 2026-09-30).
   Mismas reglas de siempre: TODO cuelga de `html[data-identidad="v2"]` (con la bandera apagada no aplica
   ni una regla), no se toca lógica, y lo que ya estaba resuelto —el apagado que se lee apagado SIN color
   (candado + borde discontinuo), el sello de frescura que no se corta— se respeta. Las reglas viejas
   viven en `index.html` y en el CSS que cada módulo inyecta; aquí se les gana por especificidad
   (`#pane-expedientes`), nunca con `!important`.
   La densidad por tabla (`table[data-densidad]`) NO se pisa: aquí no se fija ningún `padding` de celda.
   ====================================================================================================== */

/* ---- Tokens y íconos de la Fase 1 --------------------------------------------------------------------- */
html[data-identidad="v2"]{
  --id-acento-suave:color-mix(in srgb, var(--id-acento) 45%, #FFFFFF);
  --id-hover:#E6E8E3; --id-fila-hover:#F6F7F4; --id-linea-fila:#EEF0EC; --id-linea-cab:#DDE0DB; --id-borde-ctrl:#CDD1D6;
  --id-gris-tinta:#3A3F47;
  --id-i-inbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12H16l-2 3H10L8 12H2'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
  --id-i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --id-i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --id-i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0'/%3E%3Cpath d='M16 9l-5.5 5.5L8 12'/%3E%3C/svg%3E");
  --id-i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0'/%3E%3Cpath d='M15 9l-6 6'/%3E%3Cpath d='M9 9l6 6'/%3E%3C/svg%3E");
  --id-i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

/* ---- Familia de estado de un sello: las TRES variables que la definen --------------------------------------
   Un sello es siempre color + ícono + texto. Quien lleva una familia solo fija `--f-bg`, `--f-fg` y `--f-ico`;
   la forma es una sola (abajo). Tabla estado → familia: docs/design/IDENTIDAD_VISUAL_v1.md §9. */
html[data-identidad="v2"] #pane-expedientes :is(.ex-tag, .badge, .expp-chip),
html[data-identidad="v2"] #pane-movimientos :is(.badge),
html[data-identidad="v2"] .pdt-wrap :is(.badge, .pdt-chip){
  --f-bg:var(--id-por-acreditar-bg); --f-fg:var(--id-por-acreditar-fg); --f-ico:var(--id-i-inbox);
}
/* tono → familia (lo que hoy ya decide el panel; solo cambia qué sello lo pinta) */
html[data-identidad="v2"] #pane-expedientes :is(.ex-ok, .t-ok, .b-good),
html[data-identidad="v2"] #pane-movimientos .b-good,
html[data-identidad="v2"] .pdt-wrap .b-good,
html[data-identidad="v2"] #pane-expedientes .expp-chip.t-ok{
  --f-bg:var(--id-acreditado-bg); --f-fg:var(--id-acreditado-fg); --f-ico:var(--id-i-check);
}
html[data-identidad="v2"] #pane-expedientes :is(.ex-rev, .t-rev, .b-warn),
html[data-identidad="v2"] #pane-movimientos .b-warn,
html[data-identidad="v2"] .pdt-wrap .b-warn,
html[data-identidad="v2"] #pane-expedientes .expp-chip.t-rev{
  --f-bg:var(--id-revision-bg); --f-fg:var(--id-revision-fg); --f-ico:var(--id-i-clock);
}
html[data-identidad="v2"] #pane-expedientes :is(.t-mal, .b-crit),
html[data-identidad="v2"] #pane-movimientos .b-crit,
html[data-identidad="v2"] .pdt-wrap .b-crit,
html[data-identidad="v2"] #pane-expedientes .expp-chip.t-mal{
  --f-bg:var(--id-disputado-bg); --f-fg:var(--id-disputado-fg); --f-ico:var(--id-i-alert);
}
html[data-identidad="v2"] #pane-expedientes :is(.ex-des),
html[data-identidad="v2"] #pane-expedientes .badge.b-gray-x{
  --f-bg:var(--id-descartado-bg); --f-fg:var(--id-descartado-fg); --f-ico:var(--id-i-x);
}
html[data-identidad="v2"] #pane-expedientes :is(.b-gray, .b-info),
html[data-identidad="v2"] #pane-movimientos :is(.b-gray, .b-info),
html[data-identidad="v2"] .pdt-wrap :is(.b-gray, .b-info){
  --f-bg:var(--id-por-acreditar-bg); --f-fg:var(--id-por-acreditar-fg); --f-ico:var(--id-i-inbox);
}
html[data-identidad="v2"] #pane-expedientes .badge.b-info,
html[data-identidad="v2"] #pane-movimientos .badge.b-info,
html[data-identidad="v2"] .pdt-wrap .badge.b-info{--f-ico:var(--id-i-info)}

/* ESTADOS v2 → familia, por la CLAVE del estado (`data-estado`, que estampa la lista y la ficha).
   Gana al tono: `planeado`/`anticipo`/`confirmado`/`asignado` hoy van en verde («no espera a nadie») pero NO están
   acreditados — «acreditado» solo lo dice `aplicado` (nunca una afirmación de dinero que no consta). */
html[data-identidad="v2"] #pane-expedientes :is(.ex-tag, .expp-chip)[data-estado="aplicado"]{
  --f-bg:var(--id-acreditado-bg); --f-fg:var(--id-acreditado-fg); --f-ico:var(--id-i-check)}
html[data-identidad="v2"] #pane-expedientes :is(.ex-tag, .expp-chip):is([data-estado="planeado"], [data-estado="anticipo"], [data-estado="confirmado"],
    [data-estado="asignado"], [data-estado="leyendo"], [data-estado="esperando_cliente"], [data-estado="esperando_banco"],
    [data-estado="por_planear"]){
  --f-bg:var(--id-por-acreditar-bg); --f-fg:var(--id-por-acreditar-fg); --f-ico:var(--id-i-inbox)}
html[data-identidad="v2"] #pane-expedientes :is(.ex-tag, .expp-chip):is([data-estado="duda_de_lectura"], [data-estado="ilegible"], [data-estado="sin_candidato"],
    [data-estado="sugerido"], [data-estado="posible_repetido"], [data-estado="atribucion_en_conflicto"],
    [data-estado="coincidencia_debil"], [data-estado="indistinguible"], [data-estado="vencido"], [data-estado="sin_trato"],
    [data-estado="sin_replica"], [data-estado="no_traducible"], [data-estado="saldo_reservado"], [data-estado="no_disponible"],
    [data-estado="fecha_de_pago_mal_leida"], [data-estado="registro_no_cuadra_con_books"], [data-estado="recargo_cobrado_de_mas"], [data-estado="customer_misassigned"],
    [data-estado="revision"], [data-estado="sin_movimiento"]){
  --f-bg:var(--id-revision-bg); --f-fg:var(--id-revision-fg); --f-ico:var(--id-i-clock)}
html[data-identidad="v2"] #pane-expedientes :is(.ex-tag, .expp-chip)[data-estado="en_disputa"]{
  --f-bg:var(--id-disputado-bg); --f-fg:var(--id-disputado-fg); --f-ico:var(--id-i-alert)}
html[data-identidad="v2"] #pane-expedientes :is(.ex-tag, .expp-chip):is([data-estado="descartado"], [data-estado="rechazado"], [data-estado="duplicado"],
    [data-estado="reemplazado"], [data-estado="cobro_propio"]){
  --f-bg:var(--id-descartado-bg); --f-fg:var(--id-descartado-fg); --f-ico:var(--id-i-x)}

/* LA FORMA del sello: 24 px, radio 12, ícono Lucide de 15 delante (máscara), texto 11.5/700. Sin borde. */
html[data-identidad="v2"] #pane-expedientes :is(.ex-tag, .badge, .expp-chip),
html[data-identidad="v2"] #pane-movimientos .badge,
html[data-identidad="v2"] .pdt-wrap :is(.badge, .pdt-chip){
  display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 10px 0 7px; border:0; border-radius:12px;
  background:var(--f-bg); color:var(--f-fg); font-size:11.5px; font-weight:700; line-height:1.2; white-space:nowrap; letter-spacing:0;
}
html[data-identidad="v2"] #pane-expedientes :is(.ex-tag, .expp-chip)::before{content:""; flex:none; width:15px; height:15px; background:currentColor;
  -webkit-mask:var(--f-ico) center / contain no-repeat; mask:var(--f-ico) center / contain no-repeat}
/* el `.badge` ya trae su punto con glifo (✓ ! ✕ • –): se cambia por el ícono de la familia, el mismo en todos */
html[data-identidad="v2"] #pane-expedientes .badge .dot:not(.era-llena):not(.era-hueca),
html[data-identidad="v2"] #pane-movimientos .badge .dot,
html[data-identidad="v2"] .pdt-wrap .badge .dot{
  width:15px; height:15px; min-width:15px; border-radius:0; font-size:0; background:currentColor !important;
  -webkit-mask:var(--f-ico) center / contain no-repeat; mask:var(--f-ico) center / contain no-repeat; flex:none}
html[data-identidad="v2"] #pane-expedientes .badge:has(> .dot.era-llena, > .dot.era-hueca){min-height:22px; font-size:11px}

/* ---- Cabecera: el atajo «Cola de trabajo | Todos» -------------------------------------------------------- */
html[data-identidad="v2"] #seg-atajos{background:#FFFFFF; border-radius:19px; padding:3px; gap:0; align-items:center; border:0; height:44px}
html[data-identidad="v2"] #seg-atajos .seg-chip{height:38px; padding:0 16px; border:0; border-radius:16px; background:transparent; color:var(--id-texto-2);
  font:inherit; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:0; transition:background .3s}
html[data-identidad="v2"] #seg-atajos .seg-chip:hover{background:var(--id-hover); color:var(--id-texto)}
html[data-identidad="v2"] #seg-atajos .seg-chip[aria-pressed="true"],
html[data-identidad="v2"] #seg-atajos .seg-chip[aria-selected="true"],
html[data-identidad="v2"] #seg-atajos .seg-chip.on,
html[data-identidad="v2"] #seg-atajos .seg-chip.activo{
  background:var(--id-acento); color:var(--id-acento-ink); font-weight:800}
html[data-identidad="v2"] #seg-atajos .seg-chip:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #seg-atajos .seg-n{color:inherit}
html[data-identidad="v2"] #seg-atajos .seg-n::before{color:inherit}

/* ---- La barra de filtros ----------------------------------------------------------------------------------- */
html[data-identidad="v2"] #pane-expedientes .ex-filtros{column-gap:8px; row-gap:6px}
html[data-identidad="v2"] #pane-expedientes .ex-pick select,
html[data-identidad="v2"] #pane-expedientes .ex-vista-btn,
html[data-identidad="v2"] #pane-expedientes .etqf-btn,
html[data-identidad="v2"] #pane-expedientes .ex-tam select,
html[data-identidad="v2"] #pane-expedientes .ex-rango-campo,
html[data-identidad="v2"] #pane-expedientes .btn-columnas{
  height:38px; border:0; border-radius:19px; background:#FFFFFF; color:var(--id-texto); font:inherit; font-size:13px; font-weight:600;
  padding:0 13px; box-shadow:none; transition:background .3s}
html[data-identidad="v2"] #pane-expedientes .ex-pick select:hover,
html[data-identidad="v2"] #pane-expedientes .ex-vista-btn:hover,
html[data-identidad="v2"] #pane-expedientes .etqf-btn:hover,
html[data-identidad="v2"] #pane-expedientes .ex-vista-btn[aria-expanded="true"]{background:var(--id-hover)}
html[data-identidad="v2"] #pane-expedientes .ex-pick select.es-puesto{background:var(--id-acento-suave); font-weight:700}
html[data-identidad="v2"] #pane-expedientes .ex-pick select.es-limpiado,
html[data-identidad="v2"] #pane-expedientes .ex-pick select.es-parcial{
  background:var(--id-revision-bg); color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-expedientes :is(.ex-pick select, .ex-vista-btn, .etqf-btn, .ex-buscar, .ex-kbd, .ex-limpiar-caja .op-btn, .ex-pop-item):focus-visible{
  outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-expedientes .ex-buscar{height:38px; border:0; border-radius:19px; background:#FFFFFF; color:var(--id-texto); font-size:13px;
  padding:0 62px 0 16px}
html[data-identidad="v2"] #pane-expedientes .ex-buscar::placeholder{color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .ex-kbd{font-family:var(--id-font-mono); font-size:10px; font-weight:500; color:var(--id-texto-2);
  background:var(--id-tarjeta-2); border:1px solid #D5D8DC; border-radius:7px; padding:3px 6px; right:10px}
html[data-identidad="v2"] #pane-expedientes .ex-limpiar-caja .op-btn{height:38px; border:0; background:transparent; font-size:13px; font-weight:700;
  text-decoration:underline; text-underline-offset:3px; border-radius:19px; padding:0 10px; color:var(--id-texto)}
html[data-identidad="v2"] #pane-expedientes .ex-limpiar-caja .op-btn:hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-expedientes .ex-puestos,
html[data-identidad="v2"] #pane-expedientes .ex-pie-corte,
html[data-identidad="v2"] #pane-expedientes .ex-foot-estado,
html[data-identidad="v2"] #pane-expedientes .ex-cuenta{color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .ex-pie-corte,
html[data-identidad="v2"] #pane-expedientes .ex-g-fecha{font-family:var(--id-font-mono); font-size:11px}
html[data-identidad="v2"] #pane-expedientes .ex-nota-filtro{color:var(--id-revision-fg)}
/* menú «Vista ▾» y desplegables propios */
html[data-identidad="v2"] #pane-expedientes .ex-pop-vista,
html[data-identidad="v2"] .ex-pop-vista,
html[data-identidad="v2"] .etqf-pop{border:1px solid var(--id-borde-ctrl); border-radius:16px; padding:6px;
  background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] .ex-pop-vista .ex-pop-titulo{font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--id-texto-3); padding:8px 10px 4px}
html[data-identidad="v2"] .ex-pop-vista .ex-pop-item{height:36px; padding:0 10px; border-radius:10px; font-size:13px; font-weight:600; transition:background .3s}
html[data-identidad="v2"] .ex-pop-vista .ex-pop-item:hover:not(:disabled),
html[data-identidad="v2"] .ex-pop-vista .ex-pop-item:focus-visible{background:#ECEDEA}
html[data-identidad="v2"] .ex-pop-vista .ex-pop-item[aria-checked="true"]{background:var(--id-acento-suave); font-weight:800}
html[data-identidad="v2"] .ex-pop-vista .ex-pop-item::before{color:var(--id-grafito)}
html[data-identidad="v2"] .ex-pop-vista .ex-pop-item:disabled{color:#6F7580}
html[data-identidad="v2"] .ex-pop-vista .ex-pop-sep{border-top:1px solid #E3E5E1}

/* ---- La alerta «se pelean un depósito» ----------------------------------------------------------------------- */
html[data-identidad="v2"] #pane-expedientes .ex-alerta{padding:11px 14px; border:0; border-radius:14px; background:var(--id-alerta-bg); color:var(--id-alerta-fg);
  font-size:12.5px; line-height:1.4; gap:14px; flex-wrap:nowrap}
html[data-identidad="v2"] #pane-expedientes .ex-alerta b{color:var(--id-alerta-fg); font-size:13.5px; font-weight:800}
html[data-identidad="v2"] #pane-expedientes .ex-alerta .op-btn{height:36px; padding:0 16px; border:0; border-radius:18px; background:var(--id-grafito); color:#FFFFFF;
  font-size:13px; font-weight:700; white-space:nowrap; flex:none; transition:background .3s}
html[data-identidad="v2"] #pane-expedientes .ex-alerta .op-btn:hover{background:#3A3F47}
html[data-identidad="v2"] #pane-expedientes .ex-alerta .op-btn:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
/* con el filtro puesto, la alerta pasa a ser el rótulo de lo que se mira: sigue siendo roja de texto, sin gritar el fondo */
html[data-identidad="v2"] #pane-expedientes .ex-alerta.es-puesta{background:var(--id-alerta-bg); color:var(--id-alerta-fg)}
html[data-identidad="v2"] #pane-expedientes .ex-alerta.es-puesta b{color:var(--id-alerta-fg)}

/* ---- Resumen, cuadre y tarjetas KPI de la vista Tarjetas ---------------------------------------------------------- */
html[data-identidad="v2"] #pane-expedientes :is(.tile, .ex-card, .ex-resumen, .ex-cobertura, .ex-cuadre){border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-expedientes .ex-cuadre-mal{background:var(--id-alerta-bg); color:var(--id-alerta-fg)}
html[data-identidad="v2"] #pane-expedientes .ex-cuadre-mal .ex-cuadre-tit{color:var(--id-alerta-fg)}
html[data-identidad="v2"] #pane-expedientes .tile .v{font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
html[data-identidad="v2"] #pane-expedientes .tile .k{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}

/* ---- Vista TARJETAS ------------------------------------------------------------------------------------------------ */
html[data-identidad="v2"] #pane-expedientes .ex-item{border:0; border-radius:14px; background:#FFFFFF; padding:12px 16px 12px 12px; margin-bottom:8px; box-shadow:none;
  transition:background .3s}
html[data-identidad="v2"] #pane-expedientes .ex-item:hover{background:#F9FAF7}
html[data-identidad="v2"] #pane-expedientes .ex-thumb{border:0; border-radius:9px; background:#E4E6E2; overflow:hidden}
html[data-identidad="v2"] #pane-expedientes .ex-thumb img{border-radius:9px}
html[data-identidad="v2"] #pane-expedientes .ex-thumb.is-none{color:var(--id-texto-2); font-size:11px}
html[data-identidad="v2"] #pane-expedientes .ex-head{gap:8px; align-items:center}
html[data-identidad="v2"] #pane-expedientes .ex-head strong{font-size:18px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin-left:auto; order:9}
html[data-identidad="v2"] #pane-expedientes .ex-fase2{height:22px; display:inline-flex; align-items:center; padding:0 9px; border:1px solid var(--id-borde-ctrl);
  border-radius:11px; font-size:11.5px; font-weight:600; color:var(--id-gris-tinta); background:transparent}
html[data-identidad="v2"] #pane-expedientes .ex-pelota{height:22px; display:inline-flex; align-items:center; padding:0 9px; border-radius:11px; font-size:11.5px;
  font-weight:600; background:transparent; border:1px solid var(--id-borde-ctrl); color:var(--id-gris-tinta)}
html[data-identidad="v2"] #pane-expedientes .ex-pelota.ex-pel-nos{background:var(--id-grafito); border-color:var(--id-grafito); color:#FFFFFF}
html[data-identidad="v2"] #pane-expedientes .ex-plant{font-family:var(--id-font-texto); font-size:12.5px; color:var(--id-gris-tinta)}
html[data-identidad="v2"] #pane-expedientes .ex-why{font-size:13px; color:#2B3038; border:0; background:transparent; padding:0}
html[data-identidad="v2"] #pane-expedientes .ex-why.ex-revision{background:var(--id-revision-bg); color:var(--id-revision-fg); border:0; border-radius:10px; padding:6px 10px}
html[data-identidad="v2"] #pane-expedientes .ex-why.ex-alerta-dinero{background:var(--id-alerta-bg); color:var(--id-alerta-fg)}
html[data-identidad="v2"] #pane-expedientes .ex-paso{background:#F1F2F0; border:0; border-radius:10px; color:#3A3F47; font-size:11.5px}
html[data-identidad="v2"] #pane-expedientes .ex-paso b{color:#17191C}
html[data-identidad="v2"] #pane-expedientes .ex-meta{font-family:var(--id-font-mono); font-size:10.5px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .ex-rechazo{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:11px; border:1px solid var(--id-borde-ctrl);
  background:transparent; color:var(--id-gris-tinta); font-size:11.5px; font-weight:600}

/* ---- Vista TABLA y COLA --------------------------------------------------------------------------------------------- */
html[data-identidad="v2"] #pane-expedientes .tablewrap{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-expedientes table thead th{background:#FFFFFF; border-bottom:1px solid var(--id-linea-cab); border-right:0;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-expedientes table thead th[aria-sort="ascending"],
html[data-identidad="v2"] #pane-expedientes table thead th[aria-sort="descending"]{color:var(--id-texto)}
html[data-identidad="v2"] #pane-expedientes table tbody td{border-bottom:1px solid var(--id-linea-fila); border-right:0}
html[data-identidad="v2"] #pane-expedientes table tbody tr,
html[data-identidad="v2"] #pane-expedientes table tbody tr:nth-child(odd){background:#FFFFFF}
html[data-identidad="v2"] #pane-expedientes table tbody tr:hover,
html[data-identidad="v2"] #pane-expedientes table tbody tr:nth-child(odd):hover{background:var(--id-fila-hover)}
html[data-identidad="v2"] #pane-expedientes table tbody tr.sel,
html[data-identidad="v2"] #pane-expedientes table tbody tr.sel:hover{background:var(--id-acento-suave)}
html[data-identidad="v2"] #pane-expedientes table tbody tr.sel > td:first-child{box-shadow:inset 3px 0 0 0 var(--id-grafito)}
html[data-identidad="v2"] #pane-expedientes table tbody tr{transition:background .3s}
/* el ID, la fecha y las claves, en Martian Mono; la clave del expediente como ficha gris de radio 6 */
html[data-identidad="v2"] #pane-expedientes .idchip{font-family:var(--id-font-mono); font-size:11px; font-weight:500; background:var(--id-fondo); border:0; border-radius:6px;
  padding:2px 6px; color:var(--id-texto)}
html[data-identidad="v2"] #pane-expedientes a.idchip:hover,
html[data-identidad="v2"] #pane-expedientes button.idchip:hover{background:var(--id-acento-suave); color:var(--id-texto)}
html[data-identidad="v2"] #pane-expedientes td.ex-fecha,
html[data-identidad="v2"] #pane-expedientes td.mono{font-family:var(--id-font-mono); font-size:11px; color:#2B3038}
html[data-identidad="v2"] #pane-expedientes :is(td.ex-num, td.monto, th.ex-num){font-weight:800; font-size:13.5px; font-variant-numeric:tabular-nums; text-align:right}
html[data-identidad="v2"] #pane-expedientes th.ex-num{font-size:11px; font-weight:700}
html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla .ex-plant,
html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla .ex-cli{font-family:var(--id-font-texto); font-size:12px; color:#3A3F47}
/* encabezados de grupo de la Cola: la fila-resumen de fase y motivo */
html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla tbody tr.ex-grupo td{background:#F1F2EE; height:36px; border-bottom:1px solid #E3E5E1; font-size:11.5px;
  letter-spacing:.03em; text-transform:uppercase; color:#3A3F47}
html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla tbody tr.ex-grupo strong{font-weight:800; color:var(--id-texto)}
html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla tbody tr.ex-grupo-vacio td{background:#FFFFFF; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .ex-acc-mas{color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla tbody tr.ex-grupo .badge{vertical-align:middle; margin:0 4px}
/* pie con el conteo del servidor y la paginación: pastillas de 34 px */
html[data-identidad="v2"] #pane-expedientes :is(.ex-foot, .ex-foot-estado){color:var(--id-texto-2); font-size:12.5px}
html[data-identidad="v2"] #pane-expedientes .ex-foot .op-btn,
html[data-identidad="v2"] #pane-expedientes .ex-foot button{height:34px; padding:0 14px; border:0; border-radius:17px; background:#FFFFFF;
  font-size:12.5px; font-weight:700; color:var(--id-texto); transition:background .3s}
html[data-identidad="v2"] #pane-expedientes .ex-foot .op-btn:hover:not(:disabled),
html[data-identidad="v2"] #pane-expedientes .ex-foot button:hover:not(:disabled){background:var(--id-hover)}
html[data-identidad="v2"] #pane-expedientes .ex-foot :is(button:disabled, .op-btn:disabled){color:#8B919C; opacity:1; cursor:not-allowed}

/* ---- Estados de la lista: vacío (de sistema / por filtro) y cargando ------------------------------------------- */
html[data-identidad="v2"] #pane-expedientes .empty{background:#FFFFFF; border-radius:14px; color:var(--id-texto-2); font-size:13px}
html[data-identidad="v2"] #pane-expedientes .empty .op-btn,
html[data-identidad="v2"] #pane-expedientes .ex-amplia .op-btn{height:38px; padding:0 18px; border:1px solid var(--id-borde-ctrl); border-radius:19px;
  background:#FFFFFF; font-size:13px; font-weight:700; color:var(--id-texto); transition:background .3s}
html[data-identidad="v2"] #pane-expedientes .ex-amplia .op-btn:first-child{background:var(--id-acento); border-color:transparent; color:var(--id-acento-ink); font-weight:800}
html[data-identidad="v2"] #pane-expedientes .empty .op-btn:hover,
html[data-identidad="v2"] #pane-expedientes .ex-amplia .op-btn:hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-expedientes .ex-amplia .op-btn:first-child:hover{background:var(--id-acento); filter:brightness(.95)}
html[data-identidad="v2"] #pane-expedientes .empty.is-loading::before{animation:id-gira .9s linear infinite}

/* ---- Botones: pastillas de 38 px ---------------------------------------------------------------------------------------
   Solo los VIVOS. Los apagados de la botonera de la ficha conservan su forma (candado, borde discontinuo de 2 px, sin relleno):
   «apagado se lee apagado SIN el color» ya está resuelto en index.html y aquí solo se les redondea la esquina. */
html[data-identidad="v2"] #pane-expedientes .op-btn:not(:disabled):not([aria-disabled="true"]),
html[data-identidad="v2"] #pane-expedientes button.ghost:not(:disabled){
  height:38px; padding:0 16px; border:1px solid transparent; border-radius:19px; background:#FFFFFF; color:var(--id-texto); font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px; transition:background .3s}
html[data-identidad="v2"] #pane-expedientes .op-btn:not(:disabled):not([aria-disabled="true"]):hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-expedientes .op-btn.primary:not(:disabled):not([aria-disabled="true"]){background:var(--id-acento); color:var(--id-acento-ink); font-weight:800}
html[data-identidad="v2"] #pane-expedientes .op-btn.primary:not(:disabled):not([aria-disabled="true"]):hover{background:var(--id-acento); filter:brightness(.94)}
html[data-identidad="v2"] #pane-expedientes .op-btn.warn:not(:disabled):not([aria-disabled="true"]){background:var(--id-revision-bg); color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-expedientes .op-btn.peligro:not(:disabled):not([aria-disabled="true"]){background:#FFFFFF; color:var(--id-disputado-fg); box-shadow:inset 0 0 0 1.5px #B3261E}
html[data-identidad="v2"] #pane-expedientes .op-btn.peligro:not(:disabled):not([aria-disabled="true"]):hover{background:var(--id-disputado-bg); color:var(--id-disputado-fg)}
html[data-identidad="v2"] #pane-expedientes .op-btn:is(:disabled, [aria-disabled="true"]){border-radius:19px}
html[data-identidad="v2"] #pane-expedientes :is(.op-btn, button.ghost, .expp-tab, .expp-volver, .expp-nav):focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}

/* ======================================================================================================
   LA FICHA DEL EXPEDIENTE (`.expp-*`): cabecera, alertas, pestañas, cotejo y botonera
   ====================================================================================================== */
html[data-identidad="v2"] #pane-expedientes .expp-top{gap:12px}
html[data-identidad="v2"] #pane-expedientes .expp-top .titulo{font-family:var(--id-font-mono); font-size:20px; font-weight:600; color:var(--id-texto)}
html[data-identidad="v2"] #pane-expedientes .expp-volver,
html[data-identidad="v2"] #pane-expedientes .expp-nav{height:36px; padding:0 14px; border:0; border-radius:18px; background:#FFFFFF; color:var(--id-texto);
  font-size:13px; font-weight:600; transition:background .3s}
html[data-identidad="v2"] #pane-expedientes .expp-volver:hover,
html[data-identidad="v2"] #pane-expedientes .expp-nav:hover:not(:disabled){background:var(--id-hover)}
html[data-identidad="v2"] #pane-expedientes .expp-nav:disabled{color:#8B919C}
html[data-identidad="v2"] #pane-expedientes .expp-pos{font-family:var(--id-font-mono); font-size:11.5px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .expp-card,
html[data-identidad="v2"] #pane-expedientes .expp-visor{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-expedientes .expp-visor{background:#E9EAE7}
html[data-identidad="v2"] #pane-expedientes .expp-cab{padding:10px 18px}
html[data-identidad="v2"] #pane-expedientes .expp-cab .expp-monto{font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums}
html[data-identidad="v2"] #pane-expedientes .expp-cab-meta{font-family:var(--id-font-mono); font-size:11.5px; color:#2B3038}
html[data-identidad="v2"] #pane-expedientes .expp-origen{font-size:12.5px; font-weight:600; color:var(--id-gris-tinta)}
html[data-identidad="v2"] #pane-expedientes .expp-cab-estado{border-left:1px solid #E3E5E1}
html[data-identidad="v2"] #pane-expedientes .expp-turno{font-size:13px; font-weight:800; color:var(--id-texto)}
html[data-identidad="v2"] #pane-expedientes .expp-turno:not(.es-tuyo){font-weight:600; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .expp-cab .expp-detalle{font-size:12px; color:var(--id-texto-2); line-height:1.35}
html[data-identidad="v2"] #pane-expedientes .expp-chip{height:26px; font-size:11.5px}
/* los bloqueos vivos */
html[data-identidad="v2"] #pane-expedientes .expp-alertas{border:0; border-radius:14px; background:var(--id-alerta-bg); color:var(--id-alerta-fg); padding:6px 14px}
html[data-identidad="v2"] #pane-expedientes .expp-alertas .expp-bloqueo b{font-weight:800}
/* pestañas, VARIANTE B de la maqueta aprobada (Dirección, 2026-10-03): la seleccionada pesa más —fondo
   lima tintado, peso 800 y subrayado grafito de 4 px (el lima solo no alcanza 3:1 contra el fondo)—.
   Con contador y foco visible; las seis caben a 1280 sin cortarse (`e2e_ficha_redisenio`). */
html[data-identidad="v2"] #pane-expedientes .expp-tabs{border-bottom:1px solid var(--id-linea-cab); gap:2px}
html[data-identidad="v2"] #pane-expedientes .expp-tab{height:40px; padding:0 11px; border:0; border-bottom:4px solid transparent; border-radius:10px 10px 0 0; background:transparent;
  font-size:13px; font-weight:600; color:var(--id-texto-2); transition:background .3s, color .3s, border-color .3s}
html[data-identidad="v2"] #pane-expedientes .expp-tab:hover{background:#E6E8E3; color:var(--id-texto)}
/* El fondo tintado SIGUE AL ACENTO que eligió el operador (lima por omisión: #E4F4B0 ≈ 45 % de lima sobre blanco). */
html[data-identidad="v2"] #pane-expedientes .expp-tab[aria-selected="true"]{background:color-mix(in srgb, var(--id-acento) 45%, #FFFFFF); color:var(--id-texto); font-weight:800; border-bottom-color:var(--id-grafito)}
html[data-identidad="v2"] #pane-expedientes .expp-tab:focus-visible{outline:2px solid var(--id-grafito); outline-offset:-2px}
html[data-identidad="v2"] #pane-expedientes .expp-tab-n{background:#E6E8EB; color:#2B3038; border-radius:9px; padding:1px 7px; font-size:11px; font-weight:700}
html[data-identidad="v2"] #pane-expedientes .expp-tab[aria-selected="true"] .expp-tab-n{background:var(--id-grafito); color:#FFFFFF}
/* Que las seis quepan en UN renglón con el nombre largo de «Información» y «Conversación»: la columna
   de datos mide 457 px a 1280 y 522 a 1440 (medido). Por contenedor y no por ventana, porque depende
   también del menú lateral y del carril. Con el carril abierto a 1440 (414 px) ya no caben aun así y
   la barra desplaza (la pestaña elegida se trae a la vista). */
@container (max-width:560px){
  html[data-identidad="v2"] #pane-expedientes .expp-tab{padding:0 7px; font-size:12.5px}
}
@container (max-width:480px){
  html[data-identidad="v2"] #pane-expedientes .expp-tab{padding:0 5px; font-size:12px; gap:4px}
  html[data-identidad="v2"] #pane-expedientes .expp-tabs{gap:0}
  html[data-identidad="v2"] #pane-expedientes .expp-tab-n{padding:1px 5px}
}
@container (max-width:430px){
  html[data-identidad="v2"] #pane-expedientes .expp-tab{padding:0 4px; font-size:11.5px; gap:3px}
}
html[data-identidad="v2"] #pane-expedientes .expp-ficha-cab{padding:12px 16px}
/* el contenido: tarjetas blancas de radio 14, sin borde; rótulos en versalitas; ids, fechas y claves en mono */
html[data-identidad="v2"] #pane-expedientes .expp-flujo .ex-cat,
html[data-identidad="v2"] #pane-expedientes .expp-flujo .ex-ficha,
html[data-identidad="v2"] #pane-expedientes .expp-tabpanel > :is(section, details, .expp-bitacora, .expp-hist){
  background:#FFFFFF; border:0; border-radius:14px}
html[data-identidad="v2"] #pane-expedientes .expp-tabpanel:not([data-tab="raw"]) .ex-cat > .ex-grupo:first-child{font-size:14.5px; font-weight:800; color:var(--id-texto); text-transform:none; letter-spacing:0}
html[data-identidad="v2"] #pane-expedientes .ex-grupo{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-expedientes .ex-campo .c,
html[data-identidad="v2"] #pane-expedientes .expp-kv dt{color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .ex-campo{border-bottom:1px solid var(--id-linea-fila)}
html[data-identidad="v2"] #pane-expedientes :is(.ex-crudo, .dato-crudo),
html[data-identidad="v2"] #pane-expedientes .expp-hist .cuando{font-family:var(--id-font-mono)}
html[data-identidad="v2"] #pane-expedientes .expp-raw .ex-clave{font-family:var(--id-font-mono)}
html[data-identidad="v2"] #pane-expedientes .ex-campo .v.es-monto,
html[data-identidad="v2"] #pane-expedientes .expp-enfrentado .ex-campo .v.es-monto{font-weight:800; font-variant-numeric:tabular-nums; text-align:right}
html[data-identidad="v2"] #pane-expedientes .ex-confronta-tabla .ex-campo.es-cabecera .v,
html[data-identidad="v2"] #pane-expedientes .expp-careo-cab{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-expedientes .expp-dif{border-bottom:1px solid var(--id-linea-cab)}
html[data-identidad="v2"] #pane-expedientes .expp-dif-n{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
html[data-identidad="v2"] #pane-expedientes .expp-dif.es-dif .expp-dif-n{color:var(--id-disputado-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-sin-deposito{border:1px dashed #8B919C; border-radius:14px; background:transparent}
html[data-identidad="v2"] #pane-expedientes .expp-hist .cuando{color:#2B3038; font-size:11px}
html[data-identidad="v2"] #pane-expedientes .expp-bitacora summary,
html[data-identidad="v2"] #pane-expedientes .expp-careo-raw summary{font-weight:700}
/* EL SEMÁFORO «DÓNDE VA» de la cabecera, COMPACTO (maqueta aprobada, 2026-10-03; corrección por alto útil: una
   franja de ≤ 64 px). Verde = hecho, ámbar = el tramo actual (espera o problema), grafito = en curso, gris =
   pendiente; «sin curso» gris con borde discontinuo, «no acreditable» ámbar. Siempre ícono + texto + color; el
   tramo actual en negrita. */
html[data-identidad="v2"] #pane-expedientes .expp-cab{row-gap:4px}
html[data-identidad="v2"] #pane-expedientes .expp-sem{gap:3px; padding-top:0}
/* El alto útil a 1280×720 (corrección del 2026-10-03): en columna estrecha la tarjeta de la cabecera vuelve al
   relleno de 8 px que ya declaraba `ensureStyle` y que el de 14 px de v2 tapaba. */
@container (max-width:480px){
  html[data-identidad="v2"] #pane-expedientes .expp-cab{padding:6px 14px}
}
html[data-identidad="v2"] #pane-expedientes .expp-sem-lbl{font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-expedientes .expp-sem-sello{height:18px; border:0; border-radius:9px; padding:0 8px 0 5px; font-size:11.5px; font-weight:700}
html[data-identidad="v2"] #pane-expedientes .expp-sem-sello[data-tono="good"]{background:var(--id-acreditado-bg); color:var(--id-acreditado-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-sem-sello[data-tono="warn"]{background:var(--id-revision-bg); color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-sem-sello[data-tono="gray"]{background:var(--id-descartado-bg); color:var(--id-descartado-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-sem-sello[data-tono="ink"]{background:var(--id-grafito); color:#FFFFFF}
html[data-identidad="v2"] #pane-expedientes .expp-sem-sello[data-tono="crit"]{background:var(--id-disputado-bg); color:var(--id-disputado-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramos{gap:3px}
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo{border:0; border-radius:13px; padding:0 6px; height:24px; font-weight:600}
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo[data-tono="good"]{background:var(--id-acreditado-bg); color:var(--id-acreditado-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo[data-tono="warn"]{background:var(--id-revision-bg); color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo[data-tono="gray"]{background:var(--id-descartado-bg); color:var(--id-descartado-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo[data-tono="ink"]{background:var(--id-grafito); color:#FFFFFF}
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo[data-tono="crit"]{background:var(--id-disputado-bg); color:var(--id-disputado-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo[data-estado="sinc"],
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo[data-estado="pausa"],
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo[data-estado="error"]{border:1.5px dashed #9AA0A9}
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo .n{font-size:11.5px; font-weight:600}
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo[data-estado="actual"] .n,
html[data-identidad="v2"] #pane-expedientes .expp-sem-tramo[data-estado="noac"] .n{font-weight:800}
html[data-identidad="v2"] #pane-expedientes .expp-sem-caja .expp-sem-fila{font-size:12px}
html[data-identidad="v2"] #pane-expedientes .expp-sem-caja .expp-sem-fila b{white-space:nowrap}
html[data-identidad="v2"] #pane-expedientes .expp-sem-bloqueos[data-estado="con"]{color:var(--id-alerta-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-sem-bloqueos[data-estado="con"] svg{color:var(--id-alerta-ico)}
/* EL FOCO DEL SEMÁFORO (Dirección, 2026-10-03): un anillo SVG que RESPIRA alrededor del ícono del tramo ACTUAL,
   solo cuando el expediente está en curso o esperando (`data-estado="actual"`: ámbar o grafito «en curso»). Nada
   de JS: solo CSS (`animation`, 2 s). SIN animación en acreditado (el tramo es «hecho»), sin curso, no acreditable,
   corrección ni error de fase: ninguno de ellos trae el anillo en el DOM. Con `prefers-reduced-motion: reduce`
   se apaga por completo y queda el anillo ESTÁTICO. Es absoluto, centrado sobre el ícono y de 24 px —cabe dentro
   del tramo (24 px de alto)—: no mueve ni agranda nada. No depende del color: el tramo sigue llevando ícono,
   nombre y negrita. Esto NO es una acción de dinero (ningún botón que mueve dinero se anima). */
html[data-identidad="v2"] #pane-expedientes .expp-sem-foco{display:block; position:absolute; left:50%; top:50%;
  width:24px; height:24px; margin:-12px 0 0 -12px; overflow:visible; pointer-events:none}
html[data-identidad="v2"] #pane-expedientes .expp-sem-foco circle{fill:none; stroke:currentColor; stroke-width:1.5;
  transform-box:fill-box; transform-origin:center; opacity:.55; transform:scale(.85);
  animation:id-respira 2s ease-in-out infinite}
@keyframes id-respira{0%,100%{transform:scale(.7); opacity:.85}50%{transform:scale(1); opacity:.2}}
@media (prefers-reduced-motion: reduce){
  html[data-identidad="v2"] #pane-expedientes .expp-sem-foco circle{animation:none !important}
}
/* El renglón del origen en la cabecera: «WhatsApp · número» y, diferidos, persona y colonia del cliente. */
html[data-identidad="v2"] #pane-expedientes .expp-origen-ext{font-weight:500; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .expp-origen-ext[data-sugerido="1"]{color:var(--id-descartado-fg)}
/* la línea compacta del cliente */
html[data-identidad="v2"] #pane-expedientes .expp-cliente-lbl{font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-expedientes .expp-cliente-nom{font-size:13.5px; font-weight:800; color:var(--id-texto)}
html[data-identidad="v2"] #pane-expedientes .expp-cliente-num{font-family:var(--id-font-mono); font-size:11px; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-expedientes .expp-cliente-sello{height:18px; padding:0 9px 0 6px; border-radius:9px; font-size:11.5px; font-weight:700; background:var(--id-revision-bg); color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-cliente-sello[data-tono="gray"]{background:var(--id-descartado-bg); color:var(--id-descartado-fg)}
/* EL HISTORIAL, formato B: línea de tiempo por día (maqueta aprobada, 2026-10-03) */
html[data-identidad="v2"] #pane-expedientes .expp-hist{padding:16px 18px}
html[data-identidad="v2"] #pane-expedientes .expp-hist-cab h3{font-size:14.5px; font-weight:800; color:var(--id-texto); text-transform:none; letter-spacing:0}
html[data-identidad="v2"] #pane-expedientes .expp-hist-ley{font-size:12px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .expp-hist-sk{height:16px; border-radius:6px; background:linear-gradient(90deg,#E6E8EB 0%,#F3F4F2 50%,#E6E8EB 100%); background-size:200% 100%; animation:id-sk 1.4s linear infinite}
@keyframes id-sk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){html[data-identidad="v2"] #pane-expedientes .expp-hist-sk{animation:none}}
html[data-identidad="v2"] #pane-expedientes .expp-hist-dia h4{font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-expedientes .expp-hist-dia h4 .n{font-size:11.5px; font-weight:500; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-expedientes .expp-hist-dia h4::after{background:#E3E5E1}
html[data-identidad="v2"] #pane-expedientes .expp-ev .av{border:0; background:#E6E8EB; color:#2B3038}
html[data-identidad="v2"] #pane-expedientes .expp-ev .av[data-quien="sistema"]{background:var(--id-descartado-bg); color:var(--id-descartado-fg)}
html[data-identidad="v2"] #pane-expedientes .expp-ev .av[data-quien="sin_firma"]{background:transparent; color:var(--id-texto-2); box-shadow:inset 0 0 0 1.5px #9AA0A9}
html[data-identidad="v2"] #pane-expedientes .expp-ev .l1 b{font-weight:800}
html[data-identidad="v2"] #pane-expedientes .expp-ev .l1{font-size:12.5px}
html[data-identidad="v2"] #pane-expedientes .expp-hist .expp-ev .det{font-size:12px; color:#3A3F47}
html[data-identidad="v2"] #pane-expedientes .expp-hist-mas{height:36px; padding:0 14px; border:1px solid var(--id-borde-ctrl); border-radius:18px; background:#FFFFFF; font-weight:700; transition:background .3s}
html[data-identidad="v2"] #pane-expedientes .expp-hist-mas:hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-expedientes .expp-hist-mas:focus-visible,
html[data-identidad="v2"] #pane-expedientes .expp-ev:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
/* «Cómo va la conversación» */
html[data-identidad="v2"] #pane-expedientes .expp-conv h3{font-size:14.5px; font-weight:800; color:var(--id-texto); text-transform:none; letter-spacing:0}
/* «Qué puedes hacer aquí» */
html[data-identidad="v2"] #pane-expedientes .expp-acciones .op-btn.primary:not(:disabled){background:var(--id-acento); color:var(--id-acento-ink)}
html[data-identidad="v2"] #pane-expedientes .expp-acciones .ed-nota{color:var(--id-texto-2)}

/* el carril de acción de la ficha («Deshacer el cruce», «Asignar cliente»…): el mismo lenguaje, sin tocar su lógica */
html[data-identidad="v2"] #pane-expedientes .ed-carril-col{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-expedientes .ed-chip{border:1px solid var(--id-borde-ctrl); border-radius:18px; background:#FFFFFF; color:var(--id-texto); font-weight:600; transition:background .3s}
html[data-identidad="v2"] #pane-expedientes .ed-chip:hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-expedientes .ed-carril-col :is(textarea, input:not([type="checkbox"]):not([type="radio"]), select){border:1px solid var(--id-borde-ctrl);
  border-radius:12px; background:#FFFFFF; color:var(--id-texto); font:inherit}
html[data-identidad="v2"] #pane-expedientes .ed-carril-col :is(textarea, input, select):focus-visible{outline:2px solid var(--id-grafito); outline-offset:1px}
html[data-identidad="v2"] #pane-expedientes .ed-carril-col .ed-btn:not(:disabled){border-radius:19px}

/* ======================================================================================================
   LA FICHA DEL MOVIMIENTO (`.pdt-*`, Movimientos): la piel de la Fase 1. Lo estructural de la maqueta
   (orden de bloques, comparación lado a lado con el duplicado, diálogo de acreditar) NO se hace aquí: ver el doc §10.
   ====================================================================================================== */
html[data-identidad="v2"] #pane-movimientos .pdt-top{gap:12px}
html[data-identidad="v2"] #pane-movimientos .pdt-volver,
html[data-identidad="v2"] #pane-movimientos .pdt-nav{height:36px; padding:0 14px; border:0; border-radius:18px; background:#FFFFFF; color:var(--id-texto);
  font-size:13px; font-weight:600; transition:background .3s}
html[data-identidad="v2"] #pane-movimientos .pdt-volver:hover,
html[data-identidad="v2"] #pane-movimientos .pdt-nav:hover:not(:disabled){background:var(--id-hover)}
html[data-identidad="v2"] #pane-movimientos .pdt-nav:disabled{color:#8B919C}
html[data-identidad="v2"] #pane-movimientos .pdt-pos,
html[data-identidad="v2"] #pane-movimientos .pdt-atajo{font-size:11.5px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-movimientos .pdt-card,
html[data-identidad="v2"] #pane-movimientos .pdt-visor{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-movimientos .pdt-visor{background:#E9EAE7}
html[data-identidad="v2"] #pane-movimientos .pdt-titulo{font-size:14.5px; font-weight:800}
html[data-identidad="v2"] #pane-movimientos .pdt-falta{border:0; border-radius:10px; background:var(--id-revision-bg); color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-movimientos .pdt-data :is(.sec h4, .sec h3, .sec .t){font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-movimientos .pdt-data .kv :is(.k, dt){color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-movimientos .pdt-data :is(.mono, .pd-mono, .dato-crudo){font-family:var(--id-font-mono)}
html[data-identidad="v2"] #pane-movimientos .pdt-acciones .op-btn:not(:disabled){height:38px; padding:0 16px; border:0; border-radius:19px; background:#FFFFFF; color:var(--id-texto);
  font-size:13px; font-weight:700; transition:background .3s}
html[data-identidad="v2"] #pane-movimientos .pdt-acciones .op-btn:not(:disabled):hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-movimientos .pdt-acciones .op-btn.primary:not(:disabled){background:var(--id-acento); color:var(--id-acento-ink); font-weight:800}
html[data-identidad="v2"] #pane-movimientos .pdt-acciones .op-btn.warn:not(:disabled){background:var(--id-revision-bg); color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-movimientos .pdt-acciones .op-btn:disabled{border-radius:19px; background:#ECEDEA; color:#6F7580; border:0; opacity:1; cursor:not-allowed}
html[data-identidad="v2"] #pane-movimientos .pdt-docbarra :is(.op-btn, button.ghost, button):not(:disabled){height:34px; padding:0 14px; border:0; border-radius:17px; background:#FFFFFF; color:var(--id-texto);
  font-size:12.5px; font-weight:700; transition:background .3s}
html[data-identidad="v2"] #pane-movimientos .pdt-docbarra :is(.op-btn, button.ghost, button):not(:disabled):hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-movimientos .pdt-acciones .op-btn:focus-visible,
html[data-identidad="v2"] #pane-movimientos .pdt-volver:focus-visible,
html[data-identidad="v2"] #pane-movimientos .pdt-nav:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
/* la lista de Movimientos, con el mismo lenguaje de tabla que Expedientes */
html[data-identidad="v2"] #pane-movimientos .tablewrap{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-movimientos table thead th{background:#FFFFFF; border-bottom:1px solid var(--id-linea-cab); border-right:0; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-movimientos table tbody td{border-bottom:1px solid var(--id-linea-fila); border-right:0}
html[data-identidad="v2"] #pane-movimientos table tbody tr,
html[data-identidad="v2"] #pane-movimientos table tbody tr:nth-child(odd){background:#FFFFFF}
html[data-identidad="v2"] #pane-movimientos table tbody tr:hover,
html[data-identidad="v2"] #pane-movimientos table tbody tr:nth-child(odd):hover{background:var(--id-fila-hover)}
html[data-identidad="v2"] #pane-movimientos .idchip{font-family:var(--id-font-mono); font-size:11px; font-weight:500; background:var(--id-fondo); border:0; border-radius:6px; padding:2px 6px}
html[data-identidad="v2"] #pane-movimientos td.monto{font-weight:800; font-variant-numeric:tabular-nums; text-align:right}
html[data-identidad="v2"] #pane-movimientos :is(.col-fecha, td.mono){font-family:var(--id-font-mono); font-size:11px}
html[data-identidad="v2"] #pane-movimientos .mov-lote .op-btn:not(:disabled){height:38px; border:0; border-radius:19px; font-weight:700}

@media (prefers-reduced-motion: reduce){
  html[data-identidad="v2"] #seg-atajos .seg-chip,
html[data-identidad="v2"] #pane-expedientes :is(.op-btn, .expp-tab, .ex-item, .ex-pick select, .ex-vista-btn),
html[data-identidad="v2"] #pane-expedientes table tbody tr,
html[data-identidad="v2"] .ex-pop-vista .ex-pop-item{transition:none}
  html[data-identidad="v2"] #pane-expedientes .empty.is-loading::before{animation:none}
}

/* ======================================================================================================
   FASE 2 · MOVIMIENTOS + EXTRACTOS (`operaciones`) (SOLO INTERFAZ, Dirección 2026-09-30).
   Mismas reglas de siempre: TODO cuelga de `html[data-identidad="v2"]`; no se toca lógica, consultas,
   conteos ni acciones. Las pastillas, los sellos de estado y las tablas hablan el MISMO lenguaje que la
   Fase 1; lo único nuevo es que ahora también aplican a estas dos pestañas. La densidad por tabla
   (`table[data-densidad]`) NO se pisa: no se fija ningún `padding` de celda.
   ====================================================================================================== */

/* ---- El conmutador Resumen | Registros del encabezado (solo en estas dos pestañas) -------------------------
   El `#seg-subvista` lo comparten otras pestañas; aquí se acota a las dos de la fase con el estado de la
   navegación (`aria-current="page"`), no con un id nuevo. Cuando una fase siguiente migre las demás, se
   quita el `:has`. Activo en grafito (maqueta «Movimientos»), no en el acento. */
html[data-identidad="v2"]:is([data-hoja="movimientos"], [data-hoja="operaciones"]) #seg-subvista{
  background:#FFFFFF; border:0; border-radius:18px; padding:3px; height:36px; gap:0; align-items:center}
html[data-identidad="v2"]:is([data-hoja="movimientos"], [data-hoja="operaciones"]) #seg-subvista .seg-chip{
  height:30px; padding:0 14px; border:0; border-radius:15px; background:transparent; color:var(--id-texto-2);
  font:inherit; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; transition:background .3s}
html[data-identidad="v2"]:is([data-hoja="movimientos"], [data-hoja="operaciones"]) #seg-subvista .seg-chip:hover{
  background:var(--id-hover); color:var(--id-texto)}
html[data-identidad="v2"]:is([data-hoja="movimientos"], [data-hoja="operaciones"]) #seg-subvista .seg-chip[aria-pressed="true"]{
  background:var(--id-grafito); color:#FFFFFF; font-weight:700}
html[data-identidad="v2"]:is([data-hoja="movimientos"], [data-hoja="operaciones"]) #seg-subvista .seg-chip:focus-visible{
  outline:2px solid var(--id-grafito); outline-offset:2px}

/* ---- Sellos de estado: la familia de cada badge en Extractos (misma tabla de tonos que la Fase 1) ----------
   Estados de ingesta y de corrida: no están en la tabla de los 34 de Expedientes (§9), así que se ubican por
   su TONO de hoy, que decide el diccionario central (`contexto.json`): good → acreditado, warn → revisión,
   crit → disputado, gray/info → por acreditar. Ni cómo ni cuándo se decide cambia: solo qué sello lo pinta. */
html[data-identidad="v2"] #pane-operaciones .badge{
  --f-bg:var(--id-por-acreditar-bg); --f-fg:var(--id-por-acreditar-fg); --f-ico:var(--id-i-inbox)}
html[data-identidad="v2"] #pane-operaciones .badge.b-good{--f-bg:var(--id-acreditado-bg); --f-fg:var(--id-acreditado-fg); --f-ico:var(--id-i-check)}
html[data-identidad="v2"] #pane-operaciones .badge.b-warn{--f-bg:var(--id-revision-bg); --f-fg:var(--id-revision-fg); --f-ico:var(--id-i-clock)}
html[data-identidad="v2"] #pane-operaciones .badge.b-crit{--f-bg:var(--id-disputado-bg); --f-fg:var(--id-disputado-fg); --f-ico:var(--id-i-alert)}
html[data-identidad="v2"] #pane-operaciones .badge.b-info{--f-ico:var(--id-i-info)}
html[data-identidad="v2"] #pane-operaciones .badge{
  display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 10px 0 7px; border:0; border-radius:12px;
  background:var(--f-bg); color:var(--f-fg); font-size:11.5px; font-weight:700; line-height:1.2; white-space:nowrap; letter-spacing:0}
html[data-identidad="v2"] #pane-operaciones .badge .dot{
  width:15px; height:15px; min-width:15px; border-radius:0; font-size:0; background:currentColor !important;
  -webkit-mask:var(--f-ico) center / contain no-repeat; mask:var(--f-ico) center / contain no-repeat; flex:none}
/* «Corridas fallidas» y «Último latido» llevan tono en la tarjeta: el borde de color de hoy pasa a relleno de su
   familia (el rótulo y la cifra siguen ahí: nada depende solo del color) */
html[data-identidad="v2"] #pane-operaciones .tile.t-rev{background:var(--id-disputado-bg)}
html[data-identidad="v2"] #pane-operaciones .tile.t-rev :is(.k, .h, .v){color:var(--id-disputado-fg)}
html[data-identidad="v2"] #pane-operaciones .tile.t-urg{background:var(--id-revision-bg)}
html[data-identidad="v2"] #pane-operaciones .tile.t-urg :is(.k, .h, .v){color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-operaciones .tile.t-ok{background:#FFFFFF; box-shadow:0 0 0 2px var(--id-acento)}
html[data-identidad="v2"] #pane-operaciones .tile.t-ok .v{color:var(--id-acreditado-fg)}

/* ---- Tarjeta, cabecera de la lista y barra de filtros ---------------------------------------------------- */
html[data-identidad="v2"] #pane-movimientos .mov-tarjeta,
html[data-identidad="v2"] #pane-operaciones .ops-tarjeta{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-operaciones .ops-cab-lista .tit{font-size:15px; font-weight:800; color:var(--id-texto)}
html[data-identidad="v2"] #pane-operaciones .ops-cab-lista .sub{font-size:12px; color:var(--id-texto-2)}

html[data-identidad="v2"] :is(#pane-movimientos .mov-barra-tabla, #pane-operaciones .ops-barra-tabla){
  padding:8px 12px; gap:8px; border-bottom:1px solid var(--id-linea-cab); background:#FFFFFF}
html[data-identidad="v2"] :is(#pane-movimientos .mov-barra-tabla, #pane-operaciones .ops-barra-tabla) label{
  color:var(--id-texto-3); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
html[data-identidad="v2"] :is(#pane-movimientos .mov-barra-tabla, #pane-operaciones .ops-barra-tabla) label.ops-check{
  height:36px; padding:0 14px; border-radius:18px; background:var(--id-fondo); letter-spacing:0; text-transform:none;
  font-size:12.5px; font-weight:600; color:var(--id-texto)}
html[data-identidad="v2"] :is(#pane-movimientos .mov-barra-tabla, #pane-operaciones .ops-barra-tabla)
  :is(select, input:not([type="checkbox"]), .btn-columnas, .etqf-btn){
  height:36px; border:0; border-radius:18px; background:var(--id-fondo); color:var(--id-texto); font:inherit; font-size:12.5px;
  font-weight:600; letter-spacing:0; text-transform:none; padding:0 12px; box-shadow:none; transition:background .3s}
html[data-identidad="v2"] :is(#pane-movimientos .mov-barra-tabla, #pane-operaciones .ops-barra-tabla)
  :is(select, .btn-columnas, .etqf-btn):hover{background:var(--id-hover)}
html[data-identidad="v2"] :is(#pane-movimientos .mov-barra-tabla, #pane-operaciones .ops-barra-tabla) input:not([type="checkbox"])::placeholder{
  color:var(--id-texto-2); font-weight:500}
/* con un valor puesto la pastilla toma el acento suave (igual que los desplegables de Expedientes) */
html[data-identidad="v2"] #pane-movimientos .mov-barra-tabla :is(select[data-eje="vista"], select[data-eje="cuenta"], select[data-eje="fecha"]):has(> option:checked:not(:first-child)),
html[data-identidad="v2"] #pane-operaciones .ops-barra-tabla label:is(:nth-child(1), :nth-child(2)) select:has(> option:checked:not(:first-child)),
html[data-identidad="v2"] #pane-movimientos .mov-barra-tabla input[type="search"]:not(:placeholder-shown){
  background:var(--id-acento-suave); font-weight:700}
html[data-identidad="v2"] :is(#pane-movimientos .mov-barra-tabla, #pane-operaciones .ops-barra-tabla)
  :is(select, input, .btn-columnas, .etqf-btn):focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-operaciones .ops-barra-tabla label.ops-check input[type="checkbox"]{accent-color:var(--id-grafito)}

/* «Filtrando por …» + «Quitar filtros» */
html[data-identidad="v2"] #pane-movimientos .mov-puestos{gap:10px; font-size:12.5px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-movimientos .mov-puestos[data-filtro-aplicado] > span:first-child{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-movimientos .mov-puestos > b{display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:14px;
  background:#FFFFFF; color:var(--id-texto); font-size:12px; font-weight:600}
html[data-identidad="v2"] #pane-movimientos .mov-puestos > button.op-btn{height:32px; padding:0 10px; border:0; border-radius:16px; background:transparent;
  font-size:12px; font-weight:700; color:var(--id-texto); text-decoration:underline; text-underline-offset:3px; transition:background .3s}
html[data-identidad="v2"] #pane-movimientos .mov-puestos > button.op-btn:hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-movimientos .mov-puestos > button.op-btn:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}

/* ---- Tablas de Extractos: el mismo lenguaje que Expedientes y Movimientos ----------------------------------- */
html[data-identidad="v2"] #pane-operaciones :is(.ops-runs-scroll, .ops-arch-scroll, .ops-movs-scroll, .tablewrap){border:0; border-radius:0; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-operaciones .ops-panel .ops-movs-scroll{border-radius:14px}
html[data-identidad="v2"] #pane-operaciones table thead th{background:#FFFFFF; border-bottom:1px solid var(--id-linea-cab); border-right:0; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-operaciones table thead th[aria-sort="ascending"],
html[data-identidad="v2"] #pane-operaciones table thead th[aria-sort="descending"]{color:var(--id-texto)}
html[data-identidad="v2"] #pane-operaciones table tbody td{border-bottom:1px solid var(--id-linea-fila); border-right:0}
html[data-identidad="v2"] #pane-operaciones table tbody tr,
html[data-identidad="v2"] #pane-operaciones table tbody tr:nth-child(odd){background:#FFFFFF}
html[data-identidad="v2"] #pane-operaciones table tbody tr:hover,
html[data-identidad="v2"] #pane-operaciones table tbody tr:nth-child(odd):hover{background:var(--id-fila-hover)}
html[data-identidad="v2"] #pane-operaciones table tbody tr{transition:background .3s}
html[data-identidad="v2"] #pane-operaciones .idchip{font-family:var(--id-font-mono); font-size:11px; font-weight:500; background:var(--id-fondo); border:0; border-radius:6px; padding:2px 6px; color:var(--id-texto)}
html[data-identidad="v2"] #pane-operaciones a.idchip:hover,
html[data-identidad="v2"] #pane-operaciones button.idchip:hover{background:var(--id-acento-suave); color:var(--id-texto)}
html[data-identidad="v2"] #pane-operaciones :is(td.mono, .mono){font-family:var(--id-font-mono); font-size:11px}
html[data-identidad="v2"] #pane-operaciones td.num{text-align:right; font-variant-numeric:tabular-nums; font-weight:700}
html[data-identidad="v2"] #pane-operaciones td.num.ops-cero{font-weight:500; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-operaciones th.num{text-align:right}
html[data-identidad="v2"] #pane-operaciones td.monto{font-weight:800; font-variant-numeric:tabular-nums; text-align:right}
html[data-identidad="v2"] #pane-operaciones .ops-run-hl > td{background:color-mix(in srgb, var(--id-acento) 20%, #FFFFFF)}
html[data-identidad="v2"] #pane-operaciones .ops-pie,
html[data-identidad="v2"] #pane-operaciones .ops-foot{color:var(--id-texto-2); font-size:12px}
html[data-identidad="v2"] #pane-operaciones .ops-pie{background:#FFFFFF; border-top:1px solid var(--id-linea-cab); min-height:46px}
html[data-identidad="v2"] #pane-operaciones .ops-pie .info{color:var(--id-gris-tinta)}
html[data-identidad="v2"] #pane-operaciones .ops-pie .ops-alcance{color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-movimientos .mov-pie{background:#FFFFFF; border-top:1px solid var(--id-linea-cab); min-height:46px; font-size:12px; color:var(--id-gris-tinta)}
html[data-identidad="v2"] #pane-movimientos .mov-pie .mov-suma{font-weight:800}
html[data-identidad="v2"] #pane-movimientos .mov-pie .mov-suma .alcance{font-weight:500; color:var(--id-texto-2)}
/* paginación: «Anterior» gris, «Siguiente» en el acento (pastillas de 32 px: el piso de clic de `button` en index.html; la maqueta dice 30) */
html[data-identidad="v2"] #pane-movimientos .mov-pie > button.op-btn{height:32px; padding:0 14px; border:0; border-radius:16px; background:var(--id-fondo);
  font-size:12.5px; font-weight:700; color:var(--id-texto); transition:background .3s}
html[data-identidad="v2"] #pane-movimientos .mov-pie > button.op-btn:last-of-type:not(:disabled){background:var(--id-acento); color:var(--id-acento-ink); font-weight:800}
html[data-identidad="v2"] #pane-movimientos .mov-pie > button.op-btn:hover:not(:disabled):not(:last-of-type){background:var(--id-hover)}
html[data-identidad="v2"] #pane-movimientos .mov-pie > button.op-btn:disabled{color:#8B919C; background:var(--id-fondo); opacity:1; cursor:not-allowed}
html[data-identidad="v2"] #pane-movimientos .mov-pie > button.op-btn:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}

/* ---- Movimientos: acciones de la fila («Ver detalle», el galón) y la barra del lote ------------------------------ */
html[data-identidad="v2"] #pane-movimientos td.col-acciones .op-btn{height:26px; min-height:26px; padding:0 11px; border:0; border-radius:13px; background:var(--id-fondo);
  font-size:11.5px; font-weight:700; color:var(--id-texto); transition:background .3s}
html[data-identidad="v2"] #pane-movimientos td.col-acciones .op-btn:hover:not(:disabled){background:var(--id-acento-suave)}
html[data-identidad="v2"] #pane-movimientos td.col-galon .op-btn{border:0; border-radius:13px; background:var(--id-fondo); color:var(--id-texto)}
html[data-identidad="v2"] #pane-movimientos td.col-galon .op-btn:hover:not(:disabled){background:var(--id-acento-suave)}
html[data-identidad="v2"] #pane-movimientos :is(td.col-acciones, td.col-galon) .op-btn:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-movimientos table tbody tr.mov-marcada > td,
html[data-identidad="v2"] #pane-movimientos table tbody tr.mov-marcada:hover > td{background:color-mix(in srgb, var(--id-acento) 20%, #FFFFFF)}
html[data-identidad="v2"] #pane-movimientos table tbody tr.mov-abierta > td{background:var(--id-acento-suave)}
html[data-identidad="v2"] #pane-movimientos input.mov-chk{accent-color:var(--id-grafito)}
/* la barra del lote: grafito (maqueta). Aceptar/Bloquear/Reabrir siguen siendo los mismos botones, con los
   mismos motivos de apagado; el apagado SE LEE apagado sin color: borde discontinuo y cursor, no solo el tono. */
html[data-identidad="v2"] .mov-lote{background:var(--id-grafito); border:0; border-radius:14px; color:#FFFFFF; box-shadow:0 8px 24px rgba(23,25,28,.28); padding:10px 14px}
html[data-identidad="v2"] .mov-lote .mov-lote-n{color:#FFFFFF; font-weight:800}
html[data-identidad="v2"] .mov-lote .mov-lote-sub{color:#C9CCD1; font-variant-numeric:tabular-nums}
html[data-identidad="v2"] .mov-lote .op-btn:not(:disabled){height:32px; padding:0 16px; border:0; border-radius:16px; background:#FFFFFF; color:var(--id-texto); font-size:12.5px; font-weight:700}
html[data-identidad="v2"] .mov-lote .op-btn.primary:not(:disabled){background:var(--id-acento); color:var(--id-acento-ink); font-weight:800}
html[data-identidad="v2"] .mov-lote .op-btn:disabled{height:32px; padding:0 16px; border:2px dashed #9AA0AA; border-radius:16px; background:transparent; color:#C9CCD1;
  font-size:12.5px; font-weight:700; opacity:1; cursor:not-allowed}
html[data-identidad="v2"] .mov-lote button.ghost{border:0; background:transparent; color:#C9CCD1; text-decoration:underline; text-underline-offset:3px; font-size:12.5px}
html[data-identidad="v2"] .mov-lote button.ghost:hover{color:#FFFFFF}
html[data-identidad="v2"] .mov-lote :is(.op-btn, button.ghost):focus-visible{outline:2px solid var(--id-acento); outline-offset:2px}
html[data-identidad="v2"] .mov-lote .mov-lote-fallos{border-top-color:#3A3F47}
html[data-identidad="v2"] .mov-lote :is(.mov-lote-prog, .mov-lote-fallo){color:#C9CCD1}
html[data-identidad="v2"] .mov-lote .mov-lote-fallo b{color:#FFB4A6}
html[data-identidad="v2"] .mov-lote .mov-lote-ok{color:#9FE0BC}

/* ---- Tarjetas del Resumen (los dos módulos) -------------------------------------------------------------------- */
html[data-identidad="v2"] :is(#pane-movimientos, #pane-operaciones) .tiles{gap:12px}
html[data-identidad="v2"] :is(#pane-movimientos, #pane-operaciones) .tile{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none; padding:16px 18px; transition:background .3s}
html[data-identidad="v2"] :is(#pane-movimientos, #pane-operaciones) .tile.tile-click:hover{background:#F9FAF7}
html[data-identidad="v2"] :is(#pane-movimientos, #pane-operaciones) .tile .k{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}
html[data-identidad="v2"] :is(#pane-movimientos, #pane-operaciones) .tile .v{font-size:28px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
html[data-identidad="v2"] :is(#pane-movimientos, #pane-operaciones) .tile .h{font-size:12px; color:var(--id-texto-2)}
html[data-identidad="v2"] :is(#pane-movimientos, #pane-operaciones) .tile.tile-click::after{color:var(--id-texto-3)}
html[data-identidad="v2"] :is(#pane-movimientos, #pane-operaciones) .tile.tile-click:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}

/* ---- Extractos: el panel de UNA corrida (volver, cabecera, ficha del archivo, tarjetas, tabla de movimientos) ----- */
html[data-identidad="v2"] #pane-operaciones .ops-crumb{height:36px; padding:0 16px; border:0; border-radius:18px; background:#FFFFFF; color:var(--id-texto);
  font-size:12.5px; font-weight:600; transition:background .3s}
html[data-identidad="v2"] #pane-operaciones .ops-crumb:hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-operaciones .ops-crumb:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-operaciones .ops-panel-head h3{font-size:18px; font-weight:800}
html[data-identidad="v2"] #pane-operaciones .ops-panel-head .mono{font-family:var(--id-font-mono); font-size:12px}
html[data-identidad="v2"] #pane-operaciones .ops-ficha{border-top:0; padding-top:0; gap:6px 26px}
html[data-identidad="v2"] #pane-operaciones .ops-ficha .par{font-size:12.5px; color:var(--id-gris-tinta)}
html[data-identidad="v2"] #pane-operaciones .ops-ficha .par b{color:var(--id-texto); font-weight:700}
html[data-identidad="v2"] #pane-operaciones .ops-panel .tiles{margin-bottom:12px}
html[data-identidad="v2"] #pane-operaciones .ops-panel .tile{padding:12px 16px}
html[data-identidad="v2"] #pane-operaciones .ops-panel .tile .v{font-size:30px}
html[data-identidad="v2"] #pane-operaciones .ops-panel .op-btn.primary{height:36px; padding:0 18px; border:0; border-radius:18px; background:var(--id-acento); color:var(--id-acento-ink);
  font-size:13px; font-weight:800}
html[data-identidad="v2"] #pane-operaciones .ops-panel .op-btn.primary:hover:not(:disabled){filter:brightness(.95)}
html[data-identidad="v2"] #pane-operaciones .ops-panel .op-btn.primary:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-operaciones .ops-panel > h3{font-size:15px; font-weight:800}
html[data-identidad="v2"] #pane-operaciones .none-note{font-size:12px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-operaciones .ops-nota{border:0; border-radius:12px; background:var(--id-revision-bg); color:var(--id-revision-fg); font-size:12.5px}
html[data-identidad="v2"] #pane-operaciones .ops-panel .filters{gap:8px}
html[data-identidad="v2"] #pane-operaciones .ops-panel .filters :is(select, input:not([type="checkbox"]), .btn-columnas){
  height:36px; border:0; border-radius:18px; background:#FFFFFF; color:var(--id-texto); font:inherit; font-size:12.5px; font-weight:600; padding:0 12px; box-shadow:none}
html[data-identidad="v2"] #pane-operaciones .ops-panel .filters :is(select, .btn-columnas):hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-operaciones .ops-panel .filters :is(select, input, .btn-columnas):focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-operaciones .ops-panel .filters label{color:var(--id-texto-3); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
/* «Listos para ingerir»: los chips «Solo pendientes | Todos» y su búsqueda */
html[data-identidad="v2"] #pane-operaciones .ops-chip{height:32px; padding:0 14px; border:0; border-radius:16px; background:#FFFFFF; color:var(--id-texto-2); font-size:12.5px; font-weight:600; transition:background .3s}
html[data-identidad="v2"] #pane-operaciones .ops-chip:hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-operaciones .ops-chip.active{background:var(--id-grafito); color:#FFFFFF; font-weight:700}
html[data-identidad="v2"] #pane-operaciones .ops-chip:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-operaciones .ops-buscar{height:36px; border:0; border-radius:18px; background:#FFFFFF; padding:0 14px; font-size:12.5px}
html[data-identidad="v2"] #pane-operaciones .empty{background:#FFFFFF; border-radius:14px; color:var(--id-texto-2); font-size:13px}

/* ---- Estados vacío y «Cargando» de Movimientos ------------------------------------------------------------------- */
html[data-identidad="v2"] #pane-movimientos .empty{background:#FFFFFF; border-radius:14px; color:var(--id-texto-2); font-size:13.5px; line-height:1.5}
html[data-identidad="v2"] #pane-movimientos .empty .op-btn{height:36px; padding:0 18px; border:0; border-radius:18px; background:var(--id-fondo); font-size:13px; font-weight:700; color:var(--id-texto)}
html[data-identidad="v2"] #pane-movimientos .empty .op-btn:first-child{background:var(--id-acento); color:var(--id-acento-ink); font-weight:800}
html[data-identidad="v2"] #pane-movimientos .empty .op-btn:hover{filter:brightness(.97)}
html[data-identidad="v2"] #pane-movimientos .empty.is-loading::before{animation:id-gira .9s linear infinite}

@media (prefers-reduced-motion: reduce){
  html[data-identidad="v2"] #seg-subvista .seg-chip,
  html[data-identidad="v2"] :is(#pane-movimientos .mov-barra-tabla, #pane-operaciones .ops-barra-tabla, #pane-operaciones .ops-panel .filters) :is(select, input, .btn-columnas, .etqf-btn),
  html[data-identidad="v2"] :is(#pane-movimientos, #pane-operaciones) :is(.tile, .op-btn, .ops-crumb, .ops-chip, table tbody tr),
  html[data-identidad="v2"] #pane-movimientos .mov-puestos > button{transition:none}
  html[data-identidad="v2"] #pane-movimientos .empty.is-loading::before{animation:none}
}

/* el sello dentro de una celda se centra en su línea (con `baseline` la fila crecía ~10 px: 43.5 → 33.5) */
html[data-identidad="v2"] :is(#pane-movimientos, #pane-operaciones) table td .badge{vertical-align:middle}

/* un sello suelto (fuera de una celda) no se sale de su tarjeta: parte el renglón en vez de cortarse; dentro de una celda sigue en una línea */
html[data-identidad="v2"] #pane-operaciones :not(td) > .badge{max-width:100%; white-space:normal}
/* la clave de la corrida y del archivo, en la cabecera del panel (sobre el fondo de la página): un gris que sí se distingue de él */
html[data-identidad="v2"] #pane-operaciones .ops-panel-head .idchip{background:#E4E6E2}

/* ======================================================================================================
   RETOQUE DE LA FASE 2 · «huérfano» → familia «descartado» (Dirección, 2026-10-01).
   `operaciones.js` marca el sello con `data-estado="huerfano"` (una línea, inerte sin la bandera). Las familias son
   agrupación VISUAL: el texto del estado no cambia y cómo se decide tampoco.
   ====================================================================================================== */
html[data-identidad="v2"] :is(#pane-operaciones, #pane-movimientos) .badge[data-estado="huerfano"]{
  --f-bg:var(--id-descartado-bg); --f-fg:var(--id-descartado-fg); --f-ico:var(--id-i-x)}

/* ======================================================================================================
   FASE 3 · RESUMEN + FINANZAS + ESTADO DEL SERVICIO + CLIENTES (SOLO INTERFAZ, Dirección 2026-10-01).
   Mismas reglas de siempre: TODO cuelga de `html[data-identidad="v2"]`; ni una línea de lógica, consulta, conteo,
   acción ni gate. Los sellos, tarjetas y tablas hablan el lenguaje de las fases 1 y 2.
   ====================================================================================================== */

/* ---- Sellos: la familia de cada `.badge` (misma tabla de tonos que Extractos; §15 del doc) ---------------- */
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-estado-sistema, #pane-spine-cliente) .badge{
  --f-bg:var(--id-por-acreditar-bg); --f-fg:var(--id-por-acreditar-fg); --f-ico:var(--id-i-inbox);
  display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 10px 0 7px; border:0; border-radius:12px;
  background:var(--f-bg); color:var(--f-fg); font-size:11.5px; font-weight:700; line-height:1.2; white-space:nowrap; letter-spacing:0;
  vertical-align:middle}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-estado-sistema, #pane-spine-cliente) .badge.b-good{
  --f-bg:var(--id-acreditado-bg); --f-fg:var(--id-acreditado-fg); --f-ico:var(--id-i-check)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-estado-sistema, #pane-spine-cliente) .badge.b-warn{
  --f-bg:var(--id-revision-bg); --f-fg:var(--id-revision-fg); --f-ico:var(--id-i-clock)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-estado-sistema, #pane-spine-cliente) .badge.b-crit{
  --f-bg:var(--id-disputado-bg); --f-fg:var(--id-disputado-fg); --f-ico:var(--id-i-alert)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-estado-sistema, #pane-spine-cliente) .badge.b-info{--f-ico:var(--id-i-info)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-estado-sistema, #pane-spine-cliente) .badge .dot{
  width:15px; height:15px; min-width:15px; border-radius:0; font-size:0; background:currentColor !important;
  -webkit-mask:var(--f-ico) center / contain no-repeat; mask:var(--f-ico) center / contain no-repeat; flex:none}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente) :not(td) > .badge{max-width:100%; white-space:normal}

/* ---- Tarjetas de cifra (`.tile`): radio 14, sin borde, cifra de 28 px tabular, rótulo de 12 px ---------------- */
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente, #pane-estado-sistema) .tiles{gap:10px}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente, #pane-estado-sistema) .tile{
  border:0; border-radius:14px; background:#FFFFFF; box-shadow:none; padding:12px 16px 14px; transition:background .3s}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente, #pane-estado-sistema) .tile.tile-click:hover{background:#F9FAF7}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente, #pane-estado-sistema) .tile.tile-click:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente, #pane-estado-sistema) .tile.tile-click::after{color:var(--id-texto-3); opacity:1}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente) .tile .k{font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--id-gris-tinta)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente) .tile .v{font-size:28px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente, #pane-estado-sistema) .tile .h{font-size:12px; color:var(--id-texto-2); line-height:1.4}
/* el tono: el borde de color de hoy pasa a relleno de su familia (el rótulo, el ícono y la cifra siguen: nada depende solo del color) */
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente) .tile.t-rev{background:var(--id-disputado-bg)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente) .tile.t-rev :is(.k, .h, .v){color:var(--id-disputado-fg)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente) .tile.t-urg{background:var(--id-revision-bg)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente) .tile.t-urg :is(.k, .h, .v){color:var(--id-revision-fg)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-spine-cliente) .tile.t-ok .v{color:var(--id-acreditado-fg)}
/* dentro de una tarjeta blanca (Finanzas) la cifra va en gris suave de radio 12 (maqueta) */
html[data-identidad="v2"] #pane-finanzas .fin-sec .tile{background:var(--id-fondo); border-radius:12px}
html[data-identidad="v2"] #pane-finanzas .fin-sec .tile.t-rev{background:var(--id-disputado-bg)}
html[data-identidad="v2"] #pane-finanzas .fin-sec .tile.t-urg{background:var(--id-revision-bg)}
html[data-identidad="v2"] #pane-finanzas .fin-sec .tile .v{font-size:26px}

/* ---- Títulos de sección y notas ------------------------------------------------------------------------------ */
html[data-identidad="v2"] #pane-resumen h3{font-size:14px; font-weight:800; letter-spacing:0; color:var(--id-texto)}
html[data-identidad="v2"] :is(#pane-resumen .none-note, #pane-finanzas .fin-nota, #pane-spine-cliente .none-note){font-size:12px; color:var(--id-texto-2); line-height:1.45}
html[data-identidad="v2"] #pane-resumen :is(.cadencia-leg, .exc-pie){color:var(--id-texto-2); font-size:11.5px}
html[data-identidad="v2"] #pane-resumen .exc-pie a{color:var(--id-texto); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* ---- RESUMEN: cadencia de ingesta (barras), tabla de cierres y banda de confianza --------------------------- */
html[data-identidad="v2"] #pane-resumen .cadencia{border-radius:14px; background:#FFFFFF}
html[data-identidad="v2"] #pane-resumen .cadencia .bar{background:#4A5666; border-radius:3px 3px 0 0}
html[data-identidad="v2"] #pane-resumen .cadencia .bar.hoy{background:var(--id-acreditado-fg)}
html[data-identidad="v2"] #pane-resumen .cadencia .bar.cero{background:#C9CCD1; border:0; min-height:3px; height:3px}
html[data-identidad="v2"] #pane-resumen .cadencia .cnt{font-size:10.5px; font-weight:700; color:var(--id-gris-tinta)}
html[data-identidad="v2"] #pane-resumen .cadencia .lbl{font-family:var(--id-font-mono); font-size:9.5px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-resumen .cadencia-leg i{background:#4A5666}
html[data-identidad="v2"] #pane-resumen .cadencia-leg i.hoy{background:var(--id-acreditado-fg)}
html[data-identidad="v2"] #pane-resumen .cadencia-leg i.cero{background:#C9CCD1; border:0; height:3px; align-self:center}
html[data-identidad="v2"] #pane-resumen .confianza{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-resumen .confianza-item{border-right:1px solid var(--id-linea-fila)}
html[data-identidad="v2"] #pane-resumen .confianza-item:last-child{border-right:0}
html[data-identidad="v2"] #pane-resumen .confianza-h{font-size:12px; font-weight:700}
html[data-identidad="v2"] #pane-resumen .confianza-dot{background:var(--id-acreditado-fg)}
html[data-identidad="v2"] #pane-resumen .confianza-d{font-size:12px; color:var(--id-texto-2)}

/* ---- Tablas (Resumen, Clientes, Finanzas): el lenguaje de Expedientes / Movimientos / Extractos ---------------- */
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente) .tablewrap{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente, #pane-finanzas) table thead th{background:#FFFFFF; border-bottom:1px solid var(--id-linea-cab); border-right:0;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente) table thead th[aria-sort="ascending"],
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente) table thead th[aria-sort="descending"]{color:var(--id-texto)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente, #pane-finanzas) table tbody td{border-bottom:1px solid var(--id-linea-fila); border-right:0}
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente) table tbody tr,
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente) table tbody tr:nth-child(odd){background:#FFFFFF}
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente) table tbody tr:hover,
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente) table tbody tr:nth-child(odd):hover{background:var(--id-fila-hover)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente) table tbody tr{transition:background .3s}
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente, #pane-finanzas) .idchip{font-family:var(--id-font-mono); font-size:11px; font-weight:500; background:var(--id-fondo); border:0;
  border-radius:6px; padding:2px 6px; color:var(--id-texto)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente) a.idchip:hover{background:var(--id-acento-suave); color:var(--id-texto)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-spine-cliente) :is(td.mono, .mono){font-family:var(--id-font-mono); font-size:11px}
html[data-identidad="v2"] :is(#pane-resumen td.num, #pane-spine-cliente td.spn-num, #pane-spine-cliente td.num, #pane-finanzas td.num){
  text-align:right; font-variant-numeric:tabular-nums; font-weight:700}
html[data-identidad="v2"] :is(#pane-resumen th.num, #pane-spine-cliente th.spn-num, #pane-spine-cliente th.num, #pane-finanzas th.num){text-align:right}
html[data-identidad="v2"] #pane-spine-cliente td.spn-fecha{font-family:var(--id-font-mono); font-size:11px}
html[data-identidad="v2"] #pane-resumen table tbody td a:not(.idchip){color:var(--id-texto); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* ---- FINANZAS: la franja de frescura, las secciones, las barras y la tabla de datos ---------------------------- */
html[data-identidad="v2"] #pane-finanzas .fin-frescura{border:0; border-radius:14px; background:#FFFFFF; box-shadow:inset 4px 0 0 var(--id-acreditado-fg); padding:10px 18px 10px 22px; font-size:12px}
html[data-identidad="v2"] #pane-finanzas .fin-frescura.warn{box-shadow:inset 4px 0 0 var(--id-revision-fg)}
html[data-identidad="v2"] #pane-finanzas .fin-frescura.crit{background:var(--id-alerta-bg); box-shadow:inset 4px 0 0 var(--id-alerta-ico)}
html[data-identidad="v2"] #pane-finanzas .fin-frescura .quien{font-size:12px; color:var(--id-gris-tinta)}
html[data-identidad="v2"] #pane-finanzas .fin-frescura .quien b{font-weight:700; color:var(--id-texto)}
html[data-identidad="v2"] #pane-finanzas .fin-sec{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none; padding:14px 18px}
html[data-identidad="v2"] #pane-finanzas .fin-cab h2{font-size:15px; font-weight:800; letter-spacing:0}
html[data-identidad="v2"] #pane-finanzas .fin-cab .sello-sec{font-size:11.5px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-finanzas .fin-cab .sello-sec.viejo{color:var(--id-revision-fg); font-weight:700}
html[data-identidad="v2"] #pane-finanzas .fin-sub{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-finanzas :is(.fin-muni, .fin-estados) .pista{height:10px; border-radius:2px 5px 5px 2px; background:#ECEDEA}
html[data-identidad="v2"] #pane-finanzas .fin-muni .pista i{border-radius:2px 5px 5px 2px; background:var(--id-grafito)}
html[data-identidad="v2"] #pane-finanzas .fin-estados .pista i{border-radius:2px 5px 5px 2px; background:#4A5666}
html[data-identidad="v2"] #pane-finanzas :is(.fin-muni, .fin-estados) .num{font-weight:800; font-size:12px}
html[data-identidad="v2"] #pane-finanzas .fin-muni .cta{font-size:11.5px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-finanzas .fin-leyenda{font-size:11.5px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-finanzas .fin-datos summary{font-size:12px; font-weight:600; color:var(--id-gris-tinta)}
html[data-identidad="v2"] #pane-finanzas .fin-datos summary:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-finanzas .fin-datos :is(th, td){font-variant-numeric:tabular-nums}
html[data-identidad="v2"] #pane-finanzas .fin-tabla td.fecha{font-family:var(--id-font-mono); font-size:11px}
html[data-identidad="v2"] #pane-finanzas .fin-vacio{background:#FFFFFF; border:0; border-radius:14px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-finanzas .fin-barra{gap:8px}
html[data-identidad="v2"] #pane-finanzas :is(.fin-q, .fin-btn){height:36px; border:0; border-radius:18px; background:#FFFFFF; color:var(--id-texto); font:inherit; font-size:12.5px; font-weight:600; padding:0 14px}
html[data-identidad="v2"] #pane-finanzas .fin-btn:hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-finanzas :is(.fin-q, .fin-btn):focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}

/* ---- ESTADO DEL SERVICIO: contadores de próxima corrida, servicio, y tarjetas de proceso -------------------- */
html[data-identidad="v2"] #pane-estado-sistema .hint{font-size:12px; color:var(--id-texto-2); line-height:1.45}
html[data-identidad="v2"] #pane-estado-sistema .sec > h3{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--id-texto-3); margin-bottom:6px}
/* los contadores: de tira a tarjetas blancas de radio 14 en rejilla; el arco de cadencia sube a 4 px */
html[data-identidad="v2"] #pane-estado-sistema .pulso-strip{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;
  background:transparent; border:0; border-radius:0; min-height:0; overflow:visible; box-shadow:none}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip{flex-direction:column; align-items:stretch; gap:8px; padding:12px 14px 40px; border:0; border-radius:14px;
  background:#FFFFFF; overflow:hidden; white-space:normal; min-width:0; position:relative}
@media (min-width:1400px){html[data-identidad="v2"] #pane-estado-sistema .pulso-strip{grid-template-columns:repeat(6, minmax(0, 1fr))}}
html[data-identidad="v2"] #pane-estado-sistema .pulso-ic{width:30px; height:30px; border-radius:10px; background:var(--id-fondo); color:var(--id-texto); position:absolute; top:12px; left:14px}
html[data-identidad="v2"] #pane-estado-sistema .pulso-ic svg{width:17px; height:17px}
html[data-identidad="v2"] #pane-estado-sistema .pulso-txt{flex-direction:column; align-items:flex-start; gap:8px}
html[data-identidad="v2"] #pane-estado-sistema .pulso-lbl{margin-left:39px; min-height:30px; display:flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--id-texto-3); line-height:1.25}
html[data-identidad="v2"] #pane-estado-sistema .pulso-val{font-family:var(--id-font-mono); font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--id-texto); line-height:1.1}
html[data-identidad="v2"] #pane-estado-sistema .pulso-arco{height:4px; background:var(--id-por-acreditar-fg); opacity:1}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip.pulso-updating .pulso-val{color:var(--id-texto-2)}
/* el estado del contador: SELLO (color + ÍCONO + TEXTO) bajo la cifra. «apagado» ≠ «caído»: dos íconos, dos textos, dos tonos */
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado]::after{content:var(--s-txt); position:absolute; left:14px; bottom:14px; height:24px; padding:0 10px 0 27px;
  display:inline-flex; align-items:center; border-radius:12px; font-size:11.5px; font-weight:700; color:var(--s-fg); background:var(--s-bg)}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado]::before{content:""; position:absolute; left:21px; bottom:18.5px; width:15px; height:15px; z-index:1;
  background:var(--s-fg); -webkit-mask:var(--s-ico) center / contain no-repeat; mask:var(--s-ico) center / contain no-repeat}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="ok"]{--s-bg:var(--id-acreditado-bg); --s-fg:var(--id-acreditado-fg); --s-txt:"Vivo"; --s-ico:var(--id-i-check)}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="aviso"]{--s-bg:var(--id-revision-bg); --s-fg:var(--id-revision-fg); --s-txt:"Retrasado"; --s-ico:var(--id-i-clock)}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="caido"]{--s-bg:var(--id-disputado-bg); --s-fg:var(--id-disputado-fg); --s-txt:"CA\0000CDDO"; --s-ico:var(--id-i-alert)}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="apagado"]{--s-bg:var(--id-descartado-bg); --s-fg:var(--id-descartado-fg); --s-txt:"Apagado"; --s-ico:var(--id-i-x)}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="na"]{--s-bg:var(--id-por-acreditar-bg); --s-fg:var(--id-por-acreditar-fg); --s-txt:"Sin latido"; --s-ico:var(--id-i-inbox)}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="ok"] .pulso-arco{background:var(--id-acreditado-fg)}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="aviso"] .pulso-arco{background:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="caido"] .pulso-arco{background:var(--id-disputado-fg); width:100% !important}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="apagado"] .pulso-arco{background:#C9CCD1; width:100% !important}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="caido"]{box-shadow:inset 0 0 0 2px var(--id-disputado-fg)}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="aviso"]{box-shadow:inset 0 0 0 2px var(--id-revision-fg)}
html[data-identidad="v2"] #pane-estado-sistema .pulso-chip[data-estado="apagado"]{box-shadow:inset 0 0 0 2px #C9CCD1}
/* el servicio que sirve la página y sus gates */
html[data-identidad="v2"] #pane-estado-sistema .ctx-fila{background:#FFFFFF; border-radius:14px; padding:10px 16px; margin-top:0}
html[data-identidad="v2"] #pane-estado-sistema .ctx-fila .badge{min-height:26px; font-size:12px}
html[data-identidad="v2"] #pane-estado-sistema .ctx-i{width:30px; height:30px; border-radius:15px; border:0; background:var(--id-fondo); color:var(--id-texto); font-weight:800}
html[data-identidad="v2"] #pane-estado-sistema .ctx-i:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
/* las tarjetas de proceso: nombre en 14/800, SELLO de latido (familia + ícono + texto), detalle debajo.
   `.ctx-vivo` ya trae el texto («<proceso> CAÍDO», «… apagado · <causa>»): solo cambia qué sello lo pinta. */
html[data-identidad="v2"] #pane-estado-sistema .ctx-tile{display:flex; flex-direction:column; gap:7px; padding:12px 16px}
html[data-identidad="v2"] #pane-estado-sistema .ctx-tile .k{font-size:14px; font-weight:800; min-height:0; color:var(--id-texto)}
html[data-identidad="v2"] #pane-estado-sistema .ctx-vivo{--f-bg:var(--id-por-acreditar-bg); --f-fg:var(--id-por-acreditar-fg); --f-ico:var(--id-i-inbox);
  display:inline-flex; align-items:flex-start; gap:6px; width:fit-content; max-width:100%; min-height:24px; padding:4px 10px 4px 7px; border-radius:12px;
  background:var(--f-bg); color:var(--f-fg); font-size:11.5px; font-weight:700; line-height:1.3; margin-top:0}
html[data-identidad="v2"] #pane-estado-sistema .ctx-vivo.ok{--f-bg:var(--id-acreditado-bg); --f-fg:var(--id-acreditado-fg); --f-ico:var(--id-i-check)}
html[data-identidad="v2"] #pane-estado-sistema .ctx-vivo.aviso{--f-bg:var(--id-revision-bg); --f-fg:var(--id-revision-fg); --f-ico:var(--id-i-clock)}
html[data-identidad="v2"] #pane-estado-sistema .ctx-vivo.caido{--f-bg:var(--id-disputado-bg); --f-fg:var(--id-disputado-fg); --f-ico:var(--id-i-alert)}
html[data-identidad="v2"] #pane-estado-sistema .ctx-vivo.apagado{--f-bg:var(--id-descartado-bg); --f-fg:var(--id-descartado-fg); --f-ico:var(--id-i-x); font-weight:700}
html[data-identidad="v2"] #pane-estado-sistema .ctx-vivo .ctx-dot{width:15px; height:15px; min-width:15px; border-radius:0; border:0 !important; background:currentColor !important;
  -webkit-mask:var(--f-ico) center / contain no-repeat; mask:var(--f-ico) center / contain no-repeat; flex:none; margin-top:0}
html[data-identidad="v2"] #pane-estado-sistema .ctx-tile:has(.ctx-vivo.caido){box-shadow:inset 0 0 0 2px var(--id-disputado-fg)}
html[data-identidad="v2"] #pane-estado-sistema .ctx-tile:has(.ctx-vivo.aviso){box-shadow:inset 0 0 0 2px var(--id-revision-fg)}
html[data-identidad="v2"] #pane-estado-sistema .ctx-tile:has(.ctx-vivo.apagado){box-shadow:inset 0 0 0 2px #C9CCD1}
html[data-identidad="v2"] #pane-estado-sistema .ctx-tile .h{font-size:12.5px; color:var(--id-gris-tinta); margin-top:0}

/* ---- CLIENTES: búsqueda, cabecera de la lista, tabla, frescura del padrón, pie y paginación -------------------- */
html[data-identidad="v2"] #pane-spine-cliente .spn-q{height:40px; border:0; border-radius:20px; background:#FFFFFF; padding:0 18px; font:inherit; font-size:13px; color:var(--id-texto); box-shadow:none}
html[data-identidad="v2"] #pane-spine-cliente .spn-q::placeholder{color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-spine-cliente .spn-tarjeta{border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-spine-cliente .spn-cab-lista .tit{font-size:15px; font-weight:800; color:var(--id-texto)}
html[data-identidad="v2"] #pane-spine-cliente .spn-cab-lista :is(.ord, .sub){font-size:12px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-mostrar, .spn-filas){color:var(--id-texto-3); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-mostrar, .spn-filas) select{height:36px; border:0; border-radius:18px; background:var(--id-fondo); color:var(--id-texto); font:inherit;
  font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; padding:0 12px; box-shadow:none}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-mostrar, .spn-filas) select:hover{background:var(--id-hover)}
html[data-identidad="v2"] #pane-spine-cliente :is(select, input, button):focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-spine-cliente .spn-pie{background:#FFFFFF; border-top:1px solid var(--id-linea-cab); font-size:12px; color:var(--id-gris-tinta)}
html[data-identidad="v2"] #pane-spine-cliente .spn-pag button{height:32px; min-width:32px; padding:0 10px; border:0; border-radius:16px; background:var(--id-fondo); font-size:12.5px; font-weight:700; color:var(--id-texto)}
html[data-identidad="v2"] #pane-spine-cliente .spn-pag button:hover:not(:disabled){background:var(--id-hover)}
html[data-identidad="v2"] #pane-spine-cliente .spn-pag button[aria-current="page"]{background:var(--id-grafito); color:#FFFFFF}
html[data-identidad="v2"] #pane-spine-cliente .spn-pag button:disabled{color:#8B919C; cursor:not-allowed}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-frescura-padron, .spn-fresca){font-size:12px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-frescura-padron, .spn-fresca).warn{color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-spine-cliente .spn-frescura-padron a{color:var(--id-texto); font-weight:700; text-decoration:underline; text-underline-offset:3px}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-sug, .spn-cola){border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-volver, .spn-copiar, .spn-cola-btn){height:36px; padding:0 16px; border:0; border-radius:18px; background:#FFFFFF; color:var(--id-texto);
  font-size:12.5px; font-weight:600; transition:background .3s}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-volver, .spn-copiar, .spn-cola-btn):hover:not(:disabled){background:var(--id-hover)}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-estado-sistema, #pane-spine-cliente) .empty{background:#FFFFFF; border-radius:14px; color:var(--id-texto-2); font-size:13px}
html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-estado-sistema, #pane-spine-cliente) .empty.is-loading::before{animation:id-gira .9s linear infinite}

@media (prefers-reduced-motion: reduce){
  html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-estado-sistema, #pane-spine-cliente) :is(.tile, table tbody tr, .spn-volver, .spn-copiar, .spn-cola-btn){transition:none}
  html[data-identidad="v2"] :is(#pane-resumen, #pane-finanzas, #pane-estado-sistema, #pane-spine-cliente) .empty.is-loading::before{animation:none}
}

/* ---- CLIENTES · Resumen (vista) y ficha del cliente ----------------------------------------------------------- */
html[data-identidad="v2"] #pane-spine-cliente .spn-lead{border:0; border-radius:14px; background:#FFFFFF; box-shadow:inset 4px 0 0 var(--id-grafito); padding:12px 18px 12px 22px}
html[data-identidad="v2"] #pane-spine-cliente .spn-lead summary{font-size:13px; font-weight:600; color:var(--id-texto)}
html[data-identidad="v2"] #pane-spine-cliente .spn-lead summary::before{color:var(--id-texto)}
html[data-identidad="v2"] #pane-spine-cliente .spn-lead summary .mas{color:var(--id-texto); font-weight:700; text-decoration:underline; text-underline-offset:3px}
html[data-identidad="v2"] #pane-spine-cliente .spn-lead summary:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-spine-cliente .spn-lead p{font-size:12.5px; color:var(--id-gris-tinta)}
/* la franja de frescura: ámbar / rojo de la familia, sin borde; el rótulo y el texto siguen diciéndolo */
html[data-identidad="v2"] #pane-spine-cliente .spn-fresca{border:0; border-radius:14px; padding:10px 16px; font-size:12px}
html[data-identidad="v2"] #pane-spine-cliente .spn-fresca.ok{background:#FFFFFF; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-spine-cliente .spn-fresca.warn{background:var(--id-revision-bg); color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-spine-cliente .spn-fresca.warn .eti{color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-spine-cliente .spn-fresca.crit{background:var(--id-disputado-bg); color:var(--id-disputado-fg)}
html[data-identidad="v2"] #pane-spine-cliente .spn-fresca.crit .eti{color:var(--id-disputado-fg)}
/* ficha: cabecera, barra del registro, índice de bloques, secciones */
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-cab, .spn-sec, .spn-barra-reg){border:0; border-radius:14px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-spine-cliente .spn-cab h3{font-size:20px; font-weight:800; letter-spacing:-.01em}
html[data-identidad="v2"] #pane-spine-cliente .spn-cab .numero{font-family:var(--id-font-mono); font-size:16px; font-weight:500; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-spine-cliente .spn-dato .r{font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-spine-cliente .spn-dato .d{font-size:13px; color:var(--id-texto)}
html[data-identidad="v2"] #pane-spine-cliente .spn-sec h4{font-size:15px; font-weight:800}
html[data-identidad="v2"] #pane-spine-cliente .spn-sec .sub, html[data-identidad="v2"] #pane-spine-cliente .spn-bloque-cab .sub{font-size:12px; color:var(--id-texto-2)}
html[data-identidad="v2"] #pane-spine-cliente .spn-bloque-cab h3{font-size:15px; font-weight:800}
html[data-identidad="v2"] #pane-spine-cliente .spn-trato{border:1px solid var(--id-linea-fila); border-radius:12px}
html[data-identidad="v2"] #pane-spine-cliente .spn-trato .cab .nom{font-weight:800}
html[data-identidad="v2"] #pane-spine-cliente .spn-ind{height:32px; padding:0 12px; border:0; border-radius:16px; background:transparent; color:var(--id-texto-2); font-size:12.5px; font-weight:600; transition:background .3s}
html[data-identidad="v2"] #pane-spine-cliente .spn-ind:hover{background:var(--id-hover); color:var(--id-texto)}
html[data-identidad="v2"] #pane-spine-cliente .spn-ind[aria-current="true"]{background:var(--id-grafito); color:#FFFFFF; font-weight:700}
html[data-identidad="v2"] #pane-spine-cliente .spn-ind[aria-current="true"] .n{color:#C9CCD1}
html[data-identidad="v2"] #pane-spine-cliente .spn-ind .n{color:var(--id-texto-3)}
html[data-identidad="v2"] #pane-spine-cliente .spn-btn{height:36px; padding:0 18px; border:0; border-radius:18px; background:var(--id-acento); color:var(--id-acento-ink); font-size:13px; font-weight:800}
html[data-identidad="v2"] #pane-spine-cliente .spn-btn.ghost{background:var(--id-fondo); color:var(--id-texto); font-weight:700}
html[data-identidad="v2"] #pane-spine-cliente .spn-btn:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-spine-cliente .spn-sec tbody tr.spn-click:hover td{background:var(--id-fila-hover)}
html[data-identidad="v2"] #pane-spine-cliente .spn-sec tbody tr.spn-abierta td{background:var(--id-acento-suave)}
html[data-identidad="v2"] #pane-spine-cliente .spn-sec tbody tr.spn-abierta td:first-child{box-shadow:inset 3px 0 0 var(--id-grafito)}
html[data-identidad="v2"] #pane-spine-cliente .spn-cobra.si{color:var(--id-disputado-fg); font-weight:700}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-mono, td.spn-mono){font-family:var(--id-font-mono); font-size:11px}
/* sellos propios de la ficha: el mismo lenguaje de familias (fondo + tinta + ícono por la clase de tono, texto siempre presente) */
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-sello, .rec-badge){display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 10px; border:0; border-radius:12px;
  background:var(--id-por-acreditar-bg); color:var(--id-por-acreditar-fg); font-size:11.5px; font-weight:700; line-height:1.2}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-sello.ok, .rec-badge.t-ok){background:var(--id-acreditado-bg); color:var(--id-acreditado-fg)}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-sello.warn, .rec-badge.t-rev){background:var(--id-revision-bg); color:var(--id-revision-fg)}
html[data-identidad="v2"] #pane-spine-cliente :is(.spn-sello.crit, .rec-badge.t-mal){background:var(--id-disputado-bg); color:var(--id-disputado-fg)}
html[data-identidad="v2"] #pane-spine-cliente .spn-teclas kbd, html[data-identidad="v2"] #pane-spine-cliente kbd.spn-kbd{font-family:var(--id-font-mono); font-size:10.5px; border:0; border-radius:5px; background:var(--id-fondo); color:var(--id-texto); padding:1px 5px}

/* ---- FINANZAS · Anticipos sin aplicar: la barra de filtros y las tablas ------------------------------------------ */
html[data-identidad="v2"] #pane-finanzas .fin-barra :is(select, input){height:36px; border:0; border-radius:18px; background:var(--id-fondo); color:var(--id-texto); font:inherit; font-size:12.5px; font-weight:600; padding:0 12px; box-shadow:none}
html[data-identidad="v2"] #pane-finanzas .fin-barra :is(select, input):focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}
html[data-identidad="v2"] #pane-finanzas .fin-barra label{color:var(--id-texto-3); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
html[data-identidad="v2"] #pane-finanzas .tablewrap{border:0; border-radius:12px; background:#FFFFFF; box-shadow:none}
html[data-identidad="v2"] #pane-finanzas table tbody tr:hover{background:var(--id-fila-hover)}
html[data-identidad="v2"] #pane-finanzas table tbody td a{color:var(--id-texto); text-underline-offset:3px}
html[data-identidad="v2"] #pane-finanzas td.num{font-weight:800}
html[data-identidad="v2"] #pane-finanzas td.fecha{font-family:var(--id-font-mono); font-size:11px}

/* ======================================================================================================
   RETOQUE DE LA FASE 3 · estados terminales (Baja, Cancelado, Cerrado) → familia «descartado» (Dirección, 2026-10-01).
   `spine.js` y `finanzas.js` marcan el sello con `data-estado="terminal"` (inerte sin la bandera). El texto no cambia.
   ====================================================================================================== */
html[data-identidad="v2"] :is(#pane-finanzas, #pane-spine-cliente) .badge[data-estado="terminal"]{
  --f-bg:var(--id-descartado-bg); --f-fg:var(--id-descartado-fg); --f-ico:var(--id-i-x)}

/* ======================================================================================================
   EXPEDIENTES Y TABLAS · MEJORAS PEDIDAS POR DIRECCIÓN (2026-10-01). SOLO INTERFAZ, todo bajo la bandera.
   1 aire en la barra y el cuerpo · 2 sin la leyenda «PREPRODUCCIÓN · no escribe» · 3 el filtro puesto pesa y se
   quita ahí mismo (barra y encabezados) · 4 la columna fija se ve, y solo vive al inicio.
   ====================================================================================================== */
html[data-identidad="v2"]{
  --id-ancla-tinte:color-mix(in srgb, var(--id-acento) 14%, transparent);
  --id-ancla-borde:color-mix(in srgb, var(--id-grafito) 55%, #FFFFFF);
  --id-i-filtro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.46V19l4 2v-8.54z'/%3E%3C/svg%3E");
  --id-i-filtro-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.013 3H2l8 9.46V19l4 2v-6.17'/%3E%3Cpath d='m22 3-5 5'/%3E%3Cpath d='m17 3 5 5'/%3E%3C/svg%3E");
}

/* ---- 2 · La leyenda «PREPRODUCCIÓN · no escribe» sale de la cabecera de TODAS las pestañas ----------------------
   `display:none` completo: no ocupa lugar. Lo que NO se oculta es el aviso GRAVE (`.regimen.grave`, hoy «ESCRITURA REAL
   A CRM» en Ingesta manual): ese no es la leyenda, es la señal de que la pantalla SÍ escribe, y se calla solo cuando
   no tiene nada que decir. */
html[data-identidad="v2"] .topbar .regimen:not(.grave){display:none}
html[data-identidad="v2"] .topbar #chips:not(:has(.regimen.grave)){display:none}

/* ---- 1 · Aire: la barra de chips y búsqueda, el encabezado y las filas ------------------------------------------- */
html[data-identidad="v2"] #pane-expedientes .ex-filtros{padding:2px 0 4px; column-gap:10px; row-gap:8px; margin:2px 0 8px}
html[data-identidad="v2"] #pane-expedientes .ex-alerta{margin-bottom:8px}
html[data-identidad="v2"] #pane-expedientes table thead th{padding-top:12px; padding-bottom:12px}
html[data-identidad="v2"] #pane-expedientes table[data-densidad="compacta"] tbody td{padding-top:6px; padding-bottom:6px}
html[data-identidad="v2"] #pane-expedientes .ex-foot{padding-top:10px}

/* ---- 3a · Un filtro PUESTO en la barra: relleno en el acento, tinta de contraste, ícono de filtro y su «×» ----------- */
html[data-identidad="v2"] #pane-expedientes .ex-pick:has(> select.es-puesto),
html[data-identidad="v2"] #pane-expedientes .etqf:has(> .etqf-btn.es-puesto){
  position:relative; background:var(--id-acento); color:var(--id-acento-ink); border-radius:19px}
html[data-identidad="v2"] #pane-expedientes .ex-pick:has(> select.es-puesto)::before,
html[data-identidad="v2"] #pane-expedientes .etqf:has(> .etqf-btn.es-puesto)::before{
  content:""; position:absolute; left:14px; top:50%; width:14px; height:14px; transform:translateY(-50%); pointer-events:none;
  background:var(--id-acento-ink); -webkit-mask:var(--id-i-filtro) center/contain no-repeat; mask:var(--id-i-filtro) center/contain no-repeat}
html[data-identidad="v2"] #pane-expedientes .ex-pick select.es-puesto,
html[data-identidad="v2"] #pane-expedientes .etqf-btn.es-puesto{
  background:transparent; color:var(--id-acento-ink); font-weight:800; padding-left:34px; padding-right:38px;
  -webkit-appearance:none; appearance:none; border:0}
html[data-identidad="v2"] #pane-expedientes .etqf-btn.es-puesto .etqf-cur{display:none}
html[data-identidad="v2"] #pane-expedientes .etqf-btn.es-puesto .etqf-n{background:var(--id-acento-ink); color:var(--id-acento); font-weight:800}
html[data-identidad="v2"] #pane-expedientes .ex-pick:has(> select.es-puesto):hover,
html[data-identidad="v2"] #pane-expedientes .etqf:has(> .etqf-btn.es-puesto):hover{filter:brightness(.96)}
/* el «×»: 28 px de área, dentro de la pastilla, a la derecha */
html[data-identidad="v2"] #pane-expedientes .id-x{position:absolute; right:5px; top:50%; transform:translateY(-50%); width:28px; height:28px;
  border:0; border-radius:14px; background:transparent; color:var(--id-acento-ink); padding:0; display:flex; align-items:center;
  justify-content:center; cursor:pointer; transition:background .3s}
html[data-identidad="v2"] #pane-expedientes .id-x svg{width:16px; height:16px}
html[data-identidad="v2"] #pane-expedientes .id-x:hover{background:color-mix(in srgb, var(--id-acento-ink) 18%, transparent)}
html[data-identidad="v2"] #pane-expedientes .id-x:focus-visible{outline:2px solid var(--id-acento-ink); outline-offset:1px}
/* la búsqueda puesta también es un filtro: se nota con el borde del acento */
html[data-identidad="v2"] #pane-expedientes .ex-buscar:not(:placeholder-shown){box-shadow:inset 0 0 0 2px var(--id-acento)}

/* ---- 3b · «Limpiar filtros (N)»: pastilla de grafito con ícono, JUNTO a los filtros que quita ---------------------
   Va entre el último filtro y la búsqueda (`order`, y no mover el nodo: el marcado sigue igual). El buscador es el control
   flexible, así que absorbe el ancho y ningún filtro se desplaza al ponerse el primero. */
html[data-identidad="v2"] #pane-expedientes .ex-limpiar-caja{order:1}
html[data-identidad="v2"] #pane-expedientes .ex-buscar-caja{order:2}
html[data-identidad="v2"] #pane-expedientes .ex-lote-caja{order:3}
html[data-identidad="v2"] #pane-expedientes .ex-vista{order:4}
html[data-identidad="v2"] #pane-expedientes .ex-limpiar-caja .op-btn.ex-limpiar{
  position:relative; height:38px; padding:0 16px 0 38px; border:2px solid var(--id-grafito); border-radius:19px;
  background:var(--id-grafito); color:#FFFFFF; font-size:13px; font-weight:800; text-decoration:none; white-space:nowrap}
html[data-identidad="v2"] #pane-expedientes .ex-limpiar-caja .op-btn.ex-limpiar::before{
  content:""; position:absolute; left:14px; top:50%; width:16px; height:16px; transform:translateY(-50%);
  background:var(--id-acento); -webkit-mask:var(--id-i-filtro-x) center/contain no-repeat; mask:var(--id-i-filtro-x) center/contain no-repeat}
html[data-identidad="v2"] #pane-expedientes .ex-limpiar-caja .op-btn.ex-limpiar:hover{background:#3A3F47; border-color:#3A3F47}
html[data-identidad="v2"] #pane-expedientes .ex-limpiar-caja .op-btn.ex-limpiar:focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}

/* ---- 3c · Un filtro puesto en el ENCABEZADO de una columna: se distingue y se limpia ahí mismo ------------------- */
html[data-identidad="v2"] thead th.col-filtrada{color:var(--id-texto) !important; font-weight:800 !important}   /* !important: cada pestaña fija el rótulo de su th con un selector de id */
html[data-identidad="v2"] thead th.col-filtrada::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--id-acento); pointer-events:none}
html[data-identidad="v2"] thead th.col-filtrada .col-menu{color:var(--id-texto); opacity:1}
html[data-identidad="v2"] thead th.col-con-menu.col-filtrada{padding-right:78px !important}
html[data-identidad="v2"] thead th .col-quitar{position:absolute; top:50%; right:38px; transform:translateY(-50%); height:24px; min-width:24px;
  padding:0 7px 0 6px; display:inline-flex; align-items:center; justify-content:center; gap:3px; border:0; border-radius:12px;
  background:var(--id-acento); color:var(--id-acento-ink); font:inherit; font-size:14px; font-weight:800; line-height:1; cursor:pointer;
  text-transform:none; letter-spacing:0; transition:filter .3s}
html[data-identidad="v2"] thead th .col-quitar svg{width:12px; height:12px; flex:none}
html[data-identidad="v2"] thead th .col-quitar:hover{filter:brightness(.94)}
html[data-identidad="v2"] thead th .col-quitar:focus-visible{outline:2px solid var(--id-grafito); outline-offset:1px}

/* ---- 4 · La columna FIJA: pin relleno en una ficha del acento + fondo tintado + separador tras la última -------------
   El pin va en la ficha con la tinta de contraste (como el ítem activo del menú): el acento solo, como tinta sobre blanco, no
   alcanza AA en lima. Fondo tintado y separador los pone `aplicarAncla` (por posición de columna) con las variables de arriba. */
html[data-identidad="v2"] thead th .col-pin{width:22px; height:22px; border-radius:7px; justify-content:center; margin-right:7px;
  background:var(--id-acento); color:var(--id-acento-ink); vertical-align:middle}
html[data-identidad="v2"] thead th .col-pin svg{width:14px; height:14px; fill:currentColor}
html[data-identidad="v2"] thead th.col-anclada{color:var(--id-texto)}
/* en la lista «Columnas…», la fija se reconoce y su movimiento bloqueado se ve deshabilitado */
html[data-identidad="v2"] .col-fila.col-fila-fija{background:var(--id-ancla-tinte); box-shadow:inset 3px 0 0 var(--id-acento)}
/* ningún filtro de la barra se encoge hasta cortar su texto («Acreditación (2…»): si no caben, la barra se parte en dos renglones */
html[data-identidad="v2"] #pane-expedientes .ex-filtros :is(.ex-pick, .etqf, .ex-limpiar-caja){flex:none}
html[data-identidad="v2"] #pane-expedientes .ex-pick select.es-puesto{max-width:none}

/* Ancho de Clientes (2026-10-01): el techo de 1480 px de `#spine-root` dejaba la tabla corta en pantallas
   grandes mientras Expedientes y Movimientos rellenan. Los textos de lectura llevan su propio techo
   (`.spn-lead p`, `.sub`), asi que quitar el del contenedor no estira lineas de lectura. */
html[data-identidad="v2"] #spine-root{max-width:none}

/* Ancho de Finanzas (2026-10-01): el techo de 1180 px de `#finanzas-root` (js/finanzas.js) dejaba Anticipos en ~1140 px a cualquier
   pantalla. Solo Finanzas: Acreditacion, Arranque y Exencion (legado) conservan el suyo. Los textos de lectura llevan su propio techo
   para que quitar el del contenedor no estire renglones de lectura; las tarjetas (`auto-fill`) y las graficas (SVG con viewBox) escalan solas. */
html[data-identidad="v2"] #finanzas-root{max-width:none}
html[data-identidad="v2"] #finanzas-root :is(.fin-nota, .fin-vacio, .fin-frescura .aviso){max-width:75ch}

/* ======================================================================================================
   LAYOUT A 1280 (2026-10-02, antes de encender v2 para todos). La spec del 29-sep exige, a 1280×720: el Monto de Todos y de la
   Cola A LA VISTA sin desplazar, y la barra de filtros en UN renglón aun con un filtro puesto. Con la identidad encendida el menú
   de 208 px, las fichas de estado con ícono y el aire de las celdas se comían ~70 px de tabla y ~65 px de barra. Aquí se
   compacta la TABLA solo por debajo de 1350 px de ventana (el umbral donde la ficha del expediente ya cambia de reparto) y la BARRA de filtros por debajo de 1600: de 1440 en adelante el aire de la tabla queda como está. Nada se recorta con «…»:
   ids, importes y estados siguen enteros; lo que cede es relleno (padding, separaciones, el espacio entre ícono y texto).
   El buscador conserva su mínimo de 170 px. Medido en docs/design/IDENTIDAD_VISUAL_v1.md §30.
   ====================================================================================================== */
@media (max-width:1349px){
  /* el marco del contenido: 24 → 16 px a cada lado (la tabla y la barra ganan 16 px) */
  html[data-identidad="v2"] .content{padding-left:16px; padding-right:16px}
  /* celdas de la tabla de Expedientes: relleno lateral 14 → 10 px (el menú del encabezado vive en el `padding-right` del th,
     que no se toca) */
  html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla :is(thead th, tbody td){padding-left:10px}
  html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla tbody td{padding-right:10px}
  /* fichas de estado: menos relleno y menos aire entre ícono y texto; la misma altura y el mismo tamaño de letra */
  html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla :is(.ex-tag, .badge){gap:4px; padding:0 8px 0 5px}
  html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla .ex-dup-mini{margin-left:4px}
  /* la clave del expediente y la fecha, en Martian Mono, son lo más ancho por carácter de la tabla */
  html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla .idchip{padding:2px 4px; letter-spacing:0}
  html[data-identidad="v2"] #pane-expedientes .ex-lista-tabla :is(td.ex-fecha, td.mono){font-size:10.5px}
}

/* LA BARRA DE FILTROS CON FILTROS PUESTOS (2026-10-02). Con la identidad encendida los chips son más anchos (Situación→Fase de ~126 a
   ~157 px puesta) y «Limpiar filtros (N)» se suma: la barra pasaba a DOS renglones con un filtro puesto a 1280, con «No es
   comprobante» + su Motivo a 1440, y con el Carril de Acreditación y su lote a 1280. La spec del 29-sep la quiere en UN renglón a
   1280 y 1440. SIN filtros puestos la barra no se toca (conserva el aire de la mejora del 1-oct: separaciones de 10 px, chips de 13 px;
   `e2e_expedientes_mejoras_v2` C2). El rastro de «hay filtros» es el propio botón «Limpiar filtros (N)» (`.ex-limpiar`, con `data-n`
   = cuántos): sin él la barra no se compacta. Nada se recorta con «…»; lo que cede es relleno y separación. El buscador conserva
   su mínimo declarado por el panel (170 px; 110 con el lote en la barra).
   Nivel 1, por debajo de 1600 px y con al menos un filtro: separaciones de 10 → 6 px (las que traía la barra del panel), 3 px menos
   de relleno por lado en los chips y menos relleno en «Limpiar». Misma altura (38) y misma letra (13). */
@media (max-width:1599px){
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar){column-gap:6px}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar) :is(.ex-pick select, .ex-vista-btn, .etqf-btn){padding-left:10px; padding-right:10px}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar) :is(.ex-pick select.es-puesto, .etqf-btn.es-puesto){padding-left:28px; padding-right:32px}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar) :is(.ex-pick:has(> select.es-puesto), .etqf:has(> .etqf-btn.es-puesto))::before{left:10px}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar) .ex-limpiar-caja .op-btn.ex-limpiar{padding:0 12px 0 32px}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar) .ex-limpiar-caja .op-btn.ex-limpiar::before{left:10px}
}

/* Nivel 2, por debajo de 1600 px y con DOS filtros o más («No es comprobante» + su Motivo + «Limpiar filtros (2)» pide ~1,274 px y a
   1440 hay 1,174; Fase + Carril + lote a 1280 piden ~1,145 y hay 1,030): separaciones de 4 px, letra de 12 px (la de las celdas de
   la tabla y la que traía el panel) y el filtro puesto sin el ícono de embudo (se queda el relleno en el acento, el valor en negrita y
   su «×»: el ícono era adorno). */
@media (max-width:1599px){
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar:is([data-n="2"], [data-n="3"], [data-n="4"], [data-n="5"], [data-n="6"])){column-gap:4px}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar:is([data-n="2"], [data-n="3"], [data-n="4"], [data-n="5"], [data-n="6"])) :is(.ex-pick select, .ex-vista-btn, .etqf-btn, .ex-limpiar-caja .op-btn){font-size:12px}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar:is([data-n="2"], [data-n="3"], [data-n="4"], [data-n="5"], [data-n="6"])) :is(.ex-pick select, .ex-vista-btn, .etqf-btn){padding-left:8px; padding-right:8px}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar:is([data-n="2"], [data-n="3"], [data-n="4"], [data-n="5"], [data-n="6"])) :is(.ex-pick select.es-puesto, .etqf-btn.es-puesto){padding-left:10px; padding-right:30px}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar:is([data-n="2"], [data-n="3"], [data-n="4"], [data-n="5"], [data-n="6"])) :is(.ex-pick:has(> select.es-puesto), .etqf:has(> .etqf-btn.es-puesto))::before{display:none}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar:is([data-n="2"], [data-n="3"], [data-n="4"], [data-n="5"], [data-n="6"])) .ex-limpiar-caja .op-btn.ex-limpiar{padding:0 10px 0 30px}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros:has(.ex-limpiar-caja .ex-limpiar:is([data-n="2"], [data-n="3"], [data-n="4"], [data-n="5"], [data-n="6"])) .ex-limpiar-caja .op-btn.ex-limpiar::before{left:9px; width:14px; height:14px}
}

/* Con el lote de Acreditación en la barra a 1280 (por debajo de 1350 px): el sobrante NO lo absorbe el buscador (queda en su mínimo de
   110 px) sino un hueco ANTES del botón del lote. Al pulsar «Autorizar…» el botón se encoge (284 → 115 px) y, si el buscador
   creciera, el segundo clic de un doble clic caería sobre él y abriría la paleta (Ctrl K) encima del diálogo de confirmación
   (`e2e_acreditacion_por_autorizar`, el doble clic del lote). Así ese clic cae en el hueco de la barra. */
@media (max-width:1349px){
  html[data-identidad="v2"] #pane-expedientes .ex-filtros.ex-con-lote .ex-buscar-caja{flex-grow:0}
  html[data-identidad="v2"] #pane-expedientes .ex-filtros.ex-con-lote .ex-lote-caja{margin-left:auto}
}

/* El carril del cruce (ficha del expediente, `expediente_panel.js`) entre 1350 y 1439 px. El menú de v2 mide 208 px en vez de 240 y
   la rejilla de la ficha gana ~22 px: sin tocar nada, TODO ese sobrante se iba a los DATOS (362 px a 1366), que son quienes
   ceden cuando el comprobante ya está en su piso de 380 (`e2e_carril_del_cruce`, «los DATOS ceden»: datos < 350 a 1366). Esos
   22 px se devuelven como margen derecho de la ficha, igual en sus dos estados (con y sin carril), así que el reparto no
   cambia: el comprobante conserva su piso de 380, el cruce el suyo de 330 y quienes ceden siguen siendo los datos. De 1440
   en adelante la ficha rellena todo el ancho; por debajo de 1350 los datos se ocultan y manda el reparto de dos columnas. */
@media (min-width:1350px) and (max-width:1439px){
  html[data-identidad="v2"] .expp{padding-right:22px}
}

/* El encabezado de la confrontación en el carril del movimiento («Dice el extracto (movimiento)»). `movimiento_panel.js` ya le
   pide al encabezado MENOS espaciado entre letras para que quepa en dos renglones (`.01em`), pero la regla de v2 de
   arriba (`.05em` en cada `.v` del encabezado, más específica) se lo quitaba y a 1440 px la pista de 117 px lo partía en TRES
   renglones. Se restituye lo que el carril pedía: mismo tamaño de letra, mismo peso, solo el espaciado. */
html[data-identidad="v2"] #pane-expedientes .mvp .ex-confronta-tabla .ex-campo.es-cabecera .v{letter-spacing:.01em}

/* ---- Tres defectos de la identidad v2 que dejaron rojas pruebas (2026-10-02) ---------------------------------------------
   Todo bajo la bandera v2: con `?identidad=off` nada de esto aplica. */

/* (1) Cotejo de la ficha: el importe va a la DERECHA (`.es-monto`), así que su encabezado («Comprobante» / «Depósito») comparte el borde
   derecho con él, y la diferencia («depósito − comprobante») cae a la derecha de la columna del depósito. `expedientes.js` inyecta en runtime
   `.ex-confronta-tabla .ex-campo.es-cabecera .v{text-align:left}` (decisión «alinea valores», 2026-10-01); estas llevan el id del pane y la
   bandera, o sea más específicas, sin `!important`. */
html[data-identidad="v2"] #pane-expedientes .ex-confronta-tabla .ex-campo.es-cabecera .v{text-align:right}
html[data-identidad="v2"] #pane-expedientes .ex-confronta-tabla .ex-dif-fila .dv{text-align:right}
html[data-identidad="v2"] #pane-expedientes .ex-dif-n{display:block; text-align:right}

/* (3) La palomita del desplegable de etiquetas: el glifo ✓ en la fuente de v2 es más alto que la casilla de 14 px (line-height:1 de 11 px
   más la caja del glifo) y desbordaba. Se mide su caja a la medida de la casilla y se centra; la casilla no cambia de tamaño. */
html[data-identidad="v2"] .etq-cas{box-sizing:border-box; overflow:hidden; padding:0; font-size:10px; line-height:12px; text-align:center}

/* ---- EL HILO DE CONVERSACION de la ficha (solo lectura; hilo_conversacion.js, 2026-10-03) -----------
   Las reglas base viven en el propio modulo (presentable tambien con la identidad apagada); aqui se
   alinean con los tokens `--id-*` y la maqueta aprobada («Conversacion»). Sin `#pane-expedientes`: la
   ficha tambien vive en la mesa y en la cola. */
html[data-identidad="v2"] .hilo-cab h3{font-size:16px; font-weight:800; color:var(--id-texto)}
html[data-identidad="v2"] .hilo-sello{background:var(--id-por-acreditar-bg); color:var(--id-por-acreditar-fg); border-radius:var(--id-r-sello)}
html[data-identidad="v2"] .hilo-ventana{color:var(--id-texto-2)}
html[data-identidad="v2"] .hilo-lista{background:var(--id-fondo); border-radius:12px}
html[data-identidad="v2"] .hilo-dia{background:var(--id-por-acreditar-bg); color:var(--id-texto-2)}
html[data-identidad="v2"] .hilo-quien{color:var(--id-texto-2)}
html[data-identidad="v2"] .hilo-burbuja{background:var(--id-tarjeta); color:var(--id-texto); font-family:var(--id-font-texto)}
html[data-identidad="v2"] .hilo-msg.sale .hilo-burbuja{background:var(--id-por-acreditar-bg)}
html[data-identidad="v2"] .hilo-msg.es-origen .hilo-burbuja{outline:2px solid var(--id-grafito)}
html[data-identidad="v2"] .hilo-marca{background:var(--id-acento); color:var(--id-acento-ink)}
html[data-identidad="v2"] .hilo-hora{font-family:var(--id-font-mono); color:var(--id-texto-2)}
html[data-identidad="v2"] .hilo-adj{background:var(--id-por-acreditar-bg); color:var(--id-descartado-fg)}
html[data-identidad="v2"] .hilo-pie{background:var(--id-descartado-bg); color:var(--id-descartado-fg); border-radius:12px}
html[data-identidad="v2"] .hilo-estado{background:var(--id-fondo); color:var(--id-texto-2)}
html[data-identidad="v2"] .hilo :is(button, a):focus-visible{outline:2px solid var(--id-grafito); outline-offset:2px}