/* bigger Control · tema 3 «producto» (16 oct 2026, diseñador)
   Jossué sobre el tema 2: «la interfaz se ve muy simplona, muy sencilla. Tienes que hacerla más bonita».
   El tema 3 es el 2 (abajo, intacto) más una capa de PRODUCTO al final: tablero con protagonista,
   gráfica, tarjetas con íconos propios (iconos.svg), grano de película en los negros (textura.svg),
   flujo guiado con resumen en vivo y microinteracciones. Todo con archivos propios (CSP 'self').
   ─────────────────────────────────────────────────────────────────────────────
   Tema 2 «de estudio» (16 oct 2026, diseñador)
   Jossué: «quiero que se vea cara así como se ve cara la página web de thebiggerstudio.com».
   Medido en esa web y traído aquí (las mismas clases que control-claro, para cambiar un solo archivo):
   - barra y pestañas en negro #0A0A0A con crema, contenido en crema (como sus secciones .papel);
   - borde de 2 px, esquina de 2 px y sombra dura ABAJO A LA IZQUIERDA (-6px 6px), como sus .boton;
   - botones Figtree 900 15 px en mayúsculas (.06em), 17/26 de relleno; al pasar se acercan a su
     sombra (-3px 3px) y al pulsar se hunden; el principal es rojo con letra negra y un brillo lento;
   - rótulos rojos 12 px a .16em, títulos Archivo 900 ancho 112 % y grandes, cifras a 60 px en banda negra
     con filetes de 1 px entre ellas;
   - menos cajas: lo que no es la acción clave va sobre el papel, separado por un filete de 2 px.
   Antes: control-claro (versión 1, 15 oct 2026).
   La misma estructura de la app local «La noche» (agente_financiero/app/index.html),
   pasada al campo claro de bigger (marca.yaml: campo_documento #F6E9D5) y al lenguaje
   de la factura aprobada: placa negra, borde de tinta y sombra dura abajo a la derecha.
   Reglas de la casa:
   - nada de píldoras ni fondos ovalados, nada de sombras difusas: sombras duras;
   - el color solo cuando significa algo; sin íconos ni formas decorativas;
   - el rojo de la sombra marca lo importante (pestaña activa, recuadro clave, error),
     el de texto (--acento) es el único rojo que se escribe;
   - el estado nunca va solo en color: siempre lleva su palabra (Listo / Ojo / Falta);
   - letra en cinco tamaños (44 · 26 · 17 · 15 · 12), nada debajo de 12; la única excepción
     es el total en el teléfono (36), y las placas del logo, que son dibujo y no texto;
   - dos anchos: 760 px para formularios (una columna que se recorre con la vista)
     y 1100 px para todo lo demás.
   Contrastes medidos en contraste.py (todos pasan). CSP: este archivo y las fuentes
   son propios; no hay @import, url() externa ni style en línea en el HTML. */

@font-face{font-family:"Archivo";font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("fonts/Archivo.ttf") format("truetype")}
@font-face{font-family:"Figtree";font-weight:300 900;font-display:swap;src:url("fonts/Figtree.ttf") format("truetype")}

:root{
  /* campo */
  --fondo:#F6E9D5;        /* crema: el fondo de la pantalla */
  --fondo-2:#EFE0C6;      /* crema 2: bandas, cabecera de tabla, pestañas */
  --superficie:#FFFDF8;   /* papel: tarjetas, campos, filas */
  /* letra */
  --texto:#14110C;        /* 15.7 sobre fondo · 18.5 sobre papel */
  --texto-suave:#5E554A;  /* 6.1 sobre fondo · 5.6 sobre banda */
  --rotulo:#645C51;       /* 5.1 sobre banda */
  /* señales */
  --rojo:#E83B3F;         /* el del logo: solo sombras y placas, nunca letra */
  --acento:#C21A1E;       /* el rojo que se escribe: 5.1 sobre fondo */
  --bien:#1A6E42;         /* listo / al día: 6.2 sobre papel */
  --ambar:#FCB52C;        /* ojo: solo bloque o sombra, nunca letra */
  --aviso-texto:#7A4E00;  /* el ámbar que se escribe: 7.1 sobre papel */
  /* filos */
  --linea:#DCC8A8;        /* filetes y separadores, nunca texto */
  --borde-campo:#857A6B;  /* borde de campos: 4.1 sobre papel */
  --foco:#3469B1;         /* azul del logo: no se confunde con el rojo de error */
  /* letra */
  --titulo:"Archivo",system-ui,sans-serif;
  --ui:"Figtree",system-ui,sans-serif;
  /* forma */
  --radio:2px;
  --sombra:-6px 6px 0;     /* abajo a la izquierda, como thebiggerstudio.com */
  --sombra-chica:-4px 4px 0;
  /* campo negro (barra, pestañas, banda de cifras) */
  --negro:#0A0A0A;
  --linea-noche:#2E2820;
  --sobre-noche:#F6E9D5;   /* 16.5 sobre negro */
  --sobre-noche-2:#C9BFB2; /* 11.5 sobre negro */
  --sobre-noche-3:#A2968A; /* 7.2 sobre negro */
  --ancho:1180px;
  --entra:cubic-bezier(.2,1.4,.4,1);
}

*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:var(--fondo);color:var(--texto);font:500 15px/1.5 var(--ui);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.oculto{display:none!important}

/* ── letra ── */
h1{margin:0;font:900 44px/1 var(--titulo);font-stretch:112%;letter-spacing:-.02em}
.cab h1,.entrada h1,h2{margin:0;font:900 26px/1.05 var(--titulo);font-stretch:112%;letter-spacing:-.02em}
.rotulo{font:800 12px/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--rotulo)}
.ayuda{font:500 15px/1.5 var(--ui);color:var(--texto-suave);margin:6px 0 0}
.nota{font:600 12px/1.5 var(--ui);color:var(--texto-suave);margin:6px 0 0}
.cifra{font:900 26px/1.1 var(--titulo);font-stretch:112%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
a{color:var(--acento);font-weight:700;text-underline-offset:3px}

/* ── lockup: las placas de bigger con el nombre del producto ── */
.placas{display:inline-flex;flex-direction:column;align-items:flex-start;font-size:26px;padding-bottom:4px;white-space:nowrap}
.placas span{display:block;font-family:var(--titulo);font-weight:900;font-stretch:112%;letter-spacing:-.03em;line-height:.9;padding:.06em .16em .14em;color:#fff}
.placas .a{background:var(--texto);transform:rotate(-3deg);box-shadow:.07em .07em 0 var(--rojo);position:relative;z-index:1}
.placas .b{background:var(--rojo);color:var(--texto);transform:rotate(-3deg) translate(.5em,.1em);font-size:.5em;letter-spacing:.02em;box-shadow:.1em .1em 0 var(--texto)}
.placas.grande{font-size:44px}

/* ── la barra de arriba ── */
.barra{position:sticky;top:0;z-index:20;background:var(--fondo);border-bottom:2px solid var(--texto)}
.barra .caja{display:flex;align-items:center;gap:24px;min-height:72px;padding:10px 28px;max-width:var(--ancho);margin:0 auto;flex-wrap:wrap}
/* la empresa de esta sesión, siempre a la vista. No se cambia desde aquí: cada usuario
   entra a UNA empresa (acceso por empresa y por usuario asignado); para otra, otro acceso. */
.barra .empresa{display:grid;padding-left:22px;border-left:1px solid var(--linea)}
.barra .empresa b{font:800 15px/1.3 var(--ui)}
.empresa-entrada{display:grid;margin:0 0 18px;padding:12px 14px;background:var(--fondo-2);border-radius:4px}
.empresa-entrada b{font:800 17px/1.3 var(--ui)}
.barra .quien{margin-left:auto;display:flex;align-items:center;gap:14px;font:700 12px/1.3 var(--ui);color:var(--texto-suave)}
.barra .quien b{display:block;color:var(--texto);font-size:15px}

/* ── pestañas: una banda; la activa es la placa negra con sombra roja ── */
.pestanas{max-width:var(--ancho);margin:18px auto 0;padding:0 28px}
/* cuatro destinos a la vista (lo que se usa cada día) y el resto dentro de «Más».
   Son enlaces con aria-current, no role=tab: cada uno lleva a otra pantalla. */
.pestanas nav{display:flex;align-items:center;gap:6px;padding:6px;background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--radio)}
.pestanas a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:10px 22px;border-radius:4px;color:var(--texto-suave);font:700 15px/1.2 var(--ui);text-decoration:none;cursor:pointer}
.pestanas a:hover{background:var(--superficie);color:var(--texto)}
.pestanas a[aria-current=page]{background:var(--texto);color:var(--superficie);font-weight:800;box-shadow:var(--sombra) var(--rojo)}
.pestanas a:focus-visible,.pestanas .mas:focus-visible{outline:3px solid var(--foco);outline-offset:3px;box-shadow:0 0 0 3px var(--superficie)}
/* «Más» abre un popover nativo: se cierra al tocar fuera o con Escape, sin JS */
.pestanas .mas{margin-left:auto;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:0;border-radius:4px;background:none;color:var(--texto-suave);font:700 15px/1.2 var(--ui)}
.pestanas .mas:hover,.pestanas .mas:has(+ .menu:popover-open){background:var(--superficie);color:var(--texto)}
.pestanas .mas::after{content:"";width:7px;height:7px;margin:0 0 4px 10px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pestanas .menu{inset:auto;position:fixed;top:150px;right:max(28px,calc((100vw - var(--ancho)) / 2 + 28px));margin:0;min-width:240px;padding:6px;background:var(--superficie);color:var(--texto);border:2px solid var(--texto);border-radius:4px;box-shadow:var(--sombra) var(--texto)}
.pestanas .menu:popover-open{display:grid}
.pestanas .menu a{justify-content:flex-start;color:var(--texto)}

main{max-width:var(--ancho);margin:0 auto;padding:22px 28px 70px}

/* ── tarjeta (el «panel» de la app) ── */
.tarjeta{background:var(--superficie);border:2px solid var(--texto);border-radius:var(--radio);padding:24px 26px 26px;margin-bottom:24px;box-shadow:var(--sombra) var(--texto)}
.tarjeta.clave{box-shadow:var(--sombra) var(--rojo)}
/* un formulario no se estira a lo ancho de la pantalla: la vista recorre una columna */
.tarjeta.paso{max-width:760px;margin-left:auto;margin-right:auto}
.subtitulo{margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--linea);font:900 17px/1.2 var(--titulo);font-stretch:112%}
.tarjeta .cab{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.n{display:block;white-space:nowrap;font:800 12px/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--rotulo)}
.tarjeta .cab:has(.n){flex-direction:column;align-items:flex-start;gap:4px}
.banda{background:var(--fondo-2);border-radius:4px;padding:14px 16px}
.banda.total{margin-bottom:18px}
.cifra.grande{font-size:44px;margin:4px 0 2px;white-space:nowrap}
.desglose span{display:block;white-space:nowrap}
.desglose{font:600 15px/1.4 var(--ui);color:var(--texto-suave);margin:0;font-variant-numeric:tabular-nums}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px solid var(--texto);border-radius:4px;
  font:800 15px/1.2 var(--ui);letter-spacing:0;text-decoration:none;
  transition:transform 120ms cubic-bezier(.4,0,.2,1),box-shadow 120ms cubic-bezier(.4,0,.2,1)}
.btn.primario{background:var(--texto);color:var(--superficie);box-shadow:var(--sombra) var(--rojo)}
.btn.secundario{background:var(--superficie);color:var(--texto);box-shadow:var(--sombra) var(--texto)}
.btn.peligro{background:var(--acento);border-color:var(--acento);color:var(--superficie);box-shadow:var(--sombra) var(--texto)}
.btn.grande{min-height:52px;padding:12px 26px;font-size:17px}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--sombra-color,currentColor)}
.btn.primario:hover{--sombra-color:var(--rojo)}
.btn.secundario:hover,.btn.peligro:hover{--sombra-color:var(--texto)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 transparent}  /* se hunde */
.btn:disabled{background:var(--fondo-2);border-color:var(--linea);color:var(--texto-suave);box-shadow:none;transform:none;cursor:not-allowed}
.acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.acciones .derecha{margin-left:auto}

/* ── campos ── */
.campo{display:grid;gap:6px;margin-bottom:16px}
.campo label{font:700 15px/1.3 var(--ui)}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;min-height:44px;padding:10px 12px;background:var(--superficie);border:2px solid var(--borde-campo);border-radius:4px;font:500 17px/1.3 var(--ui)}
input::placeholder,textarea::placeholder{color:var(--texto-suave);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--texto)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--foco);outline-offset:1px;border-color:var(--texto)}
.campo.falta input,.campo.falta select,.campo.falta textarea,[aria-invalid=true]{border:2px solid var(--acento)}
.campo .error{font:700 15px/1.4 var(--ui);color:var(--acento);margin:0}
input[type=checkbox],input[type=radio]{width:32px;height:32px;flex:none;accent-color:var(--texto)}
.marcar{display:flex;gap:12px;align-items:center;min-height:44px;font-weight:600;cursor:pointer}
/* «Fecha en que vence» solo aparece si el pago es a crédito (sin JS) */
.campo-vence{display:none}
form:has(option[value=credito]:checked) .campo-vence,.tarjeta:has(option[value=credito]:checked) .campo-vence{display:grid}
.pie{margin-top:22px;padding-top:18px;border-top:1px solid var(--linea)}
/* el pie del paso 1 se queda abajo a la vista: el total y «Revisar la factura» siempre se ven */
.pie.fijo{position:sticky;bottom:0;z-index:5;margin:22px -26px -26px;padding:14px 26px;background:var(--superficie);border-top:2px solid var(--texto);border-radius:0 0 var(--radio) var(--radio)}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cifra-campo{text-align:right;font-variant-numeric:tabular-nums}

/* ── avisos: un solo recuadro; la sombra y la palabra dicen el estado ── */
.aviso{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;background:var(--superficie);border:2px solid var(--texto);border-radius:4px;padding:14px 16px;margin:0 0 16px}
.aviso b{font:900 12px/1.4 var(--titulo);letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:4px}
.aviso a{display:inline-flex;align-items:center;min-height:44px}
.resumen-faltas{margin-bottom:22px}
.resumen-faltas p{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 18px}
.resumen-faltas:focus{outline:3px solid var(--foco);outline-offset:2px}
.aviso p{margin:0}
.aviso.bien{box-shadow:var(--sombra) var(--bien)}
.aviso.bien b{background:var(--bien);color:var(--superficie)}
.aviso.ojo{box-shadow:var(--sombra) var(--ambar)}
.aviso.ojo b{background:var(--ambar);color:var(--texto)}
.aviso.mal{border-color:var(--acento);box-shadow:var(--sombra) var(--acento)}
.aviso.mal b{background:var(--acento);color:var(--superficie)}
.aviso.info b{background:var(--fondo-2);color:var(--texto)}

/* ── tabla ── */
.tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch;border:2px solid var(--texto);border-radius:4px;background:var(--superficie)}
.tabla{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabla th{background:var(--fondo-2);text-align:left;font:800 12px/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--rotulo);padding:12px 14px;border-bottom:2px solid var(--texto);white-space:nowrap}
.tabla td{padding:12px 14px;border-bottom:1px solid var(--linea);vertical-align:middle;white-space:nowrap}  /* en el teléfono la tabla se desliza de lado dentro de su caja */
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover td{background:var(--fondo)}
.tabla .num{text-align:right;white-space:nowrap}
.tabla .total td{border-top:2px solid var(--texto);font-weight:800;background:var(--fondo-2)}
.estado{font:800 12px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.estado.bien{color:var(--bien)} .estado.ojo{color:var(--aviso-texto)} .estado.mal{color:var(--acento)} .estado.anulada{color:var(--texto-suave);text-decoration:line-through}

/* ── diálogo ── */
dialog{width:min(640px,92vw);max-height:88dvh;overflow:auto;padding:26px 28px;background:var(--superficie);color:var(--texto);border:2px solid var(--texto);border-radius:var(--radio);box-shadow:6px 6px 0 var(--rojo)}
dialog::backdrop{background:rgba(20,17,12,.55)}

/* ── entrar con llave de acceso ── */
.entrada{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.entrada .tarjeta{width:min(440px,100%);margin:0}
.entrada .placas{margin-bottom:26px}

/* ── teléfono ── */
@media (max-width:760px){
  .barra .caja,.pestanas,main{padding-left:16px;padding-right:16px}
  .barra .caja{flex-wrap:nowrap;min-height:64px}
  .barra .quien > div{display:none}
  .barra .caja{flex-wrap:wrap;row-gap:0}
  .barra .empresa{order:3;width:100%;padding:8px 0 10px;border-left:0;border-top:1px solid var(--linea)}
  .barra .empresa .rotulo{display:none}  /* en el teléfono la barra queda en una fila: logo y Salir */
  /* teléfono: una sola fila de cinco */
  .pestanas nav{gap:2px;padding:4px}
  .pestanas a{flex:1 1 0;padding:6px 4px;font-size:12px;font-weight:800}
  /* la tabla pasa a una tarjeta por factura: cliente y total arriba, lo demás con su rótulo */
  .tabla-caja{border:0;background:none;overflow:visible}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block}
  .tabla thead{display:none}
  .tabla tbody tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px;margin-bottom:12px;background:var(--superficie);border:2px solid var(--texto);border-radius:4px}
  .tabla td{padding:0;border:0;white-space:normal}
  .tabla tbody tr:hover td{background:none}
  .tabla td.cliente{grid-column:1;grid-row:1;font-weight:800;font-size:17px}
  .tabla td[data-r=Total]{grid-column:2;grid-row:1;font-weight:800;font-size:17px}
  .tabla td[data-r=Estado]{grid-column:1/-1;grid-row:2}
  .tabla td[data-r=Fecha]{grid-row:3}
  .tabla td[data-r=Número]{grid-row:4}
  .tabla td[data-r=Número],.tabla td[data-r=Fecha]{grid-column:1/-1;font-size:15px;color:var(--texto-suave)}
  .tabla td[data-r=Número]::before,.tabla td[data-r=Fecha]::before{content:attr(data-r) ": ";font-weight:700}
  .tabla td:last-child{grid-column:1/-1;grid-row:5;margin-top:8px}
  .tabla td:last-child .btn{width:100%}
  .tabla tfoot{display:block}
  .tabla tfoot tr{display:flex;justify-content:space-between;padding:14px;background:var(--fondo-2);border:2px solid var(--texto);border-radius:4px}
  .tabla tfoot td{display:inline;padding:0;border:0;background:none}
  .tabla tfoot td:empty{display:none}
  .tarjeta{padding:18px 16px 20px}
  h1{font-size:26px}
  .acciones .btn{flex:1 1 auto}
  .acciones .derecha{margin-left:0}
  .entrada .tarjeta{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.banda + .acciones,.ayuda + .campo,.ayuda + .acciones{margin-top:18px}

/* ── paginación: anterior · cuántas · siguiente (sin números de página) ── */
.paginacion{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.paginacion .cuantas{font:600 15px/1.4 var(--ui);color:var(--texto-suave);font-variant-numeric:tabular-nums;text-align:center}
.paginacion .cuantas b{color:var(--texto)}

/* ── campo de fecha: igual que los demás, con el formato a la vista ── */
.campo .formato{font:600 15px/1.3 var(--ui);color:var(--texto-suave);margin-left:8px}
input.fecha{max-width:13ch;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.campo:has(input.fecha){justify-items:start}

/* ── vista previa de la factura: la hoja carta a escala, con su banda de acciones ──
   El iframe mide la hoja real (8.5 × 11 in = 816 × 1056 px) y se encoge con --escala;
   el marco toma el tamaño ya encogido, así no queda hueco ni barra de desplazamiento. */
.vista-previa{--escala:.72;display:grid;justify-items:center;gap:0}
.vista-previa .marco{width:calc(816px * var(--escala));height:calc(1056px * var(--escala));overflow:hidden;background:#fff;border:2px solid var(--texto);box-shadow:var(--sombra) var(--texto)}
/* factura.html en pantalla deja 24 px de mesa gris arriba y abajo de la hoja (@media screen .hoja{margin:24px auto});
   el iframe mide la hoja más esa mesa y se sube 24 px, así el marco muestra solo el papel. */
.vista-previa iframe{--mesa:24px;display:block;width:816px;height:calc(1056px + 2 * var(--mesa));border:0;transform:scale(var(--escala)) translateY(calc(-1 * var(--mesa)));transform-origin:0 0}
.banda-acciones{position:sticky;bottom:0;z-index:5;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px;padding:14px 18px;background:var(--fondo-2);border:2px solid var(--texto);border-radius:var(--radio)}
.banda-acciones .derecha{margin-left:auto}
.banda-acciones .ayuda{margin:0}
.ver-grande{display:none;margin-top:14px}
@media (max-width:760px){.ver-grande{display:inline-flex}}
/* la hoja a tamaño real, en una capa a pantalla completa (popover nativo, sin JS);
   en el teléfono se recorre con el dedo y se puede ampliar */
.hoja-grande{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--fondo);color:var(--texto)}
.hoja-grande:popover-open{display:grid;grid-template-rows:auto 1fr}
.hoja-grande .cab-hoja{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-bottom:2px solid var(--texto);background:var(--fondo)}
.hoja-grande .cab-hoja b{font:900 17px/1.2 var(--titulo);font-stretch:112%}
.hoja-grande .papel{overflow:auto;-webkit-overflow-scrolling:touch}
.hoja-grande iframe{display:block;width:816px;height:1104px;border:0;margin:0 auto}
@media (max-width:var(--ancho)){.vista-previa{--escala:.6}}
@media (max-width:760px){
  .vista-previa{--escala:.4}        /* 326 px de hoja: cabe en 375 con su gutter */
  .paginacion .btn{flex:0 0 auto}
  .paginacion .cuantas{font-size:15px;margin:0;white-space:nowrap}
  .paginacion .cuantas .palabra{display:none}
  .banda-acciones{padding:12px}
  .banda-acciones{flex-wrap:nowrap;gap:10px}
  .banda-acciones .btn{flex:1 1 0;padding:10px 8px}
  .btn.grande{font-size:15px;min-height:52px}
  .cifra.grande{font-size:36px}
  .banda-acciones .derecha{margin-left:0}
}
@media (max-width:359px){.vista-previa{--escala:.34}}

/* ── emitir: el estado mientras el servidor responde ──
   .emitiendo: se mandó y se espera (barra que avanza, sin girar nada).
   .incierto: no hubo respuesta clara; NO se reintenta a ciegas: se comprueba. */
.estado-envio .barra-avance{grid-column:1/-1;height:6px;background:var(--fondo-2);border:1px solid var(--texto);overflow:hidden}
.estado-envio .barra-avance i{display:block;width:35%;height:100%;background:var(--texto);animation:avance 1.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes avance{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
.estado-envio .acciones{grid-column:1/-1;margin-top:8px}
@media (prefers-reduced-motion:reduce){.estado-envio .barra-avance i{animation:none;width:100%;opacity:.35}}

/* ── líneas de la factura: qué · cantidad · precio · quitar ── */
.lineas{display:grid;gap:12px;margin-bottom:14px}
.linea{display:grid;grid-template-columns:1fr 90px 150px auto;gap:12px;align-items:end;padding:0 0 16px;border-bottom:1px solid var(--linea)}
.linea .campo{margin:0}
.linea textarea{resize:vertical;min-height:44px}
.nota-total{font:600 15px/1.3 var(--ui);color:var(--texto-suave)}
.nota-total b{display:block;font:900 26px/1.1 var(--titulo);font-stretch:112%;color:var(--texto);font-variant-numeric:tabular-nums}

/* ── revisar: la hoja a la izquierda, el total y la acción a la derecha ── */
.revisar{display:grid;gap:18px}
@media (min-width:1100px){
  .revisar{grid-template-columns:auto minmax(320px,520px);align-items:start;justify-content:center;gap:40px}
  .revisar .resumen{grid-column:2;grid-row:1}
  .revisar .vista-previa{grid-column:1;grid-row:1/3}
  /* la acción va junto al total, no debajo de la hoja */
  .revisar .banda-acciones{grid-column:2;grid-row:2;align-self:start;position:sticky;top:96px;margin-top:0}
}

@media (max-width:760px){
  .linea{grid-template-columns:1fr 1fr}
  .linea .que{grid-column:1/-1}
  .linea .quitar{grid-column:1/-1}
  .pie{flex-wrap:wrap}
  .pie .btn{flex:1 1 100%}
  .pestanas .mas{padding:6px 4px;font-size:12px;font-weight:800}
  .pestanas .mas::after{margin-left:6px}
  .pestanas .menu{top:142px;right:16px}
  .pie.fijo{margin:22px -16px -20px;padding:12px 16px}
  .pie.fijo .nota-total b{font-size:26px}
  /* las acciones de un diálogo se apilan: la segura arriba, lejos del pulgar que baja */
  dialog .acciones,.acciones:has(.peligro){flex-direction:column;align-items:stretch}
  /* tarjeta de factura compacta: cliente y total / estado y fecha · el PDF a la derecha */
  .tabla td[data-r=Número]{display:none}
  .tabla tbody tr{grid-template-columns:1fr auto;gap:2px 12px}
  .tabla td[data-r=Estado]{grid-column:1;grid-row:2}
  .tabla td[data-r=Fecha]{grid-column:1;grid-row:3}
  .tabla td[data-r=Fecha]::before{content:none}
  .tabla td:last-child{grid-column:2;grid-row:2/4;margin:0;align-self:end}
  .tabla td:last-child .btn{width:auto}
}


/* ═══════════════════════════════════════════════════════════════════════
   DE ESTUDIO · lo que hace que se vea caro (medido en thebiggerstudio.com)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── letra: títulos grandes y apretados, rótulos rojos espaciados ── */
h1,.cab h1{font:900 clamp(36px,4.8vw,64px)/.95 var(--titulo);font-stretch:112%;letter-spacing:-.025em;text-wrap:balance}
h2{font-size:26px;line-height:1}
/* en las pantallas de trabajo el título no le roba sitio al formulario */
.tarjeta.paso h1,#vista-previa h1,#vista-hecha h1{font-size:44px}
.entrada h1{font-size:44px}
.rotulo,.n{font:800 12px/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--acento)}
.ayuda{font-size:17px;line-height:1.55}
.ayuda b{display:block;margin-bottom:4px;font:800 12px/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--acento)}
/* una palabra del título puede ir «sellada», como en la web: <em> dentro del h1 */
h1 em,h2 em{display:inline-block;font-style:normal;padding:0 .14em;background:var(--negro);color:var(--sobre-noche);transform:rotate(-2deg);box-shadow:var(--sombra-chica) var(--rojo)}

/* ── barra: negra, como la de la web ── */
.barra{background:var(--negro);color:var(--sobre-noche);border-bottom:1px solid var(--linea-noche)}
.barra a{color:inherit}
.barra .empresa{border-left-color:var(--linea-noche)}
.barra .empresa .rotulo{color:var(--sobre-noche-3)}
.barra .empresa b{color:var(--sobre-noche)}
.barra .quien{color:var(--sobre-noche-3)}
.barra .quien b{color:var(--sobre-noche)}
.barra .btn.secundario{background:transparent;color:var(--sobre-noche);border-color:var(--sobre-noche);box-shadow:none}
.barra .btn.secundario:hover{background:var(--sobre-noche);color:var(--negro);transform:none;box-shadow:none}
.placas .a{background:#fff;color:var(--negro)}   /* sobre negro la placa de bigger va en blanco */
.barra :focus-visible{outline-color:var(--sobre-noche)}

/* ── pestañas: siguen la barra en negro; la activa es el botón crema de la web ── */
.pestanas{max-width:none;margin:0;padding:0;background:var(--negro);border-bottom:2px solid var(--negro)}
.pestanas nav{max-width:var(--ancho);margin:0 auto;padding:10px 28px 16px;gap:8px;background:none;border:0;border-radius:0}
.pestanas a,.pestanas .mas{color:var(--sobre-noche-2);font:800 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;border-radius:var(--radio);padding:14px 18px}
.pestanas a:hover,.pestanas .mas:hover,.pestanas .mas:has(+ .menu:popover-open){background:transparent;color:var(--sobre-noche);box-shadow:inset 0 -3px 0 var(--rojo)}
.pestanas a[aria-current=page]{background:var(--sobre-noche);color:var(--negro);border:2px solid var(--sobre-noche);box-shadow:var(--sombra-chica) var(--rojo)}
.pestanas a:focus-visible,.pestanas .mas:focus-visible{outline:3px solid var(--sobre-noche);outline-offset:3px;box-shadow:none}
.pestanas .menu{border-radius:var(--radio);box-shadow:var(--sombra) var(--negro);top:142px}
.pestanas .menu a{color:var(--texto);text-transform:none;letter-spacing:0;font:700 15px/1.2 var(--ui)}
.pestanas .menu a:hover{box-shadow:inset 3px 0 0 var(--rojo)}

main{padding-top:48px}

/* ── tarjetas: la clave en caja de papel con sombra roja; las demás, sobre el papel con filete ── */
.tarjeta{background:none;border:0;border-top:2px solid var(--texto);border-radius:0;box-shadow:none;padding:26px 0 8px;margin-bottom:40px}
.tarjeta.clave,.tarjeta.paso,dialog,.entrada .tarjeta{background:var(--superficie);border:2px solid var(--texto);border-radius:var(--radio);padding:32px 34px 34px;box-shadow:var(--sombra) var(--rojo)}
.tarjeta.paso{box-shadow:var(--sombra) var(--texto)}
.tarjeta .cab{margin-bottom:18px}
.tarjeta .cab:has(.n){gap:10px}
details.tarjeta > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px}
details.tarjeta > summary::-webkit-details-marker{display:none}
details.tarjeta > summary::after{content:"";width:12px;height:12px;flex:none;border:solid var(--acento);border-width:0 3px 3px 0;transform:rotate(45deg);transition:transform 220ms var(--entra)}
details.tarjeta[open] > summary::after{transform:rotate(225deg)}

/* ── banda: la cinta crema de la web, entre filetes de 2 px ── */
.banda{background:var(--fondo-2);border-block:2px solid var(--texto);border-radius:0;padding:20px 22px;margin-bottom:40px}
.banda.total{border:2px solid var(--texto);border-radius:var(--radio);margin-bottom:22px}

/* ── cifras: como la franja negra de la web (82 · 29 · 600+) ── */
.rejilla{background:var(--negro);color:var(--sobre-noche);border:2px solid var(--negro);border-radius:var(--radio);margin:0 0 40px;gap:0!important;box-shadow:none}
.rejilla .tarjeta{background:none;border:0;border-left:1px solid var(--linea-noche);border-radius:0;box-shadow:none;margin:0;padding:34px 28px}
.rejilla .tarjeta:first-child{border-left:0}
.rejilla .rotulo{color:var(--sobre-noche-3)}
.rejilla .cifra{display:block;margin:14px 0 10px;font:900 44px/1 var(--titulo);font-stretch:105%;white-space:nowrap;letter-spacing:-.02em;color:var(--sobre-noche);transition:color 250ms,transform 250ms var(--entra);transform-origin:left bottom}
.rejilla .tarjeta.clave .cifra{color:var(--rojo)}
/* un número largo (el de la próxima factura) se estrecha en vez de partirse */
.rejilla .cifra:not(:empty){overflow-wrap:normal}
.rejilla .tarjeta:last-child .cifra{font-size:26px;font-stretch:85%;margin-top:22px}      /* 4.8 sobre negro, cifra grande */
.rejilla .tarjeta:hover .cifra{transform:scale(1.04)}
.rejilla .nota{color:var(--sobre-noche-2);font-size:15px}
.cifra{font-stretch:120%}
.cifra.grande{font-size:44px}

/* ── botones: los de la web ── */
.btn{min-height:48px;padding:15px 24px;border-width:2px;border-radius:var(--radio);font:900 15px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;
  transition:transform 150ms,box-shadow 150ms,background-color 150ms,color 150ms}
.btn.primario{position:relative;overflow:hidden;background:var(--rojo);color:var(--negro);border-color:var(--negro);box-shadow:var(--sombra) var(--negro)}
.btn.secundario{background:var(--superficie);color:var(--texto);border-color:var(--texto);box-shadow:var(--sombra) var(--rojo)}
.btn.peligro{background:var(--superficie);color:var(--acento);border-color:var(--acento);box-shadow:var(--sombra) var(--acento)}
.btn.grande{min-height:60px;padding:20px 30px;font-size:17px}
.btn:hover{transform:translate(-3px,3px);box-shadow:-3px 3px 0 var(--sombra-color,var(--rojo))}
.btn.primario:hover{--sombra-color:var(--negro)}
.btn.peligro:hover{--sombra-color:var(--acento)}
.btn:active{transform:translate(-6px,6px);box-shadow:0 0 0 transparent}
.btn:disabled,.btn:disabled:hover{background:var(--fondo-2);border-color:var(--linea);color:var(--texto-suave);box-shadow:none;transform:none}
/* el brillo lento del botón principal, como el de «2 días gratis» de la web */
.btn.primario::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:brillo 4.5s ease-in-out 1.2s 2;pointer-events:none}
.btn.primario:disabled::after{content:none}
@keyframes brillo{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
.acciones{gap:18px}
.acciones + .nota{margin-top:22px}

/* ── campos ── */
.campo label{font-weight:800}
input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:52px;padding:12px 14px;border-width:2px;border-radius:var(--radio)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-color:var(--texto);box-shadow:var(--sombra-chica) var(--foco)}
.subtitulo{margin:34px 0 14px;padding-top:22px;border-top:2px solid var(--texto);font-size:17px;letter-spacing:.01em}

/* ── avisos, tabla, hoja y bandas: el mismo filo de 2 px y la sombra hacia la izquierda ── */
.aviso{border-radius:var(--radio);padding:16px 18px}
.aviso b{border-radius:var(--radio)}
.tabla-caja,.vista-previa .marco,.banda-acciones,.pestanas .menu{border-radius:var(--radio)}
.tabla th{background:var(--negro);color:var(--sobre-noche-2);border-bottom:0;letter-spacing:.16em}
.tabla tbody tr:hover td{background:var(--fondo-2)}
.banda-acciones{background:var(--superficie);box-shadow:var(--sombra) var(--rojo);flex-wrap:nowrap}
.banda-acciones .btn{flex:1 1 auto}
.banda-acciones .derecha{margin-left:0}
.pie.fijo{border-top:2px solid var(--texto);margin:26px -34px -34px;padding:16px 34px}
dialog{box-shadow:var(--sombra) var(--rojo)}

/* ── entrada: el negro de la web detrás, la tarjeta de papel delante ── */
.entrada{background:var(--negro)}
.entrada .placas .a{background:var(--negro);color:#fff}

/* ── profundidad: la luz roja de la web, muy baja, arriba a la derecha del papel y dentro de la franja negra ── */
body{background:radial-gradient(70% 55% at 100% 0%,rgba(232,59,63,.10),transparent 60%) no-repeat,var(--fondo);background-attachment:fixed}
.rejilla{background:radial-gradient(80% 120% at 0% 0%,rgba(232,59,63,.22),transparent 60%),var(--negro)}

/* ── la acción principal junto al título (Inicio: «Nueva factura» arriba) ── */
.tarjeta .cab:has(> .btn){flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.tarjeta.clave .aviso p{font-size:17px}

/* ── «Quitar línea» no pesa como «Agregar»: es un enlace rojo con su área de 44 px ── */
.linea .quitar,.linea .quitar:hover{background:none;border-color:transparent;box-shadow:none;transform:none;color:var(--acento);text-decoration:underline;text-underline-offset:4px;text-transform:none;letter-spacing:0;font-weight:800}
.linea .quitar:disabled{background:none;border-color:transparent;color:var(--texto-suave);text-decoration:none}

/* ── revisar: el botón de emitir justo debajo del total, no al fondo ── */
@media (min-width:1100px){.revisar{grid-template-rows:auto 1fr}.revisar .banda-acciones{margin-top:0}}

/* ── portada: la tarjeta que abre una pantalla puede ir en negro con la luz roja de la web
   (clase .portada en la sección; en Inicio, «Lo que toca hoy») ── */
.tarjeta.portada{position:relative;overflow:hidden;background:radial-gradient(60% 90% at 100% 0%,rgba(232,59,63,.30),transparent 62%),radial-gradient(40% 60% at 0% 100%,rgba(252,181,44,.07),transparent 70%),var(--negro);color:var(--sobre-noche);border-color:var(--negro);box-shadow:var(--sombra) var(--rojo);padding:44px 44px 40px}
.tarjeta.portada h1 em{background:var(--sobre-noche);color:var(--negro);box-shadow:var(--sombra-chica) var(--rojo)}
.tarjeta.portada .ayuda{color:var(--sobre-noche-2)}
.tarjeta.portada .aviso{color:var(--texto)}
.tarjeta.portada :focus-visible{outline-color:var(--sobre-noche)}
.tarjeta.portada .btn.primario{border-color:var(--sobre-noche);box-shadow:var(--sombra) var(--sobre-noche)}
.tarjeta.portada .btn.primario:hover{--sombra-color:var(--sobre-noche)}
.banda-acciones .btn.grande{min-height:56px;padding:16px 22px;font-size:15px}
/* en las pantallas de trabajo, la cabecera del paso es la misma franja negra con luz (la casa se reconoce en todas) */
.tarjeta.paso > .cab,.tarjeta.clave > .cab:is(:has(.n),:has(.pasos)){margin:-32px -34px 28px;padding:28px 34px 26px;background:radial-gradient(60% 140% at 100% 0%,rgba(232,59,63,.28),transparent 62%),var(--negro);color:var(--sobre-noche)}
.tarjeta.paso > .cab .n,.tarjeta.clave > .cab .n{color:var(--sobre-noche-3)}
.tarjeta.paso > .cab h1 em,.tarjeta.clave > .cab h1 em{background:var(--sobre-noche);color:var(--negro)}
/* la acción que gana es «Emitir»: va primero y a lo ancho; «Volver a editar» debajo, más bajo */
.banda-acciones,.banda-acciones[class]{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:12px}
.banda-acciones .derecha{order:-1}
.banda-acciones .btn{white-space:nowrap}
.banda-acciones .btn.secundario{min-height:48px;padding-block:12px}
@media (max-width:760px){
  .tarjeta.portada{padding:26px 18px 24px}
  .tarjeta.paso > .cab,.tarjeta.clave > .cab:is(:has(.n),:has(.pasos)){margin:-22px -18px 22px;padding:22px 18px 20px}
}

/* ── movimiento: entra en cascada, una vez, como las secciones de la web ── */
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main > *{animation:entra .5s var(--entra) backwards}
main > :nth-child(2){animation-delay:60ms} main > :nth-child(3){animation-delay:120ms} main > :nth-child(4){animation-delay:180ms}
main > :nth-child(5){animation-delay:240ms} main > :nth-child(n+6){animation-delay:300ms}
.rejilla .tarjeta{animation:entra .5s var(--entra) backwards}
.rejilla .tarjeta:nth-child(2){animation-delay:90ms} .rejilla .tarjeta:nth-child(3){animation-delay:180ms}

@media (max-width:760px){
  main{padding-top:28px}
  /* teléfono: la barra se va al bajar, las pestañas se quedan; la cabecera ocupa menos */
  .barra{position:static}
  .pestanas{position:sticky;top:0;z-index:20}
  .barra .empresa b{font-size:15px;font-weight:800}
  .barra .empresa{padding:6px 0 8px}
  .pestanas a,.pestanas .mas{text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
  .tarjeta .cab:has(> .btn) .btn{width:100%}
  /* pie del paso 1 en una fila: total a la izquierda, botón a la derecha */
  /* «Más» abre desde abajo, a lo ancho: siempre en su sitio y al alcance del pulgar */
  .pestanas .menu{inset:auto 0 0 0!important;width:100%;min-width:0;border-width:2px 0 0;border-radius:0;padding:10px 12px 18px;box-shadow:0 -6px 0 var(--rojo)}
  .pie.fijo{flex-wrap:nowrap;gap:12px}
  .pie.fijo{flex-wrap:wrap!important;row-gap:10px}
  .pie.fijo .nota-total{flex:1 1 100%!important;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .pie.fijo .btn{flex:1 1 100%;min-height:52px;white-space:nowrap}
  .pie.fijo .nota-total{flex:0 0 auto;font-size:12px}
  .pie.fijo .nota-total b{font-size:26px!important}
  .pie.fijo .nota-total b{font-size:26px}
  .barra .empresa{border-top-color:var(--linea-noche)}
  .pestanas nav{padding:6px 12px 12px;gap:2px}
  .pestanas a,.pestanas .mas{padding:12px 4px;font-size:12px;letter-spacing:.06em}
  .tarjeta.clave,.tarjeta.paso,.entrada .tarjeta{padding:22px 18px 24px}
  .pie.fijo{margin:26px -18px -24px;padding:12px 18px}
  .rejilla .tarjeta{border-left:0;border-top:1px solid var(--linea-noche);padding:24px 20px}
  .rejilla .tarjeta:first-child{border-top:0}
  .cifra.grande{font-size:40px}
  .btn{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){
  main > *,.rejilla .tarjeta{animation:none}
  .btn.primario::after{animation:none;content:none}
  .btn,.rejilla .cifra{transition:none}
}

/* el menú «Más» se ancla a su botón donde el navegador lo sabe hacer */
@supports (anchor-name:--mas){
  .pestanas .mas{anchor-name:--mas}
  @media (min-width:761px){.pestanas .menu{position-anchor:--mas;top:calc(anchor(bottom) + 10px);right:anchor(right)}}
}


/* ═══════════════════════════════════════════════════════════════════════
   PRODUCTO · tema 3: que se sienta un producto caro (tablero, flujo guiado, detalle)
   ═══════════════════════════════════════════════════════════════════════ */
:root{--grano:url("textura.svg");--sombra-honda:-10px 10px 0}

/* ── íconos: <svg class="icono"><use href="/iconos.svg#factura"/></svg> ── */
.icono{width:22px;height:22px;flex:none;display:inline-block;vertical-align:middle}
.icono.chico{width:16px;height:16px}
.icono.grande{width:28px;height:28px}
/* el ícono va en una placa cuadrada: negra con crema sobre papel, crema con negro sobre negro */
.placa-icono{display:inline-grid;place-items:center;width:48px;height:48px;flex:none;background:var(--negro);color:var(--sobre-noche);border-radius:var(--radio);box-shadow:var(--sombra-chica) var(--rojo)}
.placa-icono.bien{box-shadow:var(--sombra-chica) var(--bien)}
.placa-icono.ojo{box-shadow:var(--sombra-chica) var(--ambar)}
.placa-icono.mal{background:var(--acento);color:var(--superficie);box-shadow:var(--sombra-chica) var(--negro)}

/* ── grano de película en todos los negros grandes, como el negro de la web ── */
.barra,.pestanas,.tarjeta.portada,.rejilla,.resumen-vivo,.tarjeta.paso > .cab,.tarjeta.clave > .cab:is(:has(.n),:has(.pasos)){background-image:var(--grano),var(--fondo-luz,none);background-color:var(--negro)}
.tarjeta.portada{--fondo-luz:radial-gradient(60% 90% at 100% 0%,rgba(232,59,63,.32),transparent 62%)}
.rejilla,.resumen-vivo{--fondo-luz:radial-gradient(80% 120% at 0% 0%,rgba(232,59,63,.22),transparent 60%)}
.tarjeta.paso > .cab,.tarjeta.clave > .cab:is(:has(.n),:has(.pasos)){--fondo-luz:radial-gradient(60% 140% at 100% 0%,rgba(232,59,63,.28),transparent 62%)}

/* ═════ INICIO COMO TABLERO ═════ */
/* la portada se parte en dos: lo que toca hoy (izquierda) y el protagonista, lo facturado (derecha) */
.portada .tablero-cabeza{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:start}
.portada .contexto{font:800 12px/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--sobre-noche-3);margin:0 0 12px}
.protagonista{display:grid;gap:6px;padding:26px 28px;background:rgba(246,233,213,.04);border:1px solid var(--linea-noche);border-radius:var(--radio)}
.protagonista .rotulo{color:var(--sobre-noche-3)}
.protagonista .cifra{font:900 64px/.95 var(--titulo);font-stretch:105%;letter-spacing:-.03em;color:var(--sobre-noche);white-space:nowrap}
.protagonista .nota{color:var(--sobre-noche-2);font-size:15px;margin:0}
/* cambio contra el mes anterior: placa con flecha; el signo y la palabra dicen si sube o baja, no solo el color */
.delta{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:6px 10px;border-radius:var(--radio);font:800 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;background:var(--sobre-noche);color:var(--negro)}
.delta.baja{background:var(--fondo-2)}
/* gráfica de barras de 6 meses: SVG con <rect class="barra"> (el alto va en el atributo height, sin estilos en línea) */
.grafica{display:block;width:100%;height:auto;margin-top:14px;overflow:visible}
.grafica .barra{fill:rgba(246,233,213,.22);transform-box:fill-box;transform-origin:50% 100%;animation:crece .7s var(--entra) backwards}
.grafica .barra.actual{fill:var(--rojo)}
.grafica .barra:nth-of-type(2){animation-delay:60ms}.grafica .barra:nth-of-type(3){animation-delay:120ms}.grafica .barra:nth-of-type(4){animation-delay:180ms}.grafica .barra:nth-of-type(5){animation-delay:240ms}.grafica .barra:nth-of-type(6){animation-delay:300ms}
.grafica text{fill:var(--sobre-noche-3);font:700 12px var(--ui);letter-spacing:.06em;text-transform:uppercase}
.grafica text.actual{fill:var(--sobre-noche)}
.grafica .base{stroke:var(--linea-noche);stroke-width:1}
@keyframes crece{from{transform:scaleY(0)}to{transform:none}}

/* lo que toca hoy, sobre el negro: filas con su placa de ícono y su acción */
.portada #i-toca{display:grid;gap:10px;margin-top:22px}
.tarjeta.portada .aviso{background:rgba(246,233,213,.05);border:1px solid var(--linea-noche);box-shadow:none;color:var(--sobre-noche);grid-template-columns:auto 1fr auto;align-items:center;padding:14px 16px}
.tarjeta.portada .aviso p{font-size:17px;color:var(--sobre-noche)}
.portada .aviso a,.portada .aviso .btn{grid-column:3;grid-row:1}
.portada .aviso a{color:var(--sobre-noche);white-space:nowrap}

/* tira de indicadores: tarjetas de papel con placa de ícono */
.indicadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:24px;margin:0 0 44px}
.kpi{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icono rotulo" "cifra cifra" "nota nota";gap:10px 14px;align-items:center;padding:24px 24px 22px;background:var(--superficie);border:2px solid var(--texto);border-radius:var(--radio);box-shadow:var(--sombra) var(--texto);transition:transform 180ms var(--entra),box-shadow 180ms var(--entra)}
.kpi:hover{transform:translate(-2px,2px);box-shadow:-4px 4px 0 var(--texto)}
.kpi .placa-icono{grid-area:icono}
.kpi .rotulo{grid-area:rotulo}
.kpi .cifra{grid-area:cifra;margin-top:6px}
.kpi .nota{grid-area:nota}
.kpi .rotulo{color:var(--rotulo)}
.kpi .cifra{font:900 44px/1 var(--titulo);font-stretch:105%;letter-spacing:-.02em;white-space:nowrap}
.kpi .cifra.texto{font-size:26px;font-stretch:85%}
.kpi .nota{margin:2px 0 0;font-size:15px}
.kpi.clave{box-shadow:var(--sombra) var(--rojo)}
.kpi.clave:hover{box-shadow:-4px 4px 0 var(--rojo)}

/* encabezado de sección con enlace a la derecha */
.seccion-cab{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 0 18px;padding-top:22px;border-top:2px solid var(--texto)}
.seccion-cab h2{margin:0}
.seccion-cab a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font:800 13px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--texto)}
.seccion-cab a .icono{transition:transform 180ms var(--entra)}
.seccion-cab a:hover .icono{transform:translateX(4px)}

/* ═════ TARJETAS DE FACTURA (Inicio «últimas» y la lista de Facturas) ═════ */
.facturas-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:20px;margin:0 0 44px;padding:0;list-style:none}
.factura-tarjeta{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"mono quien quien" "mono numero numero" "monto monto estado";gap:4px 14px;align-items:center;padding:18px 18px 16px;background:var(--superficie);border:2px solid var(--texto);border-radius:var(--radio);box-shadow:var(--sombra-chica) var(--texto);color:var(--texto);text-decoration:none;transition:transform 180ms var(--entra),box-shadow 180ms var(--entra)}
.factura-tarjeta:hover{transform:translate(-3px,3px);box-shadow:-1px 1px 0 var(--texto)}
.factura-tarjeta:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.monograma{grid-area:mono;display:grid;place-items:center;width:48px;height:48px;background:var(--negro);color:var(--sobre-noche);border-radius:var(--radio);font:900 17px/1 var(--titulo);font-stretch:112%;letter-spacing:-.02em}
.factura-tarjeta .quien{grid-area:quien;font:800 17px/1.2 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.factura-tarjeta .numero{grid-area:numero;font:600 12px/1.3 var(--ui);letter-spacing:.04em;color:var(--texto-suave);font-variant-numeric:tabular-nums}
.factura-tarjeta .monto{grid-area:monto;margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);text-align:left!important;font:900 26px/1 var(--titulo);font-stretch:105%;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.factura-tarjeta .estado{grid-area:estado;justify-self:end;margin-top:12px;padding-top:12px}
.factura-tarjeta.anulada .monto{color:var(--texto-suave);text-decoration:line-through}
/* el estado lleva ícono + palabra en una placa cuadrada (sin píldoras) */
.estado{display:inline-flex;align-items:center;gap:6px}
.estado .icono{width:14px;height:14px}
.estado.placa{padding:5px 8px;border-radius:var(--radio);border:1.5px solid currentColor}

/* la lista de Facturas: la misma tabla, sus filas como tarjetas también en la computadora (clase .tarjetas en la tabla) */
.resumen-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 28px;background-image:var(--grano);background-color:var(--negro);color:var(--sobre-noche);border-radius:var(--radio);box-shadow:var(--sombra) var(--rojo)}
.resumen-lista > div{padding:20px 24px;border-left:1px solid var(--linea-noche)}
.resumen-lista > div:first-child{border-left:0}
.resumen-lista .rotulo{color:var(--sobre-noche-3)}
.resumen-lista b{display:block;margin-top:8px;font:900 26px/1 var(--titulo);font-stretch:105%;font-variant-numeric:tabular-nums}
/* cabecera negra de una lista (Facturas): título y cifras del mes sobre el negro con luz */
.cabeza-negra{margin:0 0 28px;padding:34px 34px 30px;background-image:var(--grano),radial-gradient(60% 120% at 100% 0%,rgba(232,59,63,.30),transparent 62%);background-color:var(--negro);color:var(--sobre-noche);border-radius:var(--radio);box-shadow:var(--sombra) var(--rojo)}
.cabeza-negra .cab{margin-bottom:22px}
.cabeza-negra .resumen-lista{margin:0;background:none;box-shadow:none;border-top:1px solid var(--linea-noche);border-radius:0}
.cabeza-negra .resumen-lista > div{padding:18px 24px 0 0}
.cabeza-negra .resumen-lista > div + div{padding-left:24px}
.cabeza-negra .resumen-lista b{font-size:44px}
.tabla.tarjetas td:last-child .btn{box-shadow:none}
.tabla.tarjetas tbody tr:hover td:last-child .btn{box-shadow:var(--sombra-chica) var(--rojo)}
/* la gráfica dice su cifra y el promedio */
.grafica .valor{fill:var(--sobre-noche);font:900 13px var(--titulo);letter-spacing:0;text-transform:none}
.grafica .promedio{stroke:var(--sobre-noche-3);stroke-width:1;stroke-dasharray:4 4}
.grafica .promedio-txt{fill:var(--sobre-noche-3);font:700 12px var(--ui);text-transform:none;letter-spacing:0}
/* «Por cobrar» es lo que más importa de la tira: sombra ámbar más honda */
.kpi.cobrar{box-shadow:var(--sombra-honda) var(--ambar)}
.kpi.cobrar:hover{box-shadow:-6px 6px 0 var(--ambar)}
.tabla-caja:has(.tabla.tarjetas){border:0;background:none;overflow:visible}
.tabla.tarjetas,.tabla.tarjetas tbody{display:block}
.tabla.tarjetas thead{display:none}
.tabla.tarjetas tbody{display:grid;gap:14px}
.tabla.tarjetas tbody tr{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) auto auto;align-items:center;gap:6px 24px;padding:16px 18px;background:var(--superficie);border:2px solid var(--texto);border-radius:var(--radio);box-shadow:var(--sombra-chica) var(--texto);transition:transform 180ms var(--entra),box-shadow 180ms var(--entra)}
.tabla.tarjetas tbody tr:hover{transform:translate(-3px,3px);box-shadow:-1px 1px 0 var(--texto)}
.tabla.tarjetas tbody tr:hover td{background:none}
.tabla.tarjetas td{display:block;padding:0;border:0;white-space:normal}
.tabla.tarjetas td[data-r=Cliente]{grid-column:1;grid-row:1;font:800 17px/1.2 var(--ui)}
.tabla.tarjetas td[data-r=Número]{grid-column:1;grid-row:2;font-size:12px;letter-spacing:.04em;color:var(--texto-suave)}
.tabla.tarjetas td[data-r=Fecha]{grid-column:2;grid-row:1/3;color:var(--texto-suave)}
.tabla.tarjetas td[data-r=Estado]{grid-column:3;grid-row:1/3}
.tabla.tarjetas td[data-r=Total]{grid-column:4;grid-row:1/3;font:900 26px/1 var(--titulo);font-stretch:105%;text-align:right}
.tabla.tarjetas td:last-child{grid-column:5;grid-row:1/3}

/* ═════ NUEVA FACTURA COMO FLUJO GUIADO ═════ */
/* pasos visuales arriba: hecho · actual · lo que falta, con la línea que se llena */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 30px;padding:0;list-style:none;counter-reset:paso}
.pasos li{position:relative;display:grid;gap:8px;padding-top:18px;font:800 12px/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave);counter-increment:paso}
.pasos li::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--linea)}
.pasos li::after{content:"";position:absolute;inset:0 auto auto 0;height:4px;width:0;background:var(--texto);transition:width .6s var(--entra)}
.pasos li.hecho::after{width:100%}
.pasos li.actual::after{width:50%;background:var(--rojo)}
.pasos li span{font:900 26px/1 var(--titulo);font-stretch:112%;letter-spacing:-.02em;text-transform:none;color:var(--linea)}
.pasos li span::before{content:counter(paso,decimal-leading-zero)}
.pasos li.hecho,.pasos li.actual{color:var(--texto)}
.pasos li.hecho span{color:var(--texto)}
.pasos li.actual span{color:var(--acento)}
:is(.tarjeta.paso,.tarjeta.clave) > .cab .pasos li{color:var(--sobre-noche-3)}
:is(.tarjeta.paso,.tarjeta.clave) > .cab .pasos li.hecho,:is(.tarjeta.paso,.tarjeta.clave) > .cab .pasos li.actual{color:var(--sobre-noche)}
:is(.tarjeta.paso,.tarjeta.clave) > .cab .pasos li::before{background:var(--linea-noche)}
:is(.tarjeta.paso,.tarjeta.clave) > .cab .pasos li.hecho::after{background:var(--sobre-noche)}
:is(.tarjeta.paso,.tarjeta.clave) > .cab .pasos li span{color:var(--linea-noche)}
:is(.tarjeta.paso,.tarjeta.clave) > .cab .pasos li.hecho span{color:var(--sobre-noche)}
:is(.tarjeta.paso,.tarjeta.clave) > .cab .pasos li.actual span{color:var(--rojo)}
:is(.tarjeta.paso,.tarjeta.clave) > .cab .pasos{margin:22px 0 0;width:100%}

/* el formulario y, al lado, el resumen en vivo (en el teléfono, el resumen es el pie pegajoso) */
.flujo{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
.flujo > .tarjeta.paso{max-width:none;margin:0}
.resumen-vivo{position:sticky;top:24px;display:grid;gap:16px;padding:26px 26px 28px;color:var(--sobre-noche);border:2px solid var(--negro);border-radius:var(--radio);box-shadow:var(--sombra) var(--rojo)}
.resumen-vivo .rotulo{color:var(--sobre-noche-3)}
.resumen-vivo .para{display:grid;gap:4px;padding-bottom:16px;border-bottom:1px solid var(--linea-noche)}
.resumen-vivo .para b{font:800 17px/1.3 var(--ui);color:var(--sobre-noche)}
.resumen-vivo .para span{font-size:15px;color:var(--sobre-noche-2)}
.resumen-vivo dl{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0;font-variant-numeric:tabular-nums}
.resumen-vivo dt{color:var(--sobre-noche-2)}
.resumen-vivo dd{margin:0;text-align:right;font-weight:800}
.resumen-vivo .nota-total{display:grid;gap:6px;padding-top:16px;border-top:1px solid var(--linea-noche);color:var(--sobre-noche-3);font:800 12px/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase}
.resumen-vivo .nota-total b{font:900 44px/1 var(--titulo);font-stretch:105%;letter-spacing:-.02em;color:var(--sobre-noche);text-transform:none}
.resumen-vivo .btn{width:100%}
.resumen-vivo .btn.primario{border-color:var(--sobre-noche);box-shadow:var(--sombra) var(--sobre-noche)}
.resumen-vivo .btn.primario:hover{--sombra-color:var(--sobre-noche)}
.resumen-vivo :focus-visible{outline-color:var(--sobre-noche)}
/* el total cambia: un destello rojo debajo (el JS pone y quita la clase .cambia) */
.cambia{animation:destello .6s var(--entra)}
@keyframes destello{0%{box-shadow:inset 0 -4px 0 var(--rojo);transform:translateY(-2px)}100%{box-shadow:inset 0 -4px 0 transparent;transform:none}}

/* secciones numeradas dentro del formulario: 01 · 02 · 03 */
.tarjeta.paso{counter-reset:seccion}
.tarjeta.paso .subtitulo{display:flex;align-items:baseline;gap:14px;font-size:26px;line-height:1.05;margin-top:40px;counter-increment:seccion}
.tarjeta.paso .subtitulo::before{content:counter(seccion,decimal-leading-zero);font:900 17px/1 var(--titulo);font-stretch:112%;color:var(--acento);letter-spacing:.02em}
.tarjeta.paso > .cab + .subtitulo,.tarjeta.paso > .cab + .aviso + .subtitulo,.tarjeta.paso > .cab + .aviso[hidden] + .subtitulo{margin-top:6px;padding-top:0;border-top:0}

/* casillas para tocar en vez de escribir (radios con cara de tarjeta), con su ícono y el visto al elegir */
.opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.opciones.chicas{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.opciones input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.opciones label{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;min-height:72px;padding:14px 16px;background:var(--superficie);border:2px solid var(--borde-campo);border-radius:var(--radio);cursor:pointer;font:800 17px/1.2 var(--ui);text-align:left;transition:border-color 140ms,box-shadow 180ms var(--entra),transform 180ms var(--entra),background-color 140ms}
.opciones label .icono{grid-row:1/3;width:28px;height:28px;color:var(--texto-suave);transition:color 140ms}
.opciones label b{font:inherit}
.opciones label small{font:500 15px/1.2 var(--ui);color:var(--texto-suave)}
.opciones.chicas label{grid-template-columns:1fr;justify-items:center;text-align:center;min-height:52px;padding:10px 8px;font-size:17px}
.opciones label:hover{border-color:var(--texto);transform:translate(-2px,2px)}
.opciones input:checked + label{border-color:var(--texto);background:var(--superficie);box-shadow:var(--sombra) var(--rojo);animation:elige .32s var(--entra)}
.opciones input:checked + label .icono{color:var(--acento)}
/* el visto: un cuadrito negro con la palomita, arriba a la derecha */
.opciones input:checked + label::after{content:"";position:absolute;top:-10px;right:-10px;width:24px;height:24px;background:var(--negro);border-radius:var(--radio);box-shadow:inset 0 0 0 2px var(--negro)}
.opciones input:checked + label::before{content:"";position:absolute;z-index:1;top:-3px;right:-2px;width:5px;height:10px;border:solid var(--sobre-noche);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.opciones.chicas input:checked + label{box-shadow:var(--sombra-chica) var(--rojo);background:var(--negro);color:var(--sobre-noche);border-color:var(--negro)}
.opciones.chicas input:checked + label::after,.opciones.chicas input:checked + label::before{content:none}
.opciones input:focus-visible + label{outline:3px solid var(--foco);outline-offset:3px}
@keyframes elige{0%{transform:scale(.97)}60%{transform:scale(1.01)}100%{transform:none}}

/* cada línea de cobro es una ficha numerada, con la cantidad en botones − / + */
.lineas{counter-reset:linea;gap:16px}
.linea{position:relative;padding:18px 18px 18px 58px;background:var(--fondo);border:2px solid var(--texto);border-radius:var(--radio);counter-increment:linea}
.linea::before{content:counter(linea);position:absolute;left:0;top:0;bottom:0;width:40px;display:grid;place-items:center;background:var(--negro);color:var(--sobre-noche);font:900 17px/1 var(--titulo);font-stretch:112%}
.cantidad{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:stretch}
.cantidad input:not([type=checkbox]){text-align:center;border-radius:0;border-inline:0}
.cantidad button{display:grid;place-items:center;min-height:52px;padding:0;background:var(--superficie);border:2px solid var(--borde-campo);color:var(--texto);border-radius:var(--radio) 0 0 var(--radio);transition:background-color 120ms,transform 120ms}
.cantidad button + input + button,.cantidad input + button{border-radius:0 var(--radio) var(--radio) 0}
.cantidad button:hover{background:var(--fondo-2)}
.cantidad button:active{transform:scale(.92)}
.linea{grid-template-columns:150px minmax(0,1fr) auto;grid-template-areas:"que que que" "cant precio quitar";align-items:end}
.linea .que{grid-area:que}.linea .cant{grid-area:cant}.linea .precio{grid-area:precio}.linea .quitar{grid-area:quitar}
/* el rótulo de un grupo de casillas se lee como la etiqueta de un campo, no como un rótulo de sección */
.campo > .rotulo{font:800 15px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--texto)}

/* opcional plegado: <details class="opcional"> con su resumen como encabezado */
details.opcional{margin-top:40px;border-top:2px solid var(--texto);padding-top:18px}
details.opcional > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;cursor:pointer;font:900 26px/1.05 var(--titulo);font-stretch:112%;letter-spacing:-.02em}
details.opcional > summary::-webkit-details-marker{display:none}
details.opcional > summary small{font:600 15px/1.2 var(--ui);letter-spacing:0;color:var(--texto-suave)}
details.opcional > summary::after{content:"";width:12px;height:12px;flex:none;border:solid var(--acento);border-width:0 3px 3px 0;transform:rotate(45deg);transition:transform 220ms var(--entra)}
details.opcional[open] > summary::after{transform:rotate(225deg)}
details.opcional[open] > :not(summary){animation:entra .4s var(--entra) backwards}

/* ═════ teléfono ═════ */
@media (max-width:1100px){
  .portada .tablero-cabeza{grid-template-columns:1fr;gap:28px}
  .flujo{grid-template-columns:1fr}
  .resumen-vivo{position:sticky;top:auto;bottom:0;z-index:15;grid-template-columns:1fr auto;align-items:center;gap:10px 16px;padding:14px 18px;border-radius:0;box-shadow:0 -6px 0 var(--rojo);margin:0 -28px}
  .resumen-vivo .para,.resumen-vivo dl{display:none}
  .resumen-vivo .nota-total{padding:0;border:0}
  .resumen-vivo .nota-total b{font-size:26px}
  .resumen-vivo .btn{width:auto}
}
@media (max-width:760px){
  .protagonista{padding:20px 18px}
  .protagonista .cifra{font-size:44px}
  .resumen-lista{grid-template-columns:1fr}
  .resumen-lista > div{border-left:0;border-top:1px solid var(--linea-noche)}
  .resumen-lista > div:first-child{border-top:0}
  .tabla.tarjetas tbody tr{grid-template-columns:auto 1fr;gap:4px 14px}
  .tabla.tarjetas td[data-r=Cliente]{grid-column:1/-1}
  .tabla.tarjetas td[data-r=Número]{display:block;grid-column:1/-1}
  .tabla.tarjetas td[data-r=Fecha]{grid-column:1;grid-row:3}
  .tabla.tarjetas td[data-r=Estado]{grid-column:2;grid-row:3;justify-self:end}
  .tabla.tarjetas td[data-r=Total]{grid-column:1/-1;grid-row:4;text-align:left;margin-top:6px}
  .tabla.tarjetas td:last-child{grid-column:1/-1;grid-row:5;margin-top:8px}
  .tabla.tarjetas td:last-child .btn{width:100%}
  .tarjeta.portada .aviso{grid-template-columns:1fr}
  /* en el teléfono la acción principal va antes de la lista y a lo ancho */
  .portada .tablero-cabeza > div:first-child{display:flex;flex-direction:column}
  .portada .tablero-cabeza > div:first-child > p:has(#i-nueva){order:-1;margin:18px 0 4px}
  .portada .tablero-cabeza > div:first-child > p:has(#i-nueva) .btn{width:100%}
  .portada .tablero-cabeza > div:first-child > .contexto{order:-3}
  .portada .tablero-cabeza > div:first-child > .cab{order:-2}
  .portada .aviso a,.portada .aviso .btn{grid-column:1/-1;grid-row:auto}
  .resumen-vivo{margin:0 -16px;padding:12px 16px}
  .resumen-vivo .btn{padding:14px 14px;font-size:15px}
  .linea{grid-template-columns:1fr;grid-template-areas:"que" "cant" "precio" "quitar";padding:16px 14px 16px 52px}
  .cantidad{grid-template-columns:52px minmax(64px,1fr) 52px}
  .factura-tarjeta{grid-template-areas:"mono quien" "mono numero" "monto monto" "estado estado";grid-template-columns:auto 1fr}
  .factura-tarjeta .estado{justify-self:start;margin-top:4px;padding-top:0}
  .cabeza-negra{padding:24px 18px 22px}
  .cabeza-negra .resumen-lista > div,.cabeza-negra .resumen-lista > div + div{padding:14px 0 0}
  .cabeza-negra .resumen-lista b{font-size:26px}
  .linea::before{width:36px}
  .opciones{grid-template-columns:1fr}
  .pasos li span{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .grafica .barra,.opciones input:checked + label,.cambia,details.opcional[open] > :not(summary){animation:none}
  .kpi,.factura-tarjeta,.tabla.tarjetas tbody tr,.opciones label{transition:none}
}
.tarjeta:has(> .cabeza-negra){border-top:0;padding-top:0}

/* ── correcciones de la integración (16 oct 2026) ── */
/* una cabecera con avance (paso 2, «Emitida») va siempre en columna: el título arriba, los pasos debajo */
.tarjeta .cab:has(.pasos){flex-direction:column;align-items:stretch}
.tarjeta .cab:has(.pasos) .pasos{margin-top:22px}
.tarjeta.clave > .cab:has(.pasos):not(:has(.n)){margin:-32px -34px 28px;padding:28px 34px 26px;color:var(--sobre-noche)}
.tarjeta.clave > .cab:has(.pasos) h1 em{background:var(--sobre-noche);color:var(--negro)}
@media (max-width:760px){
  .tarjeta.clave > .cab:has(.pasos):not(:has(.n)){margin:-22px -18px 22px;padding:22px 18px 20px}
  .pasos li{letter-spacing:.04em;font-size:12px;overflow-wrap:anywhere}
}
/* gráfica sin datos: en vez de barras vacías, una frase en un recuadro punteado (el JS pone p.vacio si todo vale 0) */
.protagonista .vacio{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:22px 18px;border:1px dashed var(--linea-noche);border-radius:var(--radio);color:var(--sobre-noche-2);font:600 15px/1.4 var(--ui)}
.protagonista .vacio .icono{color:var(--sobre-noche-3)}
/* un mes en cero se ve como una raya, no como un hueco */
.grafica .barra.cero{fill:var(--linea-noche)}
/* el título de una lista no se parte a media palabra: si no cabe, baja el tamaño */
.cabeza-negra h1{overflow-wrap:normal;hyphens:manual}
@media (max-width:760px){.cabeza-negra h1{font-size:36px;line-height:1}}