/* ═══════════════════════════════════════════════════════════════════════════
   Solicitudes Jurídico — hoja única.

   Adopta «Industry», el sistema que JP diseñó en Claude Design el 15-sep-2026.
   Las fuentes viven aquí (`scripts/extraer-fuentes.js` las sacó del bundle), no
   en Google Fonts: el módulo se usa desde la red del despacho y una pantalla
   que depende de un tercero para verse bien es una pantalla que un día no se ve.

   Orden del archivo, y la razón de que sea éste:

     1. @font-face locales
     2. tokens de Industry + los tokens semánticos que el módulo necesita
     3. PUENTE de compatibilidad: --tinta, --gris, --linea… siguen existiendo,
        apuntando a los tokens nuevos. Las once pantallas viejas cambian de piel
        sin que se les toque una línea de plantilla. Cuando todas estén
        traducidas (fase C), el puente se borra de un tirón.
     4. shell: barra lateral + contenido
     5. componentes

   Nada de esto lleva JavaScript.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1 · fuentes ──────────────────────────────────────────────────────────
   Sólo latin y latin-ext. El `unicode-range` hace que el navegador pida el
   archivo extendido únicamente cuando la página trae un carácter que lo
   necesita: en español eso son los acentos y la ñ, que caen en latin. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/barlow-400-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/barlow-400-latin-ext.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:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/fonts/barlow-500-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/fonts/barlow-500-latin-ext.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:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fonts/barlow-700-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fonts/barlow-700-latin-ext.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:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/barlow-condensed-400-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/barlow-condensed-400-latin-ext.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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/barlow-condensed-600-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/barlow-condensed-600-latin-ext.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}

/* ── 2 · tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Industry, tal como salió del sistema. No se retocan a mano: si el sistema
     cambia, se vuelven a copiar de `docs/mockups/design-system-industry.css`. */
  --color-bg:#f2f2f3;
  --color-surface:#e9e9ea;
  --color-text:#1d1f20;
  --color-accent:#5980a6;
  --color-accent-2:#728fab;
  --color-divider:color-mix(in srgb,#1d1f20 16%,transparent);

  --color-neutral-100:#f5f5f8;--color-neutral-200:#e7e7ea;--color-neutral-300:#d4d4d7;
  --color-neutral-400:#b7b7ba;--color-neutral-500:#98989b;--color-neutral-600:#7a7a7d;
  --color-neutral-700:#5d5d60;--color-neutral-800:#424244;--color-neutral-900:#2b2b2d;

  --color-accent-100:#eef6ff;--color-accent-200:#d6ebff;--color-accent-300:#b5d9fd;
  --color-accent-400:#94bce3;--color-accent-500:#749dc4;--color-accent-600:#597ea3;
  --color-accent-700:#416180;--color-accent-800:#2c455d;--color-accent-900:#1d2d3d;

  --color-accent-2-100:#eef6ff;--color-accent-2-200:#d6ebff;--color-accent-2-300:#bdd8f2;
  --color-accent-2-400:#9ebbd8;--color-accent-2-500:#7e9cb8;--color-accent-2-600:#627d98;
  --color-accent-2-700:#486077;--color-accent-2-800:#314457;--color-accent-2-900:#1f2d3a;

  --font-heading:"Barlow Condensed",system-ui,sans-serif;
  --font-heading-weight:600;
  --font-body:"Barlow",system-ui,sans-serif;

  --space-1:3.4px;--space-2:6.8px;--space-3:10.2px;--space-4:13.6px;--space-6:20.4px;--space-8:27.2px;
  --radius-sm:2px;--radius-md:4px;--radius-lg:7px;

  --shadow-sm:0 1px 2px color-mix(in srgb,#2b2b2d 14%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#2b2b2d 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#2b2b2d 22%,transparent);

  /* Tokens semánticos del módulo. Industry trae una escala de acento y otra de
     neutros, pero no tiene «esto hay que mirarlo» ni «esto está mal»: son
     estados del trabajo, no del diseño. Los dos valores salen de los mockups
     del paso 2, donde JP ya los había elegido. */
  --color-aviso:#8a5f11;
  --color-aviso-fondo:#fdf5e4;
  --color-aviso-borde:#e6cf9b;
  --color-peligro:#a6432f;
  --color-peligro-fondo:#fbecea;
  --color-peligro-texto:#7d3223;
  --color-peligro-borde:#e3b3a8;
  --color-listo:#2f6d4c;
  --color-listo-fondo:#e9f3ec;
  --color-listo-borde:#bcd9c6;

  --lateral-ancho:228px;
}

/* ── 3 · puente de compatibilidad ────────────────────────────────────────
   Las once pantallas que ya existen están escritas contra estos nombres. Aquí
   dejan de ser colores y pasan a ser alias de Industry, así que la piel cambia
   sola y las plantillas se traducen una por una, sin una noche de «todo roto».
   Cuando la fase C termine, este bloque se va entero. */
:root{
  --tinta:var(--color-text);
  --gris:var(--color-neutral-600);
  --linea:var(--color-divider);
  --fondo:var(--color-bg);
  --acento:var(--color-accent-700);
  --ambar:var(--color-aviso);
  --verde:var(--color-listo);
  --rojo:var(--color-peligro);
  --morado:var(--color-accent-2-700);
  --azul:var(--color-accent-700);
  --superficie:#fff;
}

/* ── 4 · base y shell ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:14px;line-height:1.5;
  color:var(--color-text);background:var(--color-bg)}
a{color:var(--color-accent-700);text-underline-offset:3px}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  line-height:1.14;letter-spacing:-.01em;margin:0 0 var(--space-2)}
h1{font-size:28px;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-700);margin:1.5em 0 .5em}
h3{font-size:16px}h4{font-size:14px}
p{margin:0 0 var(--space-3)}
img{display:block;max-width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{background:var(--color-neutral-200);padding:1px 5px;border-radius:var(--radius-sm)}

/* El shell: barra lateral fija a la izquierda, contenido a la derecha.
   `body.app` y no una clase en un div porque el fondo oscuro de la lateral
   tiene que llegar hasta abajo aunque la página sea corta. */
body.app{display:flex;min-height:100vh;align-items:stretch}

/* `lateral-nav` y no `lateral` a secas: `detalle.hbs` ya usaba `lateral` para su
   columna derecha desde hace semanas, y al reclamar esa palabra en la capa base
   la ficha de una solicitud salió con texto oscuro sobre fondo azul marino —
   ilegible. Se vio en la captura local antes de subirlo. Una palabra genérica en
   la hoja compartida es una trampa esperando a que alguien la pise: el nombre de
   un componente del armazón lleva su propio prefijo. */
.lateral-nav{width:var(--lateral-ancho);flex:none;background:var(--color-accent-900);
  padding:22px 0;display:flex;flex-direction:column;color:#fff}
.lateral-marca{padding:0 18px 20px;border-bottom:1px solid rgba(255,255,255,.14);
  margin-bottom:16px;display:flex;align-items:center;gap:11px;text-decoration:none}
.lateral-sello{width:34px;height:34px;flex:none;border:1px solid var(--color-accent-400);
  display:grid;place-items:center;position:relative;
  font-family:var(--font-heading);font-weight:600;font-size:15px;color:#fff}
.lateral-nombre{font-family:var(--font-heading);font-weight:500;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;line-height:1.15}
.lateral-menu{display:flex;flex-direction:column;gap:1px;padding:0 10px}
.lateral-menu a{display:flex;align-items:center;padding:8px 11px;font-size:13px;
  color:rgba(255,255,255,.82);text-decoration:none}
.lateral-menu a:hover{background:var(--color-accent-800);color:#fff}
.lateral-menu a[aria-current="page"]{background:var(--color-accent-700);color:#fff}
.lateral-menu a .cuenta{margin-left:auto;font-variant-numeric:tabular-nums;font-size:11.5px;
  color:var(--color-accent-300)}
.lateral-grupo{font-family:var(--font-heading);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-300);
  padding:14px 11px 4px}
.lateral-pie{margin-top:auto;padding:16px 18px 0;border-top:1px solid rgba(255,255,255,.14);
  font-size:12px;color:rgba(255,255,255,.85)}
.lateral-pie .rol{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-accent-300);margin-top:2px}
.lateral-pie form{margin:8px 0 0}
.lateral-pie .liga{color:var(--color-accent-300)}

.contenido{flex:1;min-width:0;padding:26px 30px 36px;display:flex;flex-direction:column}
body:not(.app) .contenido{max-width:1280px;margin:0 auto}

.encabezado-pagina{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--color-divider);padding-bottom:14px;margin-bottom:16px}
.encabezado-pagina h1{margin:0;font-size:30px}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-neutral-600);padding-bottom:3px}
.kicker.derecha{margin-left:auto;font-size:11px}

.pie{margin-top:auto;padding:24px 0 0;font-size:11.5px;color:var(--color-neutral-600)}

/* ── 5 · componentes ────────────────────────────────────────────────────── */

/* marco de plano: el objeto se dibuja con sus marcas de registro fuera de la caja */
.blueprint{position:relative;border:1px solid var(--color-divider);border-radius:0}
.blueprint>.corner{position:absolute;width:11px;height:11px;
  color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.blueprint>.corner::before,.blueprint>.corner::after{content:"";position:absolute;background:currentColor}
.blueprint>.corner::before{left:5px;top:0;width:1px;height:100%}
.blueprint>.corner::after{top:5px;left:0;width:100%;height:1px}
.blueprint>.corner.tl{top:-6px;left:-6px}
.blueprint>.corner.tr{top:-6px;right:-6px}
.blueprint>.corner.bl{bottom:-6px;left:-6px}
.blueprint>.corner.br{bottom:-6px;right:-6px}

/* botones */
.btn,.btn-primary,.btn-secondary,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:14px;line-height:1.2;color:var(--color-text);
  background:transparent;border:1px solid var(--color-divider);
  padding:var(--space-2) calc(var(--space-3)*1.2);border-radius:0}
.btn-primary,.btn.primario{background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent)}
.btn-primary:hover,.btn.primario:hover{background:var(--color-accent-600);border-color:var(--color-accent-600)}
.btn-primary:active,.btn.primario:active{background:var(--color-accent-700)}
.btn-secondary:hover,.btn:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.btn-ghost{color:var(--color-accent-700);border-color:transparent;padding-inline:var(--space-2)}
.btn-ghost:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
.btn.peligro{color:var(--color-peligro);border-color:var(--color-peligro);background:transparent}
.btn.peligro:hover{background:var(--color-peligro-fondo)}
.btn.chico{padding:4px 9px;font-size:12.5px}
.btn:disabled,.btn[disabled],.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover,.btn[disabled]:hover{background:transparent}
.liga{background:none;border:0;color:var(--color-accent-700);cursor:pointer;
  text-decoration:underline;padding:0;font:inherit}
.inline{display:inline}

/* campos */
input,select,textarea{font:inherit;font-size:14px;padding:6px 10px;min-height:34px;
  color:var(--color-text);caret-color:var(--color-accent);background:#fff;
  border:1px solid var(--color-divider);border-radius:0;width:100%}
textarea{min-height:90px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--color-accent);outline-offset:0}
input[type=checkbox],input[type=radio]{width:auto;min-height:0}
.formulario label{display:block;margin-bottom:10px;font-size:12px;
  color:color-mix(in srgb,var(--color-text) 70%,transparent)}
.formulario .fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.formulario.compacto label{margin-bottom:6px}
.chk{display:flex;align-items:center;gap:6px}.chk input{width:auto}
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.filtros input,.filtros select{width:auto}
.filtros input[name=q]{min-width:260px}

/* avisos */
.flash{padding:10px 14px;margin-bottom:14px;border:1px solid var(--color-divider);background:#fff}
.flash.ok{background:var(--color-listo-fondo);border-color:var(--color-listo-borde);color:var(--color-listo)}
.flash.error{background:var(--color-peligro-fondo);border-color:var(--color-peligro-borde);color:var(--color-peligro-texto)}
.aviso{background:var(--color-aviso-fondo);border:1px solid var(--color-aviso-borde);
  padding:12px 14px;margin-bottom:14px}

/* La banda «Del registro, no de Jurídico»: lo que el origen trae torcido se
   dice en la pantalla en vez de corregirse en silencio. Decisión 10 y 12. */
.aviso-registro{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--color-divider);background:var(--color-neutral-100);
  padding:9px 16px;margin-bottom:16px;font-size:12.5px;color:var(--color-neutral-700)}
.aviso-registro .titulo{font-family:var(--font-heading);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-700)}
.aviso-registro b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--color-text)}

/* etiquetas */
.tag,.pill{display:inline-block;font-size:11px;letter-spacing:.02em;padding:3px 10px;
  border-radius:0;background:var(--color-neutral-200);color:var(--color-neutral-800)}
.pill.chica,.tag.chica{font-size:10.5px;padding:2px 8px}
.tag-accent,.pill.azul{background:var(--color-accent-100);color:var(--color-accent-800)}
.tag-accent-2,.pill.morado{background:var(--color-accent-2-100);color:var(--color-accent-2-800)}
.tag-neutral,.pill.gris{background:var(--color-neutral-100);color:var(--color-neutral-800)}
.tag-outline{border:1px solid var(--color-accent);color:var(--color-accent);background:transparent}
.tag-aviso,.pill.ambar{background:var(--color-aviso-fondo);color:var(--color-aviso)}
.tag-peligro,.pill.rojo{background:var(--color-peligro-fondo);color:var(--color-peligro-texto)}
.tag-listo,.pill.verde{background:var(--color-listo-fondo);color:var(--color-listo)}
/* REVISION no es ni verde ni rojo: espera a una persona, y se ve distinto de
   «fuera» a proposito, porque uno esta resuelto y el otro no. */
.tag-revision{background:var(--color-accent-100);color:var(--color-accent-800);
  border:1px solid var(--color-accent-300)}

/* tarjetas y cajas */
.card,.caja,.bloque,.entrada{border:1px solid var(--color-divider);background:#fff;
  border-radius:0;padding:12px 14px}
.caja+.caja{margin-top:14px}
.caja h2{font-size:12px;margin:0 0 .4em}
.bloque{margin-bottom:12px}
.bloque legend{font-size:11px;color:var(--color-neutral-600);text-transform:uppercase;
  letter-spacing:.1em;padding:0 6px}
.entrada{border-left:3px solid var(--color-divider);margin-bottom:10px}
.entrada h3{font-size:13px;margin:0 0 .3em}.entrada p{margin:.2em 0}
.entrada.rojo{border-left-color:var(--color-peligro)}
.entrada.ambar{border-left-color:var(--color-aviso)}
.entrada.muted{border-left-color:var(--color-divider)}
.tarjetas{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 20px}
.tarjeta{position:relative;border:1px solid var(--color-divider);background:transparent;
  padding:16px 18px;min-width:120px;text-decoration:none;color:inherit;border-radius:0}
.tarjeta .n{display:block;font-family:var(--font-heading);font-weight:500;font-size:30px;
  line-height:1;font-variant-numeric:tabular-nums}
.tarjeta .e{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-neutral-600)}
.tarjeta.chica{min-width:96px;padding:9px 12px}.tarjeta.chica .n{font-size:19px}
.tarjeta.ambar{border-color:var(--color-aviso-borde)}
.tarjeta.verde{border-color:var(--color-listo-borde)}
.tarjeta.rojo{border-color:var(--color-peligro-borde)}
.tarjeta.azul{border-color:var(--color-accent-300)}
.tarjeta.muted{border-color:var(--color-divider)}

/* tablas */
.tabla-scroll{overflow-x:auto;border:1px solid var(--color-divider);background:#fff}
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-neutral-600);padding:9px 12px;background:var(--color-neutral-100);
  border-bottom:1px solid var(--color-divider)}
.tabla td{padding:8px 12px;vertical-align:top;
  border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent)}
.tabla tbody tr:hover{background:color-mix(in srgb,var(--color-text) 4%,transparent)}
.tabla.chica th,.tabla.chica td{padding:5px 9px;font-size:12.5px}
.tabla th.num,.tabla td.num{text-align:right;font-variant-numeric:tabular-nums}
tr.vencida td:first-child{border-left:3px solid var(--color-peligro)}
/* Un folio es un identificador: se lee entero o no se lee. El navegador parte
   en los guiones y «DB-JUR-260916-001» salía en dos renglones, que es lo que se
   copia mal en un correo. La liga a una solicitud nunca se rompe. */
.tabla a[href^="/solicitudes/"],.folio{white-space:nowrap}
.alerta{color:var(--color-aviso);font-weight:600}

/* La rejilla: una tabla hecha con grid, porque el renglón del paso 2 se abre y
   despliega sus CFDI debajo. Con <table> el desplegable obliga a un colspan que
   rompe el ancho de las columnas; con grid, la fila abierta es otro hijo. */
.rejilla{border:1px solid var(--color-divider);background:var(--color-neutral-100)}
/* Siete columnas y no las ocho del mockup: la de «operadora» se fue a la cabecera
   de su propio grupo, donde se dice UNA vez en vez de repetirse en cada fila.
   Es lo que hace que quepan. El presupuesto a 1366 px: 1366 - 15 de la barra de
   scroll - 228 de la lateral - 60 del padding de .contenido - 2 del borde - 32
   del padding de la fila = 1,029 px. Fijo 776 + 6 huecos x 12 = 848, y al
   concepto le quedan 181, que envuelve en dos renglones y se lee. Con las ocho
   del mockup el fijo solo ya sumaba 1,090 y el `1fr` salia negativo. */
.rejilla-cab,.rejilla-fila{grid-template-columns:26px 1fr 190px 60px 140px 140px 220px}
.rejilla-cab{display:grid;gap:12px;padding:9px 16px;
  /* Pegada arriba: con 1,805 renglones, sin esto las columnas se pierden en
     cuanto se baja y no hay forma de saber que se esta mirando. Funciona porque
     ningun ancestro entre .rejilla y el scroll del documento recorta. */
  position:sticky;top:0;z-index:2;background:var(--color-neutral-100);
  border-bottom:1px solid var(--color-divider);
  font-family:var(--font-heading);font-weight:600;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-700)}
.rejilla-grupo{display:flex;align-items:center;gap:12px;padding:8px 16px;
  background:var(--color-accent-900);color:#fff}
.rejilla-grupo .nombre{font-family:var(--font-heading);font-weight:500;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase}
.rejilla-grupo .detalle{font-size:11.5px;color:var(--color-accent-300)}
.rejilla-fila{display:grid;gap:12px;padding:10px 16px;background:#fff;
  border-bottom:1px solid var(--color-divider);align-items:start}
.rejilla-fila.bloqueada{background:var(--color-peligro-fondo)}
.rejilla-fila.avisada{background:var(--color-aviso-fondo)}
.rejilla-fila.abierta{border-bottom:0}
/* Un renglon que esta pero no es el que sale: se ve, en gris, y no se toca. */
.rejilla-fila.no-operativo{background:var(--color-neutral-100);color:var(--color-neutral-600)}
.rejilla-fila .num{text-align:right;font-variant-numeric:tabular-nums}
/* Los bloqueos y los avisos ocupan la fila entera debajo de las columnas: son
   frases, no celdas, y meterlos en una columna los dejaria ilegibles. */
.rejilla-fila .bloqueos,.rejilla-fila .avisos{grid-column:1/-1;font-size:12px;
  padding-top:4px;line-height:1.45}
.rejilla-fila .bloqueos{color:var(--color-peligro)}
.rejilla-fila .avisos{color:var(--color-aviso)}
.rejilla-vacia{padding:18px 16px;background:#fff;color:var(--color-neutral-600)}

/* la cabecera de una operadora: pliega, y dice lo que hay dentro sin abrirla */
.rejilla-operadora{display:grid;grid-template-columns:26px 1fr auto auto;gap:12px;
  align-items:center;padding:9px 16px;background:var(--color-neutral-100);
  border-bottom:1px solid var(--color-divider);cursor:pointer;width:100%;
  text-align:left;border-left:0;border-right:0;border-top:0;font:inherit;color:inherit}
.rejilla-operadora:hover{background:var(--color-neutral-200)}
.rejilla-operadora .nombre{font-weight:600;font-size:13.5px}
.rejilla-operadora .rfc{font-size:11.5px;color:var(--color-neutral-600)}
.rejilla-operadora .cuentas{font-size:12px;color:var(--color-neutral-700);
  font-variant-numeric:tabular-nums}
.rejilla-operadora .flecha{transition:transform .12s ease}
.rejilla-operadora[aria-expanded="true"] .flecha{transform:rotate(90deg)}
.rejilla-cuerpo[hidden]{display:none}
.rejilla-diferido{padding:12px 16px;background:#fff;
  border-bottom:1px solid var(--color-divider);font-size:12.5px}
.rejilla-diferido .destacados{color:var(--color-neutral-700);margin-top:4px}

/* las dos cifras de un renglon, apiladas: lado a lado no caben a 1366 px */
.importe-doble b{font-variant-numeric:tabular-nums}
.importe-doble small{display:block;font-size:11px;color:var(--color-neutral-600);
  font-variant-numeric:tabular-nums}

/* los chips de la cabecera del paso 2 */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:5px 12px;border:1px solid var(--color-divider);background:#fff;
  font-size:12.5px;font-variant-numeric:tabular-nums}
.chip-aviso{border-color:var(--color-aviso);background:var(--color-aviso-fondo)}
.chip-listo{border-color:var(--color-listo);background:var(--color-listo-fondo)}

/* el desplegable de CFDI de un renglón */
.desplegable{background:var(--color-neutral-100);border-bottom:1px solid var(--color-divider);
  padding:10px 16px 14px}
.cfdi-cab,.cfdi-fila{display:grid;
  grid-template-columns:300px 1fr 90px 120px 110px 110px;gap:12px;padding:5px 0;
  font-size:12.5px;align-items:baseline}
.cfdi-cab{font-family:var(--font-heading);font-weight:600;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-700);
  border-bottom:1px solid var(--color-divider)}
.cfdi-fila{border-bottom:1px solid color-mix(in srgb,var(--color-text) 6%,transparent)}
.cfdi-fila .num,.cfdi-cab .num{text-align:right;font-variant-numeric:tabular-nums}
.cfdi-suma{margin-top:8px;font-size:12px;color:var(--color-neutral-700)}
.cfdi-suma.descuadre{color:var(--color-peligro)}
/* Compartir un comprobante NO es un descuadre: es como se ve una canasta
   repartida entre conceptos. Se distingue del texto normal sin gritar. */
.cfdi-suma.compartido{color:var(--color-neutral-700)}
/* El ejercicio bajo el periodo: es la vigencia del instrumento, no un adorno. */
.rejilla-fila .ejercicio{color:var(--color-neutral-700);font-variant-numeric:tabular-nums}
.objeto-propuesto b{font-weight:500}
/* El reparto por ano fiscal, en la barra de la linea. */
.rejilla-acciones .ejercicios{color:var(--color-neutral-700);font-variant-numeric:tabular-nums}
.etiqueta{display:inline-block;min-width:130px;color:var(--color-neutral-600);font-size:12px;
  text-transform:uppercase;letter-spacing:.04em}

/* el paso a paso del alta */
.pasos{display:flex;align-items:center;gap:0;margin-bottom:18px;flex-wrap:wrap}
.paso{display:flex;align-items:center;gap:8px;padding:6px 16px 6px 12px;
  font-family:var(--font-heading);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-neutral-500);
  border:1px solid var(--color-divider);border-right:0}
.paso:last-child{border-right:1px solid var(--color-divider)}
.paso .n{display:grid;place-items:center;width:20px;height:20px;flex:none;
  border:1px solid currentColor;font-variant-numeric:tabular-nums;font-size:11px}
.paso.actual{color:var(--color-accent-900);background:#fff}
.paso.hecho{color:var(--color-accent-700)}
.paso.hecho .n{background:var(--color-accent-700);color:#fff;border-color:var(--color-accent-700)}

/* la tarjeta de folio del paso 3 */
.tarjeta-folio{position:relative;border:1px solid var(--color-divider);background:#fff;
  padding:16px 18px;margin-bottom:14px}
.tarjeta-folio .folio{font-family:var(--font-heading);font-weight:600;font-size:19px;
  letter-spacing:.06em}
.tarjeta-folio .reserva{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-neutral-600)}
.tarjeta-folio .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;
  color:var(--color-neutral-700);margin-top:8px}

/* la banda de acción, pegada abajo del contenido */
.pie-accion{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;
  padding:14px 16px;border:1px solid var(--color-divider);background:#fff}
.pie-accion .dice{font-size:13px;color:var(--color-neutral-700)}
.pie-accion .botones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.pendientes{margin:8px 0 0;padding-left:18px;font-size:12.5px;color:var(--color-peligro-texto)}

/* rejillas de página y listas */
.columnas{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.columnas.pares{grid-template-columns:1fr 1fr}
@media(max-width:1000px){.columnas,.columnas.pares{grid-template-columns:1fr}}
.datos{display:grid;grid-template-columns:140px 1fr;gap:4px 10px}
.datos dt{color:var(--color-neutral-600);font-size:12.5px}
.datos dd{margin:0}
.bitacora{list-style:none;padding:0;margin:0}
/* Causas dentro de una celda: una por renglón, sin viñeta ni sangría. */
.sinvinetas{list-style:none;padding:0;margin:0}
.bitacora li{padding:7px 0;border-bottom:1px solid var(--color-divider)}
.cuando{color:var(--color-neutral-600);font-size:12px;margin-right:6px}
.quien{font-weight:600;margin-right:6px}
.inline-form{display:flex;gap:8px;margin-bottom:8px}
.accion{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.lista{padding-left:18px}
.migas{color:var(--color-neutral-600);font-size:12px;margin:0 0 .4em}
.resultados{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.resultado{text-align:left;font:inherit;background:#fff;border:1px solid var(--color-divider);
  border-radius:0;padding:7px 10px;cursor:pointer;width:100%}
.resultado:hover{background:var(--color-accent-100)}
.pre{white-space:pre-wrap}
.muted,.ayuda,.text-muted{color:var(--color-neutral-600)}
.chico{font-size:12px}
.num,.cifra{font-variant-numeric:tabular-nums}
.hr{height:1px;border:0;margin:var(--space-4) 0;background:var(--color-divider)}

/* el reto de la puerta: trazos, nunca texto */
.reto{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 12px;margin-bottom:14px;background:#fff;
  border:1px solid var(--color-divider);user-select:none}
.reto-digito path,.reto-signo path{fill:none;stroke:var(--color-accent-900);
  stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.reto-signo path{stroke:var(--color-neutral-500);stroke-width:4}

/* entrar */
.login-cuerpo{display:grid;place-items:center;min-height:100vh;background:var(--color-accent-900)}
.login{position:relative;background:var(--color-bg);padding:30px;width:360px;
  border:1px solid var(--color-accent-700)}
.login h1{font-size:22px;margin-bottom:.2em}
.login .sub{color:var(--color-neutral-600);margin-top:0;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase}
.login label{display:block;margin-bottom:12px;color:var(--color-neutral-700);font-size:12px}
.login .btn,.login .btn.primario{width:100%;margin-top:4px}

@media(max-width:820px){
  body.app{display:block}
  .lateral-nav{width:auto}
  .lateral-menu{flex-direction:row;flex-wrap:wrap}
  .contenido{padding:18px 16px 30px}
}

/* ------------------------------------------------------- 4c: lineas y marcas */
/* Los botones de una operadora van ENTRE su cabecera y su cuerpo, como hermanos:
   HTML prohibe un formulario dentro de un boton, y la cabecera es un <button>.
   El sangrado los alinea con el nombre (26 de la flecha + 12 del hueco). */
.rejilla-acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:8px 16px 8px 38px;background:var(--color-neutral-100);
  border-bottom:1px solid var(--color-divider);font-size:12px}
.rejilla-acciones .inline-form{margin-bottom:0}
/* Dentro de una barra de acciones los campos NO ocupan el ancho completo, que es
   lo que traen por omision: uno solo empujaria el resto fuera de la pantalla. */
.rejilla-acciones :is(input,select){width:auto;font-size:12px;padding:3px 6px}
.rejilla-acciones .frenos{flex-basis:100%;color:var(--color-peligro);line-height:1.45}
/* Las marcas de una fila ocupan la fila entera, debajo de las siete columnas,
   por lo mismo que los bloqueos: son controles, no celdas. */
.rejilla-fila .marcas{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;padding-top:6px;font-size:12px}
.rejilla-fila .marcas .inline-form{margin-bottom:0}
.rejilla-fila .marcas :is(input,select){width:auto;font-size:12px;padding:3px 6px}
.tag-linea{background:var(--color-accent-100);color:var(--color-accent-700);
  border:1px solid var(--color-accent-300)}
/* Lo que se solicita para una linea, traido por fetch debajo de su cabecera. */
.evidencias-de{background:#fff}
.evidencias{margin:0;border-radius:0}
.evidencias h3{margin:0 0 6px;font-size:13.5px}
.evidencia{padding:7px 0;border-bottom:1px solid var(--color-divider)}
.evidencia:last-child{border-bottom:0}
.evidencia-texto{font-size:12.5px;margin-bottom:5px;line-height:1.45}
.evidencia .inline-form{margin-bottom:0;flex-wrap:wrap}
.evidencia :is(input,select){width:auto;font-size:12px;padding:3px 6px}
.evidencia input[type=text]{min-width:180px}
.renglon-fuera{padding:6px 0;border-bottom:1px solid var(--color-divider)}
.renglon-fuera:last-child{border-bottom:0}

/* 4c.2 · El panel de decisión de una fila, plegado y a lo ancho.
   `grid-column: 1/-1` como `.bloqueos`: dentro de una celda se comería su
   ancho y la rejilla dejaría de cuadrar a 1366 px. */
.rejilla-fila .decidir { grid-column: 1 / -1; margin-top: 6px; }
.rejilla-fila .decidir > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.rejilla-fila .decidir > summary:hover { color: var(--texto); }
.rejilla-fila .decidir .inline-form { margin-top: 6px; flex-wrap: wrap; }
/* Los campos de un formulario en línea no pueden ocupar el 100%, que es el
   valor por omisión de `input` en esta hoja. */
.rejilla-fila .decidir :is(input, select) { width: auto; max-width: 320px; }
.rejilla-acciones .vigencia :is(input, select) { width: auto; }
.rejilla-acciones .vigencia input[type="text"] { min-width: 260px; }
.rejilla-acciones .vigencia label { display: inline-flex; gap: 4px; align-items: center; }
.rejilla-grupo .inline-form :is(input, select) { width: auto; }

/* Rebanada 5 · El paso 3: una tarjeta por instrumento que va a salir.
   No es una tabla porque el objeto es un párrafo y la vigencia y las
   condiciones de pago son frases: en una rejilla de siete columnas quedaban
   recortadas justo donde hay que leerlas. */
.instrumento { padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.instrumento:last-child { border-bottom: 0; }
.instrumento-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.instrumento-cuerpo { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.instrumento-cuerpo > div { margin-bottom: 2px; }

/* Rebanada 5c · El cuerpo del aviso, tal como va a salir.
   `pre` y no `p`: lo que se revisa en la compuerta 2 es EXACTAMENTE lo que se
   manda, y un navegador que junte los renglones enseñaría otra cosa. */
.cuerpo-correo { white-space: pre-wrap; font-family: inherit; font-size: 13px;
  line-height: 1.55; margin: 0; }
.btn.ancho { display: block; text-align: center; margin-bottom: 10px; }

/* Lo que dice un contrato que ya existe, al lado del formulario de la línea.
   Va en su propia línea y no dentro del `.inline-form` para que el formulario
   no crezca: lo que se ofrece para copiar no es parte de lo que se captura. */
.contrato-dice{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:4px 0 4px 38px;color:var(--color-text-muted)}
.contrato-dice a{color:inherit}

/* ------------------------------------------------- tablero: vistas guardadas
 * Sobre los mismos tokens Industry que el resto del módulo: nada de aquí
 * introduce un color ni un espaciado propio.
 */
.nota-tablero{margin:-6px 0 14px;max-width:70ch}
.vistas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.vista{display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border:1px solid var(--color-divider);
  background:#fff;border-radius:var(--radius-md);font-size:12.5px;
  color:var(--color-text);text-decoration:none;white-space:nowrap}
.vista:hover{border-color:var(--color-accent-400)}
.vista .n{font-variant-numeric:tabular-nums;color:var(--color-neutral-600);
  background:var(--color-neutral-100);border-radius:var(--radius-sm);padding:0 6px}
.vista.activa{border-color:var(--color-accent-600);background:var(--color-accent-100);
  color:var(--color-accent-900);font-weight:500}
.vista.activa .n{background:var(--color-accent-200);color:var(--color-accent-900)}
.resultados{margin:0 0 10px}
.tag.legacy{border-color:var(--color-aviso-borde);background:var(--color-aviso-fondo);
  color:var(--color-aviso)}
.tabla td.sustitucion{white-space:nowrap}
.tabla tr.fila-cancelada td{background:color-mix(in srgb,var(--color-peligro) 4%,transparent)}
.tabla tr.fila-cancelada td:first-child a{text-decoration:line-through}
.paginacion{display:flex;gap:var(--space-4);align-items:center;margin:14px 0}
.leyenda{margin:18px 0 0;max-width:100ch;line-height:1.6}