/* bigger Control · tema claro (15 oct 2026, diseñador)
   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:6px;
  --sombra:4px 4px 0;
}

*{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:1.5px solid var(--texto)}
.barra .caja{display:flex;align-items:center;gap:24px;min-height:72px;padding:10px 28px;max-width:1100px;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:1100px;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 - 1100px) / 2 + 28px));margin:0;min-width:240px;padding:6px;background:var(--superficie);color:var(--texto);border:1.5px 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:1100px;margin:0 auto;padding:22px 28px 70px}

/* ── tarjeta (el «panel» de la app) ── */
.tarjeta{background:var(--superficie);border:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1.5px 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:1100px){.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}
}