/* =====================================================================
   El aspecto del ERP, en un solo sitio · rediseño del 30/09/2026

   Él: «una remodelación del diseño de todo el ERP… como si este ERP lo
   estuviera haciendo Apple». La propuesta (diseno/propuesta-2026-09-30/) le
   gustó «mucho más que la actual» y aquí está aplicada a TODO el programa:
   este fichero va después del <style> de cada página y manda, así que lo
   que se cambia aquí se ve en las cuarenta pantallas.

   El lenguaje (Human Interface Guidelines 2025, «Liquid Glass»):
     · una cosa importante por pantalla: un título grande, UN botón verde,
       lo demás en gris;
     · jerarquía por tamaño y por gris, no por bordes: tarjetas blancas con
       una sombra suave sobre un fondo sereno, hairlines donde haga falta;
     · cristal (fondo difuminado) solo en lo que flota: la barra lateral,
       los botones y el ayudante. Las tablas y las fichas, en blanco liso;
     · controles en cápsula; cifras tabulares; la letra Inter, que es la
       más parecida a la de Apple y va servida desde el propio ERP;
     · el verde es la marca y solo se usa para lo que se puede hacer; el
       rojo, el naranja y el azul dicen cómo de urgente es algo.

   Los NOMBRES de las clases son los de siempre (.tarjeta, .chip, .ficha,
   .cifras, .pestanas…): las pantallas no han tenido que cambiar. Lo que
   dice cada color sigue igual:
     · VERDE  — está bien, cuadra, está pagado, es lo que se puede hacer
     · ÁMBAR  — está pendiente, hay que hacer algo
     · ROJO   — está vencido, no cuadra, es un error
     · GRIS   — falta el dato, no se sabe
   ===================================================================== */

@font-face{
  font-family:"Inter";
  src:url("/static/fuentes/Inter.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* --- el papel y la tinta --- */
  --papel:#F5F5F7;
  --superficie:#FFFFFF;
  --superficie-2:#FAFAFC;      /* cabeceras de tabla, pies de ficha */
  --tinta:#1D1D1F;
  --tinta-2:#6E6E73;
  --tinta-3:#A1A1A6;
  --tenue:#A1A1A6;
  --linea:rgba(0,0,0,.075);     /* el hairline */
  --linea-suave:rgba(0,0,0,.05);
  --linea-fuerte:rgba(0,0,0,.12);

  /* --- el verde, que es la marca --- */
  --verde:#1E9E5A;
  --verde-oscuro:#0E7A40;
  --verde-claro:#E6F6EC;
  --verde-borde:#C6E9D4;
  --verde-brillo:rgba(30,158,90,.28);
  --sobre-color:#FFFFFF;

  /* --- los colores del sistema: dicen cómo de urgente es algo --- */
  --ambar:#B35C00;             /* la letra sobre lo ámbar */
  --ambar-vivo:#FF8D28;        /* el punto, el globo */
  --ambar-oscuro:#8F4A00;
  --ambar-claro:#FFF0E0;
  --ambar-borde:#F7D2AC;
  --rojo:#C41E22;
  --rojo-vivo:#FF383C;
  --rojo-oscuro:#A3181C;
  --rojo-claro:#FFE5E5;
  --rojo-borde:#F7C1C2;
  --azul:#0A5BC4;
  --azul-vivo:#0088FF;
  --azul-claro:#E3F1FF;
  --malva:#8E44C9;
  --gris-claro:#EFEFF2;

  /* --- el cristal --- */
  --cristal:rgba(255,255,255,.66);
  --cristal-2:rgba(255,255,255,.58);
  --cristal-borde:rgba(255,255,255,.7);
  --relleno:rgba(120,120,128,.12);   /* buscadores, desplegables, pestañas */
  --seleccion:rgba(0,0,0,.045);

  /* el menú (por compatibilidad: las pantallas viejas nombran «noche») */
  --noche:var(--superficie);
  --noche-2:var(--seleccion);
  --noche-3:var(--linea);
  --noche-letra:var(--tinta);
  --noche-letra-2:var(--tinta-2);
  --noche-rotulo:var(--tinta-2);

  /* --- las sombras: la de una tarjeta y la de algo que flota --- */
  --sombra:0 1px 1px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.05);
  --sombra-alta:0 2px 4px rgba(0,0,0,.05),0 24px 64px rgba(0,0,0,.18);

  /* --- radios --- */
  --radio:14px;
  --radio-chico:10px;
  --radio-grande:22px;

  /* --- el espacio, en múltiplos de cuatro --- */
  --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;

  /* --- la letra: la escala de Apple --- */
  --t1:12px;     /* rótulo de columna, etiqueta de campo */
  --t2:12.5px;   /* la pista, el detalle */
  --t3:14px;     /* dentro de las tablas */
  --t4:15px;     /* el texto normal */
  --t5:17px;     /* un encabezado, un total */
  --t6:28px;     /* el título de la pantalla */

  --rapido:140ms;
  --normal:200ms;
}

/* --------------------------------------------------------- modo oscuro

   Tres estados: como el sistema; `data-tema="claro"`; `data-tema="oscuro"`.
   La paleta va dos veces porque una regla de dentro de un @media y una de
   fuera no se pueden juntar. `color-scheme` pinta en oscuro lo que dibuja
   el navegador (desplegables, calendarios, barras). */
:root{color-scheme:light}
:root[data-tema="oscuro"]{color-scheme:dark}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --papel:#0E0E10;--superficie:#1C1C1E;--superficie-2:#232326;
    --tinta:#F5F5F7;--tinta-2:#9A9AA0;--tinta-3:#6E6E73;--tenue:#6E6E73;
    --linea:rgba(255,255,255,.09);--linea-suave:rgba(255,255,255,.06);--linea-fuerte:rgba(255,255,255,.16);
    --verde:#30C46F;--verde-oscuro:#6FE39D;--verde-claro:rgba(48,196,111,.16);--verde-borde:rgba(48,196,111,.32);
    --verde-brillo:rgba(48,196,111,.22);--sobre-color:#FFFFFF;
    --ambar:#FFB65C;--ambar-vivo:#FF9F0A;--ambar-oscuro:#FFC97F;--ambar-claro:rgba(255,159,10,.16);--ambar-borde:rgba(255,159,10,.35);
    --rojo:#FF8A86;--rojo-vivo:#FF453A;--rojo-oscuro:#FFA8A5;--rojo-claro:rgba(255,69,58,.18);--rojo-borde:rgba(255,69,58,.38);
    --azul:#6CB6FF;--azul-vivo:#0A84FF;--azul-claro:rgba(10,132,255,.18);--malva:#C08BF0;
    --gris-claro:rgba(255,255,255,.08);
    --cristal:rgba(28,28,30,.62);--cristal-2:rgba(44,44,46,.55);--cristal-borde:rgba(255,255,255,.08);
    --relleno:rgba(120,120,128,.24);--seleccion:rgba(255,255,255,.06);
    --sombra:0 1px 1px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.35);
    --sombra-alta:0 2px 4px rgba(0,0,0,.3),0 24px 64px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-tema="oscuro"]{
  --papel:#0E0E10;--superficie:#1C1C1E;--superficie-2:#232326;
  --tinta:#F5F5F7;--tinta-2:#9A9AA0;--tinta-3:#6E6E73;--tenue:#6E6E73;
  --linea:rgba(255,255,255,.09);--linea-suave:rgba(255,255,255,.06);--linea-fuerte:rgba(255,255,255,.16);
  --verde:#30C46F;--verde-oscuro:#6FE39D;--verde-claro:rgba(48,196,111,.16);--verde-borde:rgba(48,196,111,.32);
  --verde-brillo:rgba(48,196,111,.22);--sobre-color:#FFFFFF;
  --ambar:#FFB65C;--ambar-vivo:#FF9F0A;--ambar-oscuro:#FFC97F;--ambar-claro:rgba(255,159,10,.16);--ambar-borde:rgba(255,159,10,.35);
  --rojo:#FF8A86;--rojo-vivo:#FF453A;--rojo-oscuro:#FFA8A5;--rojo-claro:rgba(255,69,58,.18);--rojo-borde:rgba(255,69,58,.38);
  --azul:#6CB6FF;--azul-vivo:#0A84FF;--azul-claro:rgba(10,132,255,.18);--malva:#C08BF0;
  --gris-claro:rgba(255,255,255,.08);
  --cristal:rgba(28,28,30,.62);--cristal-2:rgba(44,44,46,.55);--cristal-borde:rgba(255,255,255,.08);
  --relleno:rgba(120,120,128,.24);--seleccion:rgba(255,255,255,.06);
  --sombra:0 1px 1px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.35);
  --sombra-alta:0 2px 4px rgba(0,0,0,.3),0 24px 64px rgba(0,0,0,.6);
}

[hidden]{display:none !important}
a{color:var(--verde-oscuro);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--tinta)}

/* ----------------------------------------------------------- la base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-size:var(--t4);line-height:1.4;background:var(--papel);color:var(--tinta);
  font-family:Inter,-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv05","cv11","ss03";
}
/* El fondo, con un poco de vida detrás del cristal: solo en la ventana de
   fuera (el escritorio y una pantalla abierta suelta). Una pantalla dentro
   de una pestaña va en liso: si no, el degradado saldría dos veces. */
body[data-marco="si"],body.con-lateral{position:relative}
body[data-marco="si"]::before,body.con-lateral::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 600px at -10% -10%,rgba(30,158,90,.16),transparent 60%),
    radial-gradient(800px 500px at 110% 0%,rgba(0,136,255,.10),transparent 60%),
    radial-gradient(700px 500px at 60% 120%,rgba(255,141,40,.08),transparent 60%);
}

b,strong{font-weight:600}
.lienzo{margin:0 auto;max-width:1360px;padding:26px 32px 32px}
.lienzo.estrecho{max-width:900px}
.lienzo.medio{max-width:1100px}
/* Una pantalla dentro de una pestaña ya tiene el título de la pestaña
   encima: el suyo va algo más pegado arriba. */
body.en-marco .lienzo{padding-top:22px}

/* La cabecera de una pantalla, en dos filas: arriba el título y, a la
   derecha, el único botón verde; debajo los filtros y lo secundario. El
   `.hueco` que las pantallas ya traían es el salto de fila: lo que va
   delante de él se queda arriba, lo que va detrás baja. */
.cabecera{display:flex;align-items:center;flex-wrap:wrap;gap:10px 10px;margin-bottom:18px}
.cabecera .hueco{flex:1}
.cabecera > .hueco{order:1;flex:0 0 100%;height:0;margin:-4px 0 0}
.cabecera > .hueco ~ *{order:2}
.cabecera > .hueco ~ [style*="contents"] > *{order:2}
.cabecera > .hueco ~ button.principal,.cabecera > .hueco ~ .btn.primario,.cabecera > .hueco ~ a.btn.primario,
.cabecera > .hueco ~ [style*="contents"] > button.principal{order:0;margin-left:auto}
.cabecera > .hueco:last-child{display:none}
.cabecera h1{font-size:var(--t6);font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.1}
/* Lo que va pegado al título -«116 albaranes», el recuento- en gris y en el
   cuerpo, debajo de él. */
.cabecera > div:first-child .pista,.cabecera h1 + .pista,.cabecera .recuento{font-size:14px;color:var(--tinta-2);margin-top:4px}
.cabecera input,.cabecera select{width:auto}

.campo{display:flex;flex-direction:column;gap:6px}
.rejilla{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
input,select,textarea{width:100%}

.seccion{
  font-size:13px;font-weight:600;color:var(--tinta-2);letter-spacing:0;
  border-top:1px solid var(--linea);display:flex;align-items:center;gap:var(--e2);
  margin:18px 0 10px;padding-top:14px;
}
.seccion:first-of-type{margin-top:0;padding-top:0;border-top:none}

.tarjeta > footer{
  display:flex;align-items:center;gap:var(--e2);
  padding:var(--e3) var(--e4);background:var(--superficie-2);
  border-top:1px solid var(--linea);
}
.tarjeta > footer .hueco{flex:1}

.clave{font-size:var(--t2);font-weight:600;padding:2px 9px;border-radius:999px;background:var(--verde-claro);color:var(--verde-oscuro)}
.sinnif{color:var(--rojo);font-weight:600}

/* Una banda de aviso dentro de una tarjeta. Ámbar porque avisa. */
.nota{
  padding:var(--e3) var(--e4);font-size:var(--t3);line-height:1.45;
  background:var(--ambar-claro);border-bottom:1px solid var(--ambar-borde);color:var(--ambar);
}
.nota strong{font-weight:600;color:var(--tinta)}

/* Cifras y fechas, de ancho fijo: las columnas se leen en vertical. */
.mono,.money,[class*="derecha"],td.der,.cifra .valor{font-variant-numeric:tabular-nums}
.mono{font-family:inherit;font-variant-numeric:tabular-nums slashed-zero;letter-spacing:.01em;white-space:nowrap}

/* ------------------------------------------------------ superficies */
.tarjeta{
  background:var(--superficie);border:0;border-radius:var(--radio);
  box-shadow:var(--sombra),0 0 0 .5px var(--linea-suave);
  /* una tabla más ancha que la tarjeta se desliza de lado, no se corta */
  overflow:auto;margin-bottom:16px;
}
.tarjeta > header{
  display:flex;align-items:center;padding:12px 18px 10px;gap:10px;min-height:44px;
  background:transparent;border-bottom:1px solid var(--linea);flex-wrap:wrap;
}
.tarjeta > header button{white-space:nowrap}
.tarjeta > header .hueco{flex:1}
.tarjeta > header h2{
  font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none;
  color:var(--tinta);margin:0;
}
.cuerpo{padding:16px 18px}

/* --------------------------------------------------------- tablas */
table{width:100%;border-collapse:collapse}
thead th{
  font-size:var(--t1);font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--tinta-2);text-align:left;padding:9px 12px;background:transparent;
  border-bottom:1px solid var(--linea);white-space:nowrap;
}
tbody td{padding:8px 12px;border-bottom:1px solid var(--linea-suave);font-size:13px}
tbody tr:last-child td{border-bottom:none}
tbody tr[data-id]{cursor:pointer;transition:background var(--rapido) ease}
tbody tr[data-id]:hover{background:var(--seleccion)}
tbody tr[aria-selected="true"],tbody tr.elegida{background:var(--verde-claro)}
tbody tr[aria-selected="true"]:hover,tbody tr.elegida:hover{background:var(--verde-claro)}
tfoot td{padding:9px 12px;background:var(--superficie-2);border-top:1px solid var(--linea);font-weight:600;font-size:13px}
.vacia td{color:var(--tinta-3);text-align:center;padding:40px 14px}
.vacia .que{display:block;font-size:var(--t4);color:var(--tinta-2);font-weight:500}
.vacia .porque{display:block;font-size:var(--t2);margin-top:3px}
.vacia button,.vacia .btn{margin-top:var(--e3)}
.derecha,.der{text-align:right}
td.derecha,th.derecha,td.der,th.der,tfoot td{white-space:nowrap}
.tabla-fija thead th{position:sticky;top:0;z-index:2;background:var(--superficie)}

/* ------------------------------------------------ campos y botones */
input,select,textarea{
  font:inherit;font-size:var(--t3);color:inherit;background:var(--superficie);
  border:1px solid var(--linea-fuerte);border-radius:var(--radio-chico);
  padding:7px 11px;min-height:36px;
  transition:border-color var(--rapido),box-shadow var(--rapido);
}
textarea{min-height:72px;line-height:1.45}
input:hover,select:hover{border-color:var(--tinta-3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-brillo);
}
input:disabled,select:disabled,textarea:disabled{background:var(--gris-claro);color:var(--tinta-2);border-color:var(--linea)}
input[type="checkbox"],input[type="radio"]{min-height:0;width:16px;height:16px;accent-color:var(--verde);padding:0}
input[type="date"]{font-variant-numeric:tabular-nums}
select{padding-right:28px}
.campo label,label.et{font-size:var(--t1);font-weight:500;letter-spacing:0;text-transform:none;color:var(--tinta-2)}

/* Un desplegable de filtro en la cabecera va en cápsula gris, como el
   buscador: son de la misma familia. Y a la anchura de lo que dice: las
   pantallas traen anchos de cuando la letra era más pequeña. */
.cabecera select,.barra > select{
  border:0;border-radius:999px;background:var(--relleno);font-weight:500;padding:0 30px 0 14px;height:36px;
  width:auto !important;max-width:260px;
}
.cabecera input[type="date"]{width:auto !important}
.cabecera > select:focus,.barra > select:focus{box-shadow:0 0 0 3px var(--verde-brillo)}

/* Botones en cápsula. Uno manda (.principal, verde) y los demás callan:
   el normal es de cristal y el suave es solo texto. */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  border:0;background:var(--cristal-2);color:var(--tinta);
  padding:0 15px;height:36px;border-radius:999px;line-height:1;
  box-shadow:inset 0 0 0 1px var(--linea),0 1px 2px rgba(0,0,0,.04);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background var(--rapido),box-shadow var(--rapido),transform var(--rapido);
  text-decoration:none;
}
button:hover:not(:disabled),.btn:hover:not(:disabled){background:var(--superficie);box-shadow:inset 0 0 0 1px var(--linea-fuerte),0 2px 6px rgba(0,0,0,.06)}
button:active:not(:disabled),.btn:active:not(:disabled){transform:scale(.985)}
button.principal,.btn.primario{
  background:var(--verde);color:var(--sobre-color);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.08),0 6px 16px var(--verde-brillo);
}
button.principal:hover:not(:disabled),.btn.primario:hover:not(:disabled){background:var(--verde-oscuro);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.1),0 8px 20px var(--verde-brillo)}
.btn.peligro,button.peligro{background:var(--rojo-vivo);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.08)}
.btn.peligro:hover:not(:disabled),button.peligro:hover:not(:disabled){background:#E0302F}
.btn.suave,button.suave{background:transparent;box-shadow:none;color:var(--tinta-2);backdrop-filter:none}
.btn.suave:hover:not(:disabled),button.suave:hover:not(:disabled){background:var(--seleccion);color:var(--tinta);box-shadow:none}
button:disabled,.btn:disabled{opacity:.4;cursor:not-allowed}
button svg,.btn svg{width:16px;height:16px;flex:none}

.acciones{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.acciones .hueco{flex:1}

/* El botón de «lo demás» y su menú, que flota. */
.mas{position:relative;display:inline-block}
.mas > button{padding:0 12px;font-weight:700;letter-spacing:.06em}
.mas > menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:90;margin:0;padding:6px;list-style:none;min-width:200px;
  background:var(--cristal);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-radius:var(--radio);box-shadow:var(--sombra-alta),inset 0 0 0 1px var(--cristal-borde);
}
.mas > menu[hidden]{display:none}
.mas > menu button{
  display:flex;width:100%;justify-content:flex-start;text-align:left;border:0;background:none;box-shadow:none;backdrop-filter:none;
  padding:8px 12px;height:auto;border-radius:9px;font-size:var(--t3);font-weight:500;
}
.mas > menu button:hover:not(:disabled){background:var(--seleccion);box-shadow:none}
.mas > menu hr{border:0;border-top:1px solid var(--linea);margin:5px 4px}
.mas > menu .peligro{color:var(--rojo)}

button:focus-visible,.btn:focus-visible,a:focus-visible,.pestana:focus-visible,tbody tr[data-id]:focus-visible{
  outline:2px solid var(--verde);outline-offset:2px;
}
button.icono{padding:0;width:32px;height:32px;color:var(--tinta-3);background:none;box-shadow:none;backdrop-filter:none;border-radius:9px}
button.icono:hover{background:var(--seleccion);color:var(--tinta);box-shadow:none}

/* Una barra de filtros y acciones: en una línea, sin caja. */
.barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;background:transparent;border-bottom:1px solid var(--linea)}
.barra .hueco{flex:1}
.barra input,.barra select{height:34px;min-height:34px}

/* ------------------------------------------------- etiquetas de estado
   Pastillas con su punto. Discretas: en cien filas, cien pastillas no
   pueden gritar. */
.chip,.marca-aviso{
  display:inline-block;font-size:11.5px;font-weight:600;vertical-align:middle;
  letter-spacing:0;padding:0 9px 0 20px;height:22px;border-radius:999px;white-space:nowrap;border:0;line-height:22px;
  /* el punto va pintado en el fondo (no como ::before): así la primera letra
     se puede poner en mayúscula, que con un ::before delante no se deja */
  background-image:radial-gradient(circle at 10px 50%,currentColor 3px,transparent 3.6px);
}
.chip::first-letter,.marca-aviso::first-letter{text-transform:uppercase}
.chip.ok,.marca-aviso.verde{background-color:var(--verde-claro);color:var(--verde-oscuro)}
.chip.aviso,.marca-aviso.amb{background-color:var(--ambar-claro);color:var(--ambar)}
.chip.mal,.marca-aviso.rojo{background-color:var(--rojo-claro);color:var(--rojo)}
.chip.info,.marca-aviso.gris{background-color:var(--gris-claro);color:var(--tinta-2)}
/* `.marca` suelta (no la del menú) es la misma pastilla. */
span.marca,td .marca,.chip.marca{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:0 10px;height:24px;border-radius:999px;white-space:nowrap;line-height:1}
span.marca.verde,td .marca.verde{background:var(--verde-claro);color:var(--verde-oscuro)}
span.marca.amb,td .marca.amb{background:var(--ambar-claro);color:var(--ambar)}
span.marca.rojo,td .marca.rojo{background:var(--rojo-claro);color:var(--rojo)}
span.marca.gris,td .marca.gris{background:var(--gris-claro);color:var(--tinta-2)}

.pista{font-size:var(--t2);color:var(--tinta-2);line-height:1.4}
.error{
  background:var(--rojo-claro);border:0;color:var(--rojo);
  padding:10px 14px;border-radius:var(--radio-chico);font-size:13px;line-height:1.45;
}

/* --------------------------------------------------- la ficha (modal)
   Una hoja que sube sobre la pantalla difuminada. */
.velo{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;
  padding:36px 16px 84px;overflow:auto;
  background:rgba(20,20,24,.30);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.velo[hidden]{display:none}
.ficha{
  background:var(--superficie);width:100%;max-width:960px;
  border-radius:var(--radio-grande);box-shadow:var(--sombra-alta),0 0 0 .5px rgba(0,0,0,.08);
  animation:asoma var(--normal) cubic-bezier(.2,.7,.3,1);overflow:hidden;
}
@keyframes asoma{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.ficha > header{display:flex;align-items:center;gap:12px;padding:20px 26px 12px;border-bottom:0}
.ficha > header h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0}
.ficha > header .hueco{flex:1}
.ficha .cuerpo{padding:12px 26px 22px}
.ficha > footer{
  display:flex;align-items:center;flex-wrap:wrap;padding:14px 26px;gap:10px;
  background:var(--superficie-2);border-top:1px solid var(--linea);
}
.ficha > footer .hueco{flex:1}
.ficha.ancha{max-width:1180px}
.ficha.angosta{max-width:720px}

/* -------------------------------------------------------- el mirador */
.mirador{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(20,20,24,.30);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.mirador[hidden]{display:none}
.mirador > div{
  background:var(--superficie);border-radius:var(--radio-grande);box-shadow:var(--sombra-alta);
  width:min(1100px,100%);height:min(92vh,100%);display:flex;flex-direction:column;overflow:hidden;
}
.mirador header{display:flex;align-items:center;gap:var(--e3);padding:12px 18px;border-bottom:1px solid var(--linea)}
.mirador header .hueco{flex:1}
.mirador iframe{flex:1;border:0;width:100%}

/* ------------------------------------------- la tira de indicadores
   Tarjetas sueltas, una por cifra: el rótulo, el número grande y debajo el
   detalle (con la subida en verde o la bajada en rojo, en pastilla). */
.cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  background:transparent;border:0;border-radius:0;overflow:visible;margin:0 0 16px;box-shadow:none;
}
.cifra{
  background:var(--superficie);border-radius:var(--radio);padding:14px 16px 12px;
  box-shadow:var(--sombra),0 0 0 .5px var(--linea-suave);min-width:0;
}
.cifra .que{font-size:var(--t2);text-transform:none;letter-spacing:0;color:var(--tinta-2);font-weight:500;display:block;margin-bottom:4px}
.cifra .valor{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--tinta);display:block;line-height:1.15;white-space:nowrap}
.cifra .detalle{font-size:var(--t2);color:var(--tinta-2);margin-top:8px;display:block}
.cifra.buena .valor{color:var(--tinta)}
.cifra.pendiente .valor{color:var(--tinta)}
.cifra.mala .valor{color:var(--rojo)}
.suben,.bajan{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.suben{background:var(--verde-claro);color:var(--verde-oscuro)}
.bajan{background:var(--rojo-claro);color:var(--rojo)}

/* ----------------------------------------------- lista de apuntes */
.apunte{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--linea-suave);border-left:0}
.apunte:last-child{border-bottom:none}
.apunte:hover{background:var(--seleccion)}
.apunte::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tinta-3);flex:none}
.apunte.mal::before{background:var(--rojo-vivo)}
.apunte.aviso::before{background:var(--ambar-vivo)}
.apunte.ok::before{background:var(--verde)}
.apunte .texto{flex:1;min-width:0}
.apunte .titulo{font-size:var(--t3);font-weight:600;margin:0 0 1px}
.apunte .detalle{font-size:var(--t2);color:var(--tinta-2);margin:0;line-height:1.4}
.apunte .cuando{font-size:var(--t2);color:var(--tinta-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ------------------------------------------- tarjetas de indicador */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-bottom:16px}
.kpi{
  display:flex;align-items:center;gap:14px;background:var(--superficie);border:0;
  border-radius:var(--radio);padding:14px 16px;box-shadow:var(--sombra),0 0 0 .5px var(--linea-suave);
}
.kpi .redondo{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--gris-claro);color:var(--tinta-2)}
.kpi .redondo svg{width:20px;height:20px}
.kpi.ok .redondo{background:var(--verde-claro);color:var(--verde-oscuro)}
.kpi.aviso .redondo{background:var(--ambar-claro);color:var(--ambar)}
.kpi.mal .redondo{background:var(--rojo-claro);color:var(--rojo)}
.kpi .que{font-size:var(--t2);color:var(--tinta-2);display:block;margin-bottom:2px;font-weight:500}
.kpi .valor{font-size:22px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .detalle{font-size:var(--t2);color:var(--tinta-2);display:block;margin-top:2px}

/* -------------------------------------------------------- pestañas
   Un control segmentado en cápsula: «Por mirar 4 · Ya está 43». */
.pestanas{display:inline-flex;gap:2px;background:var(--relleno);border-radius:999px;padding:3px}
.pestana{
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;border:0;background:transparent;color:var(--tinta-2);
  padding:0 13px;height:30px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;box-shadow:none;backdrop-filter:none;
}
.pestana:hover:not(:disabled){background:rgba(255,255,255,.5);color:var(--tinta);box-shadow:none}
.pestana[aria-selected="true"]{background:var(--superficie);color:var(--tinta);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.04)}
.pestana[aria-selected="true"]:hover{background:var(--superficie)}
.pestana .cuantos{font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--gris-claro);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.pestana.aviso .cuantos{background:var(--ambar-claro);color:var(--ambar)}
.pestana .cuantos:empty{display:none}

/* -------------------------------------------- la franja de totales */
.totales{display:grid;grid-template-columns:auto auto;gap:5px 26px;justify-content:end;margin-top:var(--e4);font-size:var(--t3)}
.totales .et{color:var(--tinta-2);text-align:right}
.totales .im{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.totales .total{font-weight:700;font-size:22px;letter-spacing:-.02em;border-top:1px solid var(--linea);padding-top:8px;margin-top:4px}
.totales .et.total{font-size:15px;font-weight:600}
.resta,.totales .resta,.totales dd.resta{color:var(--rojo)}

/* ------------------------------------------------- la caja de aviso */
.caja,.carne,.coste,.aviso-caja{
  border:0;border-radius:12px;padding:11px 14px;font-size:var(--t3);line-height:1.45;background:var(--superficie-2);
  box-shadow:inset 0 0 0 1px var(--linea);
}
.caja.ok,.carne.ok{background:var(--verde-claro);box-shadow:none;color:var(--verde-oscuro)}
.caja.ok b,.carne.ok b,.caja.ok strong,.carne.ok strong{color:var(--tinta)}
.caja.ojo,.carne.amb,.aviso-caja{background:var(--ambar-claro);box-shadow:none;color:var(--ambar)}
.caja.mal,.carne.mal{background:var(--rojo-claro);box-shadow:none;color:var(--rojo)}

#tLineas input,#tLineas select{padding:6px 9px;min-height:32px;font-size:var(--t3)}

.con-euros{display:flex;align-items:center;gap:5px}
.con-euros input{text-align:right}
.con-euros > span{color:var(--tinta-3);font-size:var(--t3)}

.margen{font-size:var(--t2);color:var(--tinta-2)}
.margen.oculto,.oculto{visibility:hidden}
.check{width:16px;height:16px;accent-color:var(--verde)}

/* ----------------------------------------- el resumen de una ficha */
.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--e3)}
.dato{background:var(--superficie-2);border:0;border-radius:12px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--linea-suave)}
.dato .et{font-size:var(--t1);text-transform:none;letter-spacing:0;color:var(--tinta-2);font-weight:500}
.dato .im{font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:3px;white-space:nowrap}
.mini td,.mini th{padding:7px 10px;font-size:13px}

/* -------------------------------------------------------- solapas */
.solapas{display:flex;gap:2px;border-bottom:1px solid var(--linea)}
.solapas button{
  border:0;background:none;box-shadow:none;backdrop-filter:none;border-bottom:2px solid transparent;border-radius:0;
  padding:10px 14px;height:auto;color:var(--tinta-2);font-size:var(--t3);font-weight:500;
}
.solapas button:hover:not(:disabled){background:transparent;color:var(--tinta);box-shadow:none}
.solapas button.actual{color:var(--tinta);border-bottom-color:var(--verde);font-weight:600}

.linea-check{display:flex;align-items:center;gap:8px;font-size:var(--t3)}
.linea-check input{width:16px;height:16px;min-height:0;accent-color:var(--verde)}

/* ------------------------------------------- el renglón que contesta */
.avisillo,.nif-aviso,.ropo-estado,.mapa-estado{font-size:var(--t2);line-height:1.35;margin-top:5px;min-height:14px;color:var(--tinta-3)}
.avisillo.ok,.nif-aviso.ok,.ropo-estado.ok,.mapa-estado.ok{color:var(--verde-oscuro)}
.avisillo.ojo,.ropo-estado.ojo,.mapa-estado.ojo{color:var(--ambar)}
.avisillo.mal,.nif-aviso.mal,.ropo-estado.mal,.mapa-estado.mal{color:var(--rojo)}
.aviso-guardado{color:var(--verde-oscuro);font-size:var(--t3)}

/* El contador pegado a un rótulo: «Albaranes esperando factura 2» */
.cuenta{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--gris-claro);color:var(--tinta-2);font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;
}
.cuenta:empty{display:none}
.cuenta.mal{background:var(--rojo-vivo);color:#fff}
.cuenta.aviso{background:var(--ambar-vivo);color:#fff}

/* La caja de búsqueda con su lupa dentro, en cápsula gris */
.buscador{position:relative;display:inline-flex;align-items:center}
.buscador svg{position:absolute;left:12px;width:15px;height:15px;color:var(--tinta-3);pointer-events:none}
.buscador input{padding-left:34px;border:0;border-radius:999px;background:var(--relleno);height:36px}
.buscador input:focus{background:var(--superficie);box-shadow:0 0 0 3px var(--verde-brillo)}
.buscador input::placeholder{color:var(--tinta-3)}

/* --------------------------------------------- que quepa en cualquier ancho */
@media (max-width:1000px){
  .tarjeta{overflow:auto}
  .cuerpo{overflow-x:auto}
  table{min-width:860px}
}
@media (max-width:820px){
  .lienzo{padding:14px}
  .cabecera h1{font-size:22px}
  .rejilla > *{grid-column:span 12 !important}
  .velo{padding:12px 8px}
  .ficha > footer{flex-wrap:wrap}
  .ficha > footer .hueco{flex-basis:100%;height:0}
  .cifras{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .lienzo{padding:10px}
  .cabecera{gap:7px}
  .cabecera .hueco{flex-basis:100%;height:0}
  .cabecera input,.cabecera select{width:100%}
  .ficha > footer button{flex:1 1 auto}
  .cifras{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ------------------------------------------------ el menú de la izquierda
   De cristal y claro: se ve el fondo difuminado detrás. El elemento
   elegido va en el verde suave, con el texto y el icono en verde. */
.lateral{
  width:244px;color:var(--tinta);display:flex;flex-direction:column;overflow-y:auto;
  background:var(--cristal);backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7);
  border-right:1px solid var(--linea);padding:14px 12px 10px;
  scrollbar-width:thin;scrollbar-color:var(--linea-fuerte) transparent;
}
.lateral::-webkit-scrollbar{width:6px}
.lateral::-webkit-scrollbar-thumb{background:var(--linea-fuerte);border-radius:3px}

.lateral .marca{display:flex;align-items:center;gap:10px;padding:2px 8px 10px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.lateral .marca .logo{width:36px;height:36px;flex:0 0 auto;display:block;border-radius:9px;filter:none}
.lateral .marca b{font-weight:700;display:block;line-height:1.15;color:var(--tinta)}
.lateral .marca b em{font-style:normal;color:var(--verde)}
.lateral .marca span span,.lateral .marca > span > span{
  display:block;color:var(--tinta-2);font-weight:500;font-size:11.5px;text-transform:none;letter-spacing:0;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;
}
/* El buscador del menú: abre «Buscar en todo» (Ctrl+K). */
.lateral .buscar-menu{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:9px;margin:0 2px 6px;
  background:var(--relleno);color:var(--tinta-2);font-size:13px;cursor:pointer;font-weight:500;
}
.lateral .buscar-menu svg{width:15px;height:15px;flex:none}
.lateral .buscar-menu .k{margin-left:auto;font-size:11px;color:var(--tinta-3);border:1px solid var(--linea);border-radius:5px;padding:1px 5px}
.lateral .buscar-menu:hover{color:var(--tinta)}

.lateral .grupo{
  display:flex;align-items:center;gap:6px;width:100%;font-size:11px;text-transform:none;letter-spacing:.01em;
  color:var(--tinta-2);font-weight:600;padding:12px 10px 4px;height:auto;border-radius:0;
  background:none;border:0;box-shadow:none;backdrop-filter:none;cursor:pointer;text-align:left;font-family:inherit;justify-content:flex-start;
}
.lateral .grupo:hover,.lateral .grupo:focus-visible{color:var(--tinta);background:none;box-shadow:none}
@keyframes gira{to{transform:rotate(360deg)}}
.girando svg{animation:gira 1.1s linear infinite}
@media (prefers-reduced-motion:reduce){.girando svg{animation:none}}
.lateral .grupo span{flex:1}
.lateral .grupo .flecha{width:11px;height:11px;opacity:.45;flex:0 0 auto;transition:transform var(--rapido),opacity var(--rapido)}
.lateral .grupo:hover .flecha{opacity:1}
.lateral .grupo[aria-expanded="false"] .flecha{transform:rotate(-90deg)}
.lateral .subrotulo{font-size:11px;font-weight:600;color:var(--tinta-3);padding:8px 10px 2px 10px}
.lateral a,.lateral .inerte{
  display:flex;align-items:center;gap:10px;padding:0 10px;height:30px;border-radius:8px;
  font-size:13.5px;font-weight:450;color:var(--tinta);text-decoration:none;border-left:0;cursor:pointer;
  transition:background var(--rapido),color var(--rapido);margin:1px 0;
}
.lateral a.sub,.lateral .inerte.sub{padding-left:22px}
.lateral a svg,.lateral .inerte svg{width:17px;height:17px;flex:0 0 auto;opacity:1;color:var(--tinta-2)}
.lateral a:hover{background:var(--seleccion);color:var(--tinta)}
.lateral a.actual{color:var(--verde-oscuro);background:var(--verde-claro);font-weight:600;border-left:0}
.lateral a.actual svg{color:var(--verde)}
.lateral .inerte{color:var(--tinta-3);opacity:.8;cursor:default}
.lateral .etiqueta{
  font-size:10px;text-transform:none;letter-spacing:0;font-weight:600;
  border:0;border-radius:999px;padding:1px 7px;margin-left:auto;color:var(--tinta-2);background:var(--gris-claro);
}
/* Un número pegado a un módulo (lo que espera en el buzón, el RETO) */
.lateral .globo{margin-left:auto;min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--tinta-3);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.lateral .globo.rojo{background:var(--rojo-vivo)}

.lateral .pie{margin-top:auto;padding:10px 10px 4px;font-size:12px;color:var(--tinta-2);display:flex;align-items:center;gap:7px}
.lateral .pie .punto{width:7px;height:7px;border-radius:50%;background:#34C759}
.lateral .pie.sin .punto{background:var(--rojo-vivo)}
.lateral .usuario{display:flex;align-items:center;gap:10px;padding:10px 8px 4px;border-top:1px solid var(--linea);background:transparent;margin-top:6px}
.lateral .usuario .avatar{
  width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#2FB16A,#0E7A40);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;
}
.lateral .usuario .quien{flex:1;min-width:0;line-height:1.25}
.lateral .usuario .quien b{display:block;font-size:13px;font-weight:600;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lateral .usuario .quien span{font-size:11.5px;color:var(--tinta-2)}
.lateral .piebarra{margin-top:auto;display:flex;align-items:center;padding:8px 4px 0 0;border-top:1px solid var(--linea)}
.lateral .piebarra .pie{margin-top:0;flex:1;min-width:0;padding:4px 10px}
.lateral .tema{background:none;box-shadow:none;backdrop-filter:none;flex:0 0 auto;border:0;padding:0;width:30px;height:30px;border-radius:8px;cursor:pointer;color:var(--tinta-2);line-height:0}
.lateral .tema:hover{background:var(--seleccion);color:var(--tinta);box-shadow:none}
.lateral .tema svg{width:16px;height:16px;display:block}

@media (max-width:820px){
  .lateral{width:auto;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:2px;padding:6px 6px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--linea)}
  .lateral .grupo,.lateral .marca span span,.lateral .pie,.lateral .usuario,.lateral .buscar-menu,.lateral .subrotulo,.lateral .piebarra{display:none}
  .lateral .grupo-cuerpo{display:contents}
  .lateral .grupo-cuerpo[hidden]{display:contents}
  .lateral a,.lateral .inerte{white-space:nowrap;padding:0 10px}
  .lateral a.sub{padding-left:10px}
  .lateral .marca{padding:0 10px 0 6px;white-space:nowrap;gap:6px;font-size:13.5px}
  .lateral .marca .logo{width:24px;height:24px}
}

@media print{
  .lateral,.cabecera button,.ficha > footer,.velo,.barra{display:none !important}
  .con-lateral{padding-left:0}
  .tarjeta{box-shadow:none;border:none}
  body{background:#fff}
  body::before{display:none}
}

/* La barra de «esto está trabajando» */
.riel{height:5px;border-radius:3px;background:var(--gris-claro);margin-top:8px;overflow:hidden}
.riel .tramo{height:100%;background:var(--verde);border-radius:3px;transition:width .4s ease}
.riel.sinfin .tramo{width:35%;animation:vaiven 1.5s ease-in-out infinite}
@keyframes vaiven{0%{margin-left:0}50%{margin-left:65%}100%{margin-left:0}}

.cobroFicha{
  display:flex;align-items:center;gap:var(--e3);margin-top:var(--e4);padding:12px 14px;
  border:0;border-radius:12px;background:var(--superficie-2);box-shadow:inset 0 0 0 1px var(--linea-suave);font-size:var(--t3);flex-wrap:wrap;
}
.cobroFicha .hueco{flex:1}

.grupo-cuerpo[data-vacio]{display:none !important}