/* GENERADO por diseno/generar.py desde diseno/tokens.json y diseno/componentes.css. NO SE EDITA: se edita la fuente y se regenera. Version 2026-10-18. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url("fuentes/plex-sans-latin.woff2") format("woff2")}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("fuentes/plex-mono-400-latin.woff2") format("woff2")}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("fuentes/plex-mono-500-latin.woff2") format("woff2")}
:root{
  --c-navy:#062F58;
  --c-barra:#0A2540;
  --c-activo:#123A63;
  --c-oro:#C8952B;
  --c-oro-suave:#FBF3E3;
  --c-oro-texto:#8D691E;
  --c-morado:#4C1D95;
  --c-morado-suave:#F1EBFC;
  --c-morado-texto:#3B2A6B;
  --c-lila:#A78BFA;
  --c-fondo:#F5F7FA;
  --c-papel:#FFFFFF;
  --c-linea:#E6EAF0;
  --c-linea-suave:#EEF1F5;
  --c-texto:#16232F;
  --c-texto-2:#5B6B7C;
  --c-texto-3:#637385;
  --c-verde:#1A7D41;
  --c-verde-suave:#E7F4EC;
  --c-ambar:#9C6209;
  --c-ambar-suave:#FDF3E2;
  --c-rojo:#B32541;
  --c-rojo-suave:#FBE9EC;
  --c-azul:#1F4E8C;
  --c-azul-suave:#E8F0FA;
  --c-gris-chip:#EEF1F5;
  --c-gris-punto:#C9D2DC;
  --c-boton-oro-texto:#1B1300;
  --c-barra-texto:#DCE6F2;
  --c-barra-enlace:#C7D6E6;
  --c-barra-tenue:#9FB3C8;
  --c-barra-grupo:#7F93A8;
  --c-barra-avatar:#1E3A5F;
  --c-barra-icono:rgba(255, 255, 255, 0.14);
  --c-velo:rgba(10, 37, 64, 0.45);
  --letra:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --letra-mono:'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --interlineado:1.45;
  --p-normal:400;
  --p-medio:500;
  --p-fuerte:600;
  --t-micro:10.5px;
  --t-mini:11px;
  --t-etiqueta:11.5px;
  --t-pie:12px;
  --t-nota:12.5px;
  --t-chico:13px;
  --t-base:13.5px;
  --t-cuerpo:14px;
  --t-h2:15px;
  --t-panel:18px;
  --t-h1:24px;
  --t-cifra:28px;
  --t-entrada-movil:16px;
  --r:8px;
  --r-control:6px;
  --r-minimo:4px;
  --r-pastilla:999px;
  --r-redondo:50%;
  --a-xs:4px;
  --a-s:8px;
  --a-m:16px;
  --a-l:24px;
  --a-xl:32px;
  --a-xxl:40px;
  --m-barra:216px;
  --m-barra-plegada:64px;
  --m-cabecera:48px;
  --m-fila:40px;
  --m-boton:32px;
  --m-panel:470px;
  --m-movil:760px;
  --sombra-flotante:0 8px 24px rgba(10, 37, 64, 0.16);
}
/* =====================================================================
   LOS COMPONENTES DEL SISTEMA. Tomados de referencia/diseno/base.css tal
   cual —mismos nombres de clase, mismas medidas— con tres cambios y nada mas:

   1. Ningun color, tamano ni radio escrito aqui: todo es var(--…) de
      tokens.json. Lo comprueba test_estilos en las tres herramientas.
   2. La maqueta media 1366x700 fija (.app). Aqui ocupa la ventana.
   3. Lo que el encargo pide y la maqueta no dibuja: barra plegable, banner
      azul, estado vacio, toast, menu «···», cabecera de tabla fija, panel
      lateral flotante y el movil (390 px).

   Este fichero NO se edita en Nuvia ni en la Intranet: alli llega copiado y
   sellado por diseno/publicar.py.
   ===================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--letra);font-size:var(--t-base);line-height:var(--interlineado);color:var(--texto);background:var(--fondo);-webkit-font-smoothing:antialiased}
.num,.r{font-variant-numeric:tabular-nums}
.mono{font-family:var(--letra-mono)}

/* ---- armazon: barra lateral 216 px + cabecera 48 px ---- */
.app{display:grid;grid-template-columns:var(--m-barra) minmax(0,1fr);height:100vh;overflow:hidden}
.app.plegada{grid-template-columns:var(--m-barra-plegada) minmax(0,1fr)}
.barra{background:var(--c-barra);color:var(--c-barra-texto);display:flex;flex-direction:column;padding:var(--a-m) 12px;min-width:0;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.logo .marca{font-weight:var(--p-fuerte);letter-spacing:.2px;color:var(--c-papel);font-size:var(--t-h2);line-height:1.1}
.logo .sub{font-size:var(--t-micro);color:var(--c-barra-tenue);letter-spacing:1.5px;text-transform:uppercase}
.logo .iso{width:28px;height:28px;border-radius:var(--r-control);background:var(--c-papel);display:grid;place-items:center;color:var(--c-navy);font-weight:var(--p-fuerte);font-size:var(--t-cuerpo);flex:none}
.logo .iso.morado{background:var(--c-morado);color:var(--c-papel)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:var(--a-s) 10px;border-radius:var(--r-control);color:var(--c-barra-enlace);text-decoration:none;font-size:var(--t-base);cursor:pointer}
.nav a:hover{background:var(--c-activo)}
.nav a .ico{width:16px;height:16px;border-radius:var(--r-minimo);background:var(--c-barra-icono);flex:none;display:grid;place-items:center}
.nav a .ico svg{width:14px;height:14px}
.nav a.on{background:var(--c-activo);color:var(--c-papel)}
.nav a.on .ico{background:var(--c-oro)}
.nav .grupo{font-size:var(--t-micro);letter-spacing:1.4px;text-transform:uppercase;color:var(--c-barra-grupo);padding:14px 10px 6px}
.nav .cnt{margin-left:auto;font-size:var(--t-pie);color:var(--c-barra-tenue);font-variant-numeric:tabular-nums}
.nav .cnt.oro{color:var(--c-oro);font-weight:var(--p-fuerte)}
.barra .pie{margin-top:auto;padding:10px;font-size:var(--t-pie);color:var(--c-barra-grupo);display:flex;align-items:center;gap:var(--a-s)}
.barra .pie .av{width:24px;height:24px;border-radius:var(--r-redondo);background:var(--c-barra-avatar);color:var(--c-papel);display:grid;place-items:center;font-size:var(--t-mini);font-weight:var(--p-fuerte);flex:none}
.barra .plegar{margin-top:var(--a-s);background:none;border:0;color:var(--c-barra-grupo);font:inherit;font-size:var(--t-pie);text-align:left;padding:6px 10px;cursor:pointer;border-radius:var(--r-control)}
.barra .plegar:hover{background:var(--c-activo);color:var(--c-papel)}
/* plegada a iconos: se esconde todo menos el icono, y el nombre va en el title */
.app.plegada .logo>div:not(.iso),.app.plegada .nav a>span:not(.ico),.app.plegada .nav .grupo,.app.plegada .nav .cnt,.app.plegada .barra .pie>span{display:none}
.app.plegada .nav a{justify-content:center;padding:var(--a-s) 0}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.cab{height:var(--m-cabecera);flex:none;display:flex;align-items:center;gap:var(--a-m);padding:0 28px;background:var(--c-papel);border-bottom:1px solid var(--c-linea)}
.cab .buscar{flex:1;max-width:420px;height:30px;border:1px solid var(--c-linea);border-radius:var(--r-control);background:var(--c-fondo);display:flex;align-items:center;gap:var(--a-s);padding:0 10px;color:var(--c-texto-3);font:inherit;font-size:var(--t-chico);cursor:text;text-align:left}
.cab .buscar kbd{margin-left:auto;font:var(--t-mini) var(--letra-mono);color:var(--c-texto-3);border:1px solid var(--c-linea);border-radius:var(--r-minimo);padding:1px 5px;background:var(--c-papel)}
.cab .cliente{font-weight:var(--p-medio);color:var(--c-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab .cliente small{color:var(--c-texto-3);font-weight:var(--p-normal);margin-left:var(--a-s);font-size:var(--t-chico)}
.cab .miga,.cab .ej{margin-left:auto;color:var(--c-texto-2);font-size:var(--t-chico);white-space:nowrap}
.cab .miga a{color:inherit;text-decoration:none}
.cont{padding:26px 28px;overflow:auto;flex:1;min-height:0}

/* ---- titulo de pagina: h1 + subtitulo + UNA accion en oro + ··· ---- */
h1{font-size:var(--t-h1);font-weight:var(--p-medio);letter-spacing:-.2px;color:var(--c-navy);line-height:1.2}
h2{font-size:var(--t-h2);font-weight:var(--p-fuerte);color:var(--c-texto);margin-bottom:10px}
.sub{color:var(--c-texto-2);font-size:var(--t-base);font-weight:var(--p-normal);margin-top:2px}
.titulo{display:flex;align-items:flex-end;gap:var(--a-m);margin-bottom:22px;flex-wrap:wrap}
.titulo .acc{margin-left:auto;display:flex;gap:var(--a-s);align-items:center;flex-wrap:wrap}
.btn{height:var(--m-boton);padding:0 14px;border-radius:var(--r-control);border:1px solid var(--c-linea);background:var(--c-papel);color:var(--c-texto);font:inherit;font-size:var(--t-base);display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--c-texto-3)}
.btn:disabled{opacity:.55;cursor:default}
.btn.pri{background:var(--c-oro);border-color:var(--c-oro);color:var(--c-boton-oro-texto);font-weight:var(--p-fuerte)}
.btn.mas{width:var(--m-boton);padding:0;color:var(--c-texto-2)}
.btn.peligro{color:var(--c-rojo)}
.btn.chico{height:26px;padding:0 10px;font-size:var(--t-chico)}
.enlace{background:none;border:0;padding:0;color:var(--c-navy);font:inherit;text-decoration:underline;cursor:pointer}

/* el menu «···»: lo que no es la accion principal */
.menu{position:absolute;z-index:40;min-width:220px;background:var(--c-papel);border:1px solid var(--c-linea);border-radius:var(--r);box-shadow:var(--sombra-flotante);padding:6px 0}
.menu button,.menu a{display:block;width:100%;text-align:left;background:none;border:0;padding:var(--a-s) 14px;font:inherit;font-size:var(--t-base);color:var(--c-texto);cursor:pointer;text-decoration:none}
.menu button:hover,.menu a:hover{background:var(--c-fondo)}
.menu hr{border:0;border-top:1px solid var(--c-linea-suave);margin:4px 0}

/* ---- fila de cifras: cifras, no tarjetas ---- */
.cifras{display:flex;gap:40px;padding:4px 0 22px;border-bottom:1px solid var(--c-linea);margin-bottom:22px;flex-wrap:wrap;row-gap:var(--a-m)}
.cifra .v{font-size:var(--t-cifra);font-weight:var(--p-medio);color:var(--c-texto);line-height:1.1;font-variant-numeric:tabular-nums}
.cifra .v.oro{color:var(--c-oro-texto)}
.cifra .v.rojo{color:var(--c-rojo)}
.cifra .v.verde{color:var(--c-verde)}
.cifra .k{font-size:var(--t-nota);color:var(--c-texto-2);margin-top:4px}
.cifra a{color:inherit;text-decoration:none}
.dos{display:grid;grid-template-columns:1.5fr 1fr;gap:40px}

/* ---- la lista «hoy» y la de modulos ---- */
.lista{list-style:none}
.lista li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--c-linea-suave);font-size:var(--t-base)}
.lista li .hora{font:var(--t-nota) var(--letra-mono);color:var(--c-texto-3);width:44px;flex:none}
.lista li .pt{width:8px;height:8px;border-radius:var(--r-redondo);flex:none}
.pt{display:inline-block;width:8px;height:8px;border-radius:var(--r-redondo);flex:none}
.pt.v{background:var(--c-verde)}.pt.a{background:var(--c-ambar)}.pt.r{background:var(--c-rojo)}.pt.m{background:var(--c-morado)}.pt.g{background:var(--c-gris-punto)}
.lista li .q{color:var(--c-texto-2);margin-left:auto;font-size:var(--t-nota);white-space:nowrap;text-decoration:none}
.lista li b{font-weight:var(--p-medio)}
.lista li a{color:inherit;text-decoration:none}
.mods{list-style:none}
.mods li{display:flex;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--c-linea-suave);font-size:var(--t-base)}
.mods li .n{color:var(--c-texto);text-decoration:none;font-size:inherit}
.mods li .d{color:var(--c-texto-2);margin-left:10px;font-size:var(--t-nota)}
.mods li .c{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--c-texto-2)}
.mods li .c.oro{color:var(--c-oro-texto);font-weight:var(--p-fuerte)}

/* ---- nota morada (lo que propone la maquina) y banner azul (real incompleto) ---- */
.nota{margin-top:18px;padding:10px 12px;border-left:3px solid var(--c-morado);background:var(--c-morado-suave);color:var(--c-morado-texto);font-size:var(--t-chico);border-radius:0 var(--r-control) var(--r-control) 0}
.banner{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:18px;background:var(--c-azul-suave);color:var(--c-azul);border-radius:var(--r-control);font-size:var(--t-chico)}
.banner b{font-weight:var(--p-fuerte)}
.banner .btn{margin-left:auto}

/* ---- tabla de trabajo: filas 40 px, cabecera fija, cifras a la derecha ---- */
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-base)}
.tabla th{font-size:var(--t-etiqueta);letter-spacing:.6px;text-transform:uppercase;color:var(--c-texto-3);font-weight:var(--p-medio);text-align:left;padding:0 10px 8px 0;border-bottom:1px solid var(--c-linea);position:sticky;top:0;background:var(--c-fondo);z-index:1;white-space:nowrap}
.tabla td{padding:0 10px 0 0;height:var(--m-fila);border-bottom:1px solid var(--c-linea-suave);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.tabla td.r,.tabla th.r{text-align:right;padding-right:0;padding-left:22px;min-width:96px;font-variant-numeric:tabular-nums}
.tabla td:last-child{padding-left:14px}
.tabla tbody tr{cursor:pointer}
.tabla tbody tr:hover td{background:var(--c-papel)}
.tabla tr.sel td{background:var(--c-oro-suave)}
.tabla .mut{color:var(--c-texto-2)}
.tabla-caja{overflow:auto;min-height:0}
.chip{display:inline-block;font-size:var(--t-etiqueta);padding:2px 8px;border-radius:var(--r-pastilla);font-weight:var(--p-medio);white-space:nowrap}
.chip.v{background:var(--c-verde-suave);color:var(--c-verde)}.chip.a{background:var(--c-ambar-suave);color:var(--c-ambar)}.chip.r{background:var(--c-rojo-suave);color:var(--c-rojo)}.chip.m{background:var(--c-morado-suave);color:var(--c-morado)}.chip.g{background:var(--c-gris-chip);color:var(--c-texto-2)}
/* punto de estado + chip corto, en la misma celda */
.estado{display:inline-flex;align-items:center;gap:6px}

/* ---- pestanas-filtro con contador ---- */
.filtros{display:flex;gap:18px;align-items:center;color:var(--c-texto-2);font-size:var(--t-chico);margin-bottom:14px;flex-wrap:wrap}
.filtros .f{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-bottom:2px solid transparent;padding:0 0 2px;font:inherit;color:inherit;cursor:pointer}
.filtros .f.on{color:var(--c-texto);font-weight:var(--p-medio);border-bottom-color:var(--c-oro)}
.filtros .f .n{font-variant-numeric:tabular-nums}
.filtros .derecha{margin-left:auto;display:flex;gap:var(--a-s);align-items:center;flex-wrap:wrap}
.filtros input,.filtros select,.campo input,.campo select,.campo textarea{height:30px;border:1px solid var(--c-linea);border-radius:var(--r-control);background:var(--c-papel);padding:0 10px;font:inherit;font-size:var(--t-chico);color:var(--c-texto)}
.campo textarea{height:auto;padding:var(--a-s) 10px}
.campo{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.campo label{font-size:var(--t-nota);color:var(--c-texto-2)}

/* ---- panel lateral de detalle ---- */
.panel{position:absolute;right:0;top:var(--m-cabecera);bottom:0;width:var(--m-panel);max-width:100%;background:var(--c-papel);border-left:1px solid var(--c-linea);padding:22px 26px;display:flex;flex-direction:column;overflow-y:auto;z-index:20}
.panel h2{font-size:var(--t-panel);font-weight:var(--p-medio);color:var(--c-navy);margin:0}
.panel .meta{color:var(--c-texto-2);font-size:var(--t-chico);margin-top:2px}
.panel .acc{display:flex;gap:var(--a-s);margin-top:14px;flex-wrap:wrap}
.panel .cerrar{position:absolute;top:14px;right:16px}
.panel .seccion{margin-top:18px}
.panel .seccion .k{font-size:var(--t-etiqueta);letter-spacing:.6px;text-transform:uppercase;color:var(--c-texto-3);margin-bottom:6px}
.doc{margin-top:18px;border:1px solid var(--c-linea);border-radius:var(--r-control);background:var(--c-papel);overflow:hidden}
.asiento{margin-top:18px}
.asiento table{width:100%;border-collapse:collapse;font-size:var(--t-chico)}
.asiento td{padding:7px 0;border-bottom:1px solid var(--c-linea-suave)}
.asiento td.r{text-align:right;font-variant-numeric:tabular-nums}
.asiento .prop{color:var(--c-morado);font-weight:var(--p-medio)}
.asiento .conf{font-size:var(--t-mini);color:var(--c-texto-3);margin-left:6px}
.panel .pie{margin-top:auto;padding-top:var(--a-m);font-size:var(--t-pie);color:var(--c-texto-3)}

/* ---- estado vacio: una frase y un boton ---- */
.vacio{padding:56px 0;text-align:center;color:var(--c-texto-2);font-size:var(--t-cuerpo)}
.vacio .btn{margin-top:14px}

/* ---- toast ---- */
.toasts{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:var(--a-s);z-index:90}
.toast{background:var(--c-barra);color:var(--c-papel);padding:10px 14px;border-radius:var(--r-control);font-size:var(--t-chico);box-shadow:var(--sombra-flotante);max-width:420px}
.toast.mal{background:var(--c-rojo)}
.toast.bien{background:var(--c-verde)}

/* ---- la factura como papel (Nuvia) ---- */
.papel{background:var(--c-papel);border:1px solid var(--c-linea);border-radius:var(--r);padding:56px 56px 40px}
.papel .total{font-size:var(--t-h1);font-weight:var(--p-medio);color:var(--c-navy)}
.lado .k{font-size:var(--t-etiqueta);letter-spacing:1.2px;text-transform:uppercase;color:var(--c-texto-3);margin:22px 0 8px}
.lado .fila{display:flex;justify-content:space-between;padding:6px 0;font-size:var(--t-base)}
.lado .fila span:first-child{color:var(--c-texto-2)}

/* ---- movil: 390 px ---- */
@media (max-width:760px){
  .app,.app.plegada{grid-template-columns:var(--m-barra-plegada) minmax(0,1fr)}
  .app .logo>div:not(.iso),.app .nav a>span:not(.ico),.app .nav .grupo,.app .nav .cnt,.app .barra .pie>span,.app .barra .plegar{display:none}
  .app .nav a{justify-content:center;padding:var(--a-s) 0}
  .barra{padding:12px 8px}
  .cab{padding:0 12px;gap:var(--a-s)}
  .cab .miga,.cab .ej,.cab .buscar kbd{display:none}
  .cont{padding:var(--a-m) 12px}
  .cifras{gap:var(--a-l)}
  .cifra .v{font-size:var(--t-h1)}
  .dos{grid-template-columns:minmax(0,1fr);gap:var(--a-l)}
  .tabla .opcional{display:none}
  .panel{position:fixed;inset:0;width:auto;z-index:60}
  .papel{padding:var(--a-l) var(--a-m)}
  .titulo .acc{margin-left:0}
}