/* Cobros y Caja — papel de seguridad y tinta calcográfica. Móvil primero. */

@font-face { font-family: "Archivo"; src: url("/fuentes/Archivo-Medium.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fuentes/Archivo-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fuentes/Archivo-Bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("/fuentes/ArchivoExpanded-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("/fuentes/ArchivoExpanded-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --suelo: #EEF1EC;
  --hoja: #FAFBF8;
  --hoja-alt: #F2F5F0;
  --filete: #D5DBD3;
  --filete-fuerte: #AEB8AE;
  --tinta: #17201C;
  --tinta-2: #47544D;
  --tinta-3: #5F6B64;
  --carril: #17201C;
  --carril-hover: #222E28;
  --carril-texto: #E9EDE7;
  --carril-texto-2: #9DAAA2;
  --acento-suave: #E3E8E1;
  --cuadre: #1F7A4D;
  --cuadre-suave: #E1F0E7;
  --falta: #B3261E;
  --falta-suave: #FBE8E6;
  --efectivo: #2F6DB5;
  --talon: #C27A1C;
  --pagare: #7A4FA0;
  --datafono: #0E9488;

  --texto: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cifras: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --radio: 14px;
  --radio-control: 10px;
  --canal: 16px;
  --alto-pestanas: 62px;
  --abajo: env(safe-area-inset-bottom, 0px);
  --suave: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--filete-fuerte) transparent; scrollbar-width: thin; }
body {
  margin: 0; background: var(--suelo); color: var(--tinta);
  font: 500 1rem/1.45 var(--texto); font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  min-height: 100vh; min-height: 100dvh; overflow-wrap: anywhere;
}
body.fuera { background: var(--carril); }
::selection { background: rgb(23 32 28 / 0.18); }
h1, h2, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; }
h2 label { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
strong { font-weight: 700; }
small { font-size: 0.8125rem; color: var(--tinta-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
input, textarea, select { caret-color: var(--tinta); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.ico { flex: none; }

.cifra, .cifra-xl { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.cifra-xl { font-family: var(--cifras); font-weight: 800; font-size: clamp(1.75rem, 7.4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.01em; }
.sub { color: var(--tinta-2); font-size: 0.875rem; }
.etq { color: var(--tinta-2); font-size: 0.8125rem; font-weight: 600; }
.cargando, .sin-js { color: var(--carril-texto-2); text-align: center; padding: 40vh 24px 0; font-weight: 600; }
.sin-js { color: var(--tinta); padding-top: 24px; background: var(--hoja); }

/* ------------------------------------------------------------------ controles */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border: 1px solid var(--filete-fuerte); border-radius: var(--radio-control);
  background: var(--hoja); color: var(--tinta); font-weight: 600; text-decoration: none; text-align: center;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s var(--suave);
}
.boton:active:not(:disabled) { transform: scale(0.98); }
.boton.primario { background: var(--tinta); border-color: var(--tinta); color: var(--hoja); }
.boton.cuadre { background: var(--cuadre); border-color: var(--cuadre); color: #fff; }
.boton.peligro { background: var(--falta); border-color: var(--falta); color: #fff; }
.boton.pequeno { min-height: 40px; padding: 6px 14px; font-size: 0.9375rem; }
.boton.ancho { width: 100%; }
.boton:disabled, .boton.apagado { opacity: 0.45; pointer-events: none; }
.boton.ocupado { opacity: 0.7; }
.botones { display: flex; flex-wrap: wrap; gap: 10px; }
.botones.separados { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--filete); }

.enlace { background: none; border: 0; padding: 10px 2px; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-align: left; }
.enlace.centro { display: block; margin-inline: auto; text-align: center; }
.enlace:disabled { text-decoration: none; color: var(--tinta-2); }
.fila-enlaces { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 18px; }

.icono-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--radio-control); background: none; color: var(--tinta); text-decoration: none;
  transition: background-color 0.15s;
}
.icono-btn:disabled { opacity: 0.3; }

.campo { display: grid; gap: 6px; }
.campo + .campo, .campo + .boton, .campo + .botones { margin-top: 16px; }
label, .campo > label { font-size: 0.875rem; font-weight: 600; color: var(--tinta-2); }
.ayuda { font-size: 0.8125rem; color: var(--tinta-2); }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; background: #fff; border: 1px solid var(--filete-fuerte); border-radius: var(--radio-control);
  font-size: 1rem; appearance: none; -webkit-appearance: none;
}
textarea { resize: vertical; min-height: 72px; line-height: 1.4; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input::placeholder, textarea::placeholder { color: #6B766F; opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--tinta); border-radius: var(--radio-control); }
input:disabled { background: var(--hoja-alt); color: var(--tinta-2); -webkit-text-fill-color: var(--tinta-2); opacity: 1; }
.con-ojo, .con-euro { position: relative; }
.con-ojo input { padding-right: 52px; }
.ojo { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--tinta-2); border-radius: 8px; }
.con-euro > span { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--tinta-3); font-weight: 600; pointer-events: none; }
.con-euro input { padding-right: 36px; }
.codigo { font-family: var(--cifras); font-weight: 800; font-size: 1.5rem !important; letter-spacing: 0.3em; text-align: center; }

.casilla { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; color: var(--tinta); font-size: 0.9375rem; font-weight: 500; cursor: pointer; }
.casilla input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--tinta-3); border-radius: 7px; background: #fff; display: grid; place-items: center; }
.casilla input::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 2.2px 2.2px; rotate: -45deg; translate: 0 -1.5px; scale: 0; transition: scale 0.15s var(--suave); }
.casilla input:checked { background: var(--cuadre); border-color: var(--cuadre); }
.casilla input:checked::after { scale: 1; }
.casilla input:disabled { opacity: 0.6; }

.fallo, .aviso-campo { display: flex; gap: 8px; padding: 10px 14px; border-radius: var(--radio-control); background: var(--falta-suave); color: #8C1D17; font-size: 0.9375rem; font-weight: 600; }
.fallo { margin-top: 16px; }
.aviso-campo.nota { background: var(--acento-suave); color: var(--tinta); font-weight: 500; }

.punto { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-3); }
.punto.cuadro { border-radius: 3px; width: 12px; height: 12px; }
.punto.efectivo, .tramo.efectivo { background: var(--efectivo); }
.punto.talon, .tramo.talon { background: var(--talon); }
.punto.pagare, .tramo.pagare { background: var(--pagare); }
.punto.datafono, .tramo.datafono { background: var(--datafono); }

.marca-estado { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--acento-suave); color: var(--tinta); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.marca-estado.cuadra { background: var(--cuadre-suave); color: #14573A; }
.marca-estado.falta { background: var(--falta-suave); color: #8C1D17; }
.marca-estado.abierta { background: #FBF0DC; color: #6F4708; }
strong > .marca-estado, dd > .marca-estado { margin-left: 8px; }

.hoja { position: relative; background: var(--hoja); border: 1px solid var(--filete); border-radius: var(--radio); padding: 18px 16px; }
.hoja > h2 { margin-bottom: 6px; }
.hoja > h2 + .sub { margin-bottom: 12px; }
.vacio { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 16px; color: var(--tinta-2); }
.vacio h2 { color: var(--tinta); font-size: 1.125rem; }
.vacio p { max-width: 44ch; }
.vacio .boton { margin-top: 8px; }
.guilloche { position: absolute; pointer-events: none; }
.solo-movil { display: block; }

/* ------------------------------------------------------------------ acceso */

.acceso { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: var(--carril); }
.acceso-tinta { position: relative; overflow: hidden; color: var(--carril-texto); padding: calc(22px + env(safe-area-inset-top, 0px)) 24px 30px; }
.acceso-fondo { width: 440px; height: 440px; right: -150px; top: -170px; color: rgb(233 237 231 / 0.13); }
.acceso-marca { position: relative; display: flex; align-items: center; gap: 12px; font-family: var(--cifras); font-weight: 800; font-size: 1.25rem; }
.acceso-lema { display: none; }
.acceso-hoja { background: var(--suelo); border-radius: 22px 22px 0 0; padding: 30px 22px calc(24px + var(--abajo)); display: flex; flex-direction: column; }
.acceso-caja { width: 100%; max-width: 400px; margin: 0 auto; }
.formulario h1 { font-size: 1.75rem; margin-bottom: 8px; }
.formulario > .sub { font-size: 0.9375rem; margin-bottom: 22px; max-width: 46ch; }
.formulario > .sub + .sub { margin-top: -10px; }
.formulario .boton.ancho { margin-top: 22px; }
.formulario .enlace.centro, .formulario .fila-enlaces { margin-top: 8px; }
.acceso-pie { margin-top: auto; padding-top: 28px; text-align: center; font-size: 0.8125rem; color: var(--tinta-2); }

/* ------------------------------------------------------------------ armazón */

.armazon { min-height: 100vh; min-height: 100dvh; }
.carril { display: none; }
.principal { padding: calc(18px + env(safe-area-inset-top, 0px)) var(--canal) calc(var(--alto-pestanas) + var(--abajo) + 28px); max-width: 1320px; outline: none; overflow-x: clip; }
.vista { display: grid; gap: 16px; animation: entra 0.28s var(--suave); }
@keyframes entra { from { opacity: 0; translate: 0 6px; } }

.pestanas {
  position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--carril); padding: 6px 4px calc(6px + var(--abajo)); height: calc(var(--alto-pestanas) + var(--abajo));
}
.pestanas .nav-item { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 50px; color: var(--carril-texto-2); text-decoration: none; font-size: 0.6875rem; font-weight: 600; border-radius: 12px; }
.pestanas .nav-item .ico { width: 44px; height: 26px; padding: 3px 0; border-radius: 13px; transition: background-color 0.2s, color 0.2s; }
.pestanas .nav-item.activo { color: var(--carril-texto); }
.pestanas .nav-item.activo .ico { background: var(--suelo); color: var(--tinta); }

.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.cabecera .sub { margin-top: 4px; max-width: 62ch; }
.nav-semana { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; margin-left: -10px; }
.nav-semana-txt { min-width: 0; flex: 1 1 auto; padding: 0 2px; }
.nav-semana .boton { margin-left: 6px; flex: none; }
.intro { margin-top: -6px; max-width: 64ch; }

.avisos { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(var(--alto-pestanas) + var(--abajo) + 12px); display: grid; justify-items: center; pointer-events: none; }
.aviso-flotante { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 520px; min-height: 48px; padding: 2px 16px; border-radius: 12px; background: var(--tinta); color: var(--hoja); font-size: 0.9375rem; box-shadow: 0 10px 28px -8px rgb(23 32 28 / 0.45); animation: sube 0.3s var(--suave); }
.aviso-flotante.error { background: #7E1A14; }
.aviso-flotante .enlace { color: #fff; padding: 4px 0 4px 10px; min-height: 44px; flex: none; }
@keyframes sube { from { opacity: 0; translate: 0 12px; } }

.dialogo { width: min(440px, calc(100vw - 32px)); padding: 22px; border: 0; border-radius: 16px; background: var(--hoja); color: var(--tinta); box-shadow: 0 24px 60px -12px rgb(23 32 28 / 0.4); }
.dialogo::backdrop { background: rgb(23 32 28 / 0.5); }
.dialogo h2 { font-size: 1.1875rem; margin-bottom: 8px; }
.dialogo p { color: var(--tinta-2); font-size: 0.9375rem; }
.dialogo .campo { margin-top: 16px; }
.dialogo-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.clave-provisional { margin-top: 16px; padding: 14px; border: 1px dashed var(--filete-fuerte); border-radius: 10px; background: #fff; color: var(--tinta) !important; font-family: var(--cifras); font-weight: 800; font-size: 1.25rem !important; text-align: center; letter-spacing: 0.04em; user-select: all; -webkit-user-select: all; }

.banda { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: var(--radio); background: #FBF0DC; color: #5A3A06; font-size: 0.9375rem; }
.banda p { flex: 1 1 200px; }
.banda .boton { background: transparent; border-color: #B98B3C; color: inherit; }

.lista-menu { padding: 6px 8px; }
.menu-fila { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--filete); background: none; text-decoration: none; font-weight: 600; text-align: left; }
.menu-fila:last-child { border-bottom: 0; }
.menu-fila span { flex: 1; }
.menu-fila .ico:last-child { color: var(--tinta-3); }

/* ------------------------------------------------------------------ cobros */

.cobros, .arqueo, .clientes { display: grid; gap: 16px; }
.total-semana { position: relative; display: grid; justify-items: start; gap: 2px; width: 100%; }
.total-semana .etq, .total-semana .sub { position: relative; }
.total-semana .cifra-xl { position: relative; }
.total-fondo { display: none; }

.talonario { padding: 16px 16px 8px; display: grid; gap: 14px; }
.pregunta { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.pista { color: var(--tinta-2); font-size: 0.8125rem; min-height: 1.2em; margin-top: 2px; }
.seg { display: grid; gap: 6px; min-width: 0; position: relative; }
.seg > label, .seg > .etq { font-size: 0.8125rem; font-weight: 600; color: var(--tinta-2); }

.dias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dia { position: relative; display: grid; justify-items: center; gap: 0; padding: 6px 0 7px; min-height: 56px; border: 1px solid var(--filete-fuerte); border-radius: var(--radio-control); background: #fff; transition: background-color 0.18s, color 0.18s, border-color 0.18s; }
.dia-letra { font-size: 0.75rem; font-weight: 600; color: var(--tinta-2); }
.dia-num { font-family: var(--cifras); font-weight: 800; font-size: 1.125rem; line-height: 1.1; }
.dia-hoy { position: absolute; top: -8px; padding: 0 6px; border-radius: 999px; background: var(--cuadre); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; }
.dia.elegido { background: var(--tinta); border-color: var(--tinta); color: var(--hoja); }
.dia.elegido .dia-letra { color: var(--carril-texto-2); }
.dia:disabled { background: var(--hoja-alt); border-color: var(--filete); color: #6B766F; }
.dia:disabled .dia-letra { color: #6B766F; }

.tira { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.seg-cliente { grid-column: 1 / -1; }
.tira input { font-size: 1.0625rem; font-weight: 600; }
.seg-importe input { font-family: var(--texto); font-size: 1.1875rem; font-weight: 700; }
.seg.activo > label { color: var(--tinta); }

.sugerencias { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); max-height: 264px; overflow: auto; padding: 4px; background: #fff; border: 1px solid var(--filete-fuerte); border-radius: 12px; box-shadow: 0 14px 32px -10px rgb(23 32 28 / 0.3); }
.sugerencias li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.sugerencias li.elegida { background: var(--acento-suave); }
.sug-nombre { font-weight: 600; }
.sug-pista { color: var(--tinta-2); font-size: 0.8125rem; white-space: nowrap; }
.sugerencias .sug-nuevo { display: block; color: var(--tinta-2); font-size: 0.8125rem; cursor: default; min-height: 0; }

.formas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.forma { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--filete-fuerte); border-radius: var(--radio-control); background: #fff; font-weight: 700; font-size: 1.0625rem; text-align: left; transition: background-color 0.15s, border-color 0.15s, transform 0.15s var(--suave); }
.forma .punto { width: 12px; height: 12px; }
.forma span:nth-child(2) { flex: 1; }
.forma kbd { display: none; }
.forma:active { transform: scale(0.97); }
.forma.elegida { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); background: var(--hoja-alt); }
.formas.ocupado { opacity: 0.6; pointer-events: none; }
.talonario-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; border-top: 1px dashed var(--filete-fuerte); }

.cerrada-nota { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start; }
.cerrada-nota > .ico { margin-top: 2px; color: var(--cuadre); }
.cerrada-nota .sub { margin-top: 4px; }
.cerrada-nota .botones { grid-column: 1 / -1; }

.tabla-cobros { padding: 4px 16px; }
.cobro.cobro-cab { display: none; }
.cobro { display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 10px; row-gap: 3px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--filete); }
.lista-cobros .cobro:last-child { border-bottom: 0; }
.lista-cobros:not(.solo-lectura) .cobro { cursor: pointer; }
.c-cliente { grid-column: 1 / 4; grid-row: 1; font-weight: 600; }
.c-importe { grid-column: 4; grid-row: 1; font-weight: 700; text-align: right; }
.c-fecha, .c-factura, .c-forma { grid-row: 2; font-size: 0.8125rem; color: var(--tinta-2); }
.c-forma { display: flex; align-items: center; gap: 6px; }
.c-forma .punto { width: 8px; height: 8px; }
.a-cuenta { margin-left: 4px; text-decoration: none; color: var(--tinta); font-weight: 700; }
.fila-acciones { grid-column: 1 / -1; grid-row: 3; display: none; gap: 8px; padding-top: 8px; }
.cobro.abierta .fila-acciones { display: flex; }
.fila-acciones .icono-btn { flex: 1; border: 1px solid var(--filete-fuerte); background: #fff; font-weight: 600; font-size: 0.9375rem; padding: 0 12px; }
.cobro.nuevo { animation: recien 1.5s var(--suave); }
.cobro.editando .c-cliente::after { content: " · corrigiendo"; color: var(--tinta-2); font-weight: 500; font-size: 0.8125rem; }
@keyframes recien { from { background: var(--cuadre-suave); box-shadow: 0 0 0 8px var(--cuadre-suave); translate: 0 -8px; opacity: 0; } 25% { translate: 0; opacity: 1; } }

.pie-cobros { display: grid; gap: 14px; }
.totales-forma { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 0.875rem; }
.tot { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.tot-nombre { color: var(--tinta-2); }
.tot strong { grid-column: 2; }
.pie-cobros .boton { width: 100%; }

/* ------------------------------------------------------------------ arqueo */

.arqueo-rejilla, .arqueo-contar { display: grid; gap: 16px; }
.arqueo-contar { container-type: inline-size; grid-template-columns: minmax(0, 1fr); }
.arqueo { padding-bottom: 64px; }
.piezas { display: grid; gap: 22px; }
.grupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.fila-pieza { display: grid; grid-template-columns: 66px auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 54px; }
.pieza { width: 66px; height: auto; display: block; }
.por { display: none; color: var(--tinta-3); }
.paso { display: flex; align-items: center; gap: 2px; }
.paso .icono-btn { min-width: 40px; }
.cantidad { width: 54px !important; min-height: 42px !important; padding: 4px !important; text-align: center; font-weight: 700; font-size: 1.0625rem !important; }
.subtotal { text-align: right; font-weight: 600; font-size: 0.9375rem; }
.subtotal.vacio { color: var(--tinta-3); padding: 0; display: block; }

.docs li { border-bottom: 1px solid var(--filete); }
.docs li:last-child { border-bottom: 0; }
.docs .casilla { align-items: center; }
.doc-txt { flex: 1; display: grid; min-width: 0; }
.campo-grande input { font-size: 1.25rem; font-weight: 700; min-height: 54px; }
.campo-grande { margin-bottom: 4px; }

.la-cuenta { overflow: hidden; padding-top: 20px; }
.la-cuenta > :not(.guilloche) { position: relative; }
.cuenta-fondo { width: 320px; height: 320px; right: -120px; top: -130px; color: rgb(23 32 28 / 0.1); }
.linea { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.linea-nombre { flex: none; }
.puntos { flex: 1; border-bottom: 1px dotted var(--filete-fuerte); translate: 0 -4px; min-width: 12px; }
.linea.total { justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 1.5px solid var(--tinta); font-weight: 700; font-size: 1.0625rem; }
.linea.sec { justify-content: space-between; color: var(--tinta-2); padding-bottom: 12px; border-bottom: 3px double var(--tinta); }
.detalle { font-size: 0.8125rem; color: var(--tinta-2); margin: -4px 0 4px; }
.detalle.falta { color: var(--falta); }
.detalle.cuadra { color: var(--cuadre); }
.caja-dif { position: relative; padding: 16px 0 6px; min-height: 132px; }
.caja-dif > .etq, .caja-dif > .dif { display: block; }
.caja-dif > .dif { margin: 4px 0 6px; }
.dif-txt { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.caja-dif[data-estado="falta"] .dif, .caja-dif[data-estado="falta"] .dif-txt { color: var(--falta); }
.caja-dif[data-estado="cuadra"] .dif, .caja-dif[data-estado="cuadra"] .dif-txt { color: var(--cuadre); }
.caja-dif[data-estado="nada"] .dif-txt { color: var(--tinta-2); font-weight: 500; }
.sello-caja { position: absolute; right: -8px; top: 6px; width: 118px; color: var(--cuadre); rotate: -9deg; opacity: 0; pointer-events: none; }
.sello-caja .sello { width: 118px; height: 118px; display: block; }
.sello-caja.estampado { opacity: 0.92; }
.sello-caja.golpe { animation: sello 0.42s var(--suave); }
@keyframes sello { from { opacity: 0; scale: 1.7; filter: blur(3px); } 60% { opacity: 1; filter: blur(0); } }
.cuenta-acciones { display: grid; gap: 12px; margin-top: 10px; }
.motivo label { color: var(--falta); }
.guardado { font-size: 0.8125rem; color: var(--tinta-2); }
.nota-cierre { font-size: 0.9375rem; padding: 10px 14px; border-radius: 10px; background: var(--acento-suave); }

.barra-dif {
  position: fixed; z-index: 18; left: 0; right: 0; bottom: calc(var(--alto-pestanas) + var(--abajo));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px var(--canal);
  border: 0; border-top: 1px solid var(--filete-fuerte); background: var(--hoja); text-align: left;
  transition: translate 0.3s var(--suave), opacity 0.2s;
}
.barra-dif.oculta { translate: 0 110%; opacity: 0; pointer-events: none; }
.barra-izq { display: grid; font-weight: 700; font-size: 0.9375rem; }
.barra-dif > .cifra { font-family: var(--cifras); font-weight: 800; font-size: 1.375rem; }
.barra-dif[data-estado="falta"] { color: var(--falta); background: #FDF3F2; }
.barra-dif[data-estado="cuadra"] { color: var(--cuadre); background: #EEF7F1; }
.barra-dif[data-estado="nada"] > .cifra { color: var(--tinta-3); }

/* ------------------------------------------------------------------ para la oficina */

.oficina-rejilla, .oficina-hoja { display: grid; gap: 16px; min-width: 0; }
.semanas-lista { display: none; }
.oficina-elegir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.entre-fechas { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--filete); }
.dos-fechas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
input[type="date"] { min-width: 0; }
.entre-fechas.en-linea { grid-template-columns: 1fr 1fr; align-items: end; border-top: 0; padding-top: 6px; }
.entre-fechas.en-linea .campo { margin: 0; }
.entre-fechas.en-linea .boton { grid-column: 1 / -1; }
.oficina-acciones { display: grid; gap: 4px; }
.oficina-acciones .boton { flex: 1 1 auto; }
.opciones { display: flex; flex-wrap: wrap; gap: 0 24px; }
.correo-panel { display: grid; gap: 4px; }
.correo-panel .botones { margin-top: 14px; }

.papel { background: #fff; border-radius: 4px; padding: 26px 18px; box-shadow: 0 1px 2px rgb(23 32 28 / 0.08), 0 12px 32px -14px rgb(23 32 28 / 0.28); min-width: 0; }
.papel-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 20px; padding-bottom: 12px; border-bottom: 2px solid var(--tinta); }
.papel-cab h2 { font-family: var(--cifras); font-weight: 800; font-size: 1.25rem; }
.papel-cab p { color: var(--tinta-2); font-size: 0.9375rem; }
.papel-per { display: grid; text-align: right; font-size: 0.875rem; margin-left: auto; }
.papel-per span { color: var(--tinta-2); font-size: 0.8125rem; }
.papel-tabla { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.875rem; }
.papel-tabla th { text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--tinta-2); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--filete-fuerte); }
.papel-tabla td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--filete); vertical-align: baseline; }
.papel-tabla .num { text-align: right; padding-right: 0; font-weight: 600; }
.papel-tabla .sec { color: var(--tinta-2); white-space: nowrap; }
.papel-tabla tfoot td, .papel-tabla tfoot th { border-bottom: 0; border-top: 2px solid var(--tinta); padding-top: 12px; font-size: 0.8125rem; color: var(--tinta-2); }
.papel-tabla tfoot th { text-align: right; }
.papel-tabla tfoot .total { font-family: var(--cifras); font-weight: 800; font-size: 1.125rem; color: var(--tinta); }

/* ------------------------------------------------------------------ clientes */

.segmentos { display: flex; padding: 4px; border: 1px solid var(--filete); border-radius: 12px; background: var(--hoja); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.segmentos::-webkit-scrollbar { display: none; }
.segmentos button { flex: 1 0 auto; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 9px; background: none; font-weight: 600; font-size: 0.875rem; color: var(--tinta-2); white-space: nowrap; }
.segmentos .elegido { background: var(--tinta); color: var(--hoja); }
.cabecera-clientes { align-items: center; }
.resumen { font-size: 1.0625rem; line-height: 1.5; max-width: 70ch; }
.resumen .enlace { display: inline; padding: 0; min-height: 0; }
.clientes-rejilla, .clientes-col { display: grid; gap: 16px; min-width: 0; align-content: start; }
.puesto { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: baseline; width: 100%; padding: 10px 6px; margin: 0 -6px; width: calc(100% + 12px); border: 0; border-radius: 10px; background: none; text-align: left; }
.puesto.elegido { background: var(--acento-suave); }
.puesto-n { color: var(--tinta-2); font-size: 0.875rem; }
.puesto-nombre { font-weight: 600; }
.puesto .barra { grid-column: 2; height: 9px; border-radius: 5px; background: var(--tinta); width: var(--ancho); align-self: center; }
.puesto-sub { color: var(--tinta-2); font-size: 0.8125rem; text-align: right; white-space: nowrap; }
.meses { display: flex; align-items: stretch; gap: 6px; height: 200px; padding-top: 6px; border-bottom: 1px solid var(--filete-fuerte); margin-bottom: 26px; }
.mes { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.mes-barra { width: min(100%, 46px); height: var(--alto); min-height: 2px; border-radius: 4px 4px 0 0; background: #47544D; }
.mes.actual .mes-barra { background: var(--tinta); }
.mes-valor { font-size: 0.6875rem; font-weight: 700; }
.mes-etq { position: absolute; top: calc(100% + 6px); font-size: 0.75rem; color: var(--tinta-2); }
.mes.actual .mes-etq { color: var(--tinta); font-weight: 700; }
.apilada { display: flex; gap: 2px; height: 18px; border-radius: 6px; overflow: hidden; margin: 10px 0 16px; }
.tramo { flex: var(--parte) 0 0; min-width: 3px; }
.leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.leyenda dt { display: flex; align-items: center; gap: 8px; color: var(--tinta-2); font-size: 0.875rem; }
.leyenda dd { display: grid; padding-left: 20px; }
.leyenda dd strong { font-size: 1.125rem; }
.leyenda dd span { font-size: 0.8125rem; color: var(--tinta-2); }
.dormidos li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--filete); }
.dormidos li:last-child { border-bottom: 0; padding-bottom: 0; }
.dormidos li > div { display: grid; gap: 2px; min-width: 0; }
.dias-sin { display: grid; text-align: right; flex: none; }
.dias-sin strong { color: var(--falta); font-size: 1.0625rem; }

/* ------------------------------------------------------------------ historial y ajustes */

.h-semana { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--filete); }
.h-semana:last-child { border-bottom: 0; }
.h-principal { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 12px 0; border: 0; background: none; text-align: left; }
.h-txt { display: grid; gap: 2px; min-width: 0; grid-column: 1; grid-row: 1 / 3; }
.h-total { font-weight: 700; grid-column: 2; grid-row: 1; text-align: right; }
.h-principal .marca-estado { grid-column: 2; grid-row: 2; justify-self: end; }
.h-acciones { display: flex; flex: none; }
.informe { margin-top: 14px; }
.informe-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--filete); }

.ajustes-rejilla { display: grid; gap: 16px; align-items: start; }
.datos { display: grid; gap: 10px; margin: 8px 0 6px; }
.datos > div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: baseline; }
.datos dt { color: var(--tinta-2); font-size: 0.875rem; }
.datos dd { font-weight: 600; min-width: 0; }
.plegable { border-top: 1px solid var(--filete); margin-top: 12px; }
.plegable summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 600; cursor: pointer; list-style: none; }
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::after { content: ""; width: 9px; height: 9px; border: solid var(--tinta-2); border-width: 0 1.6px 1.6px 0; rotate: 45deg; margin-right: 6px; transition: rotate 0.2s var(--suave); }
.plegable[open] summary::after { rotate: -135deg; }
.ajuste-form { padding: 4px 0 12px; }
.ajuste-form .botones { margin-top: 16px; }
.pendiente { margin: 12px 0; padding: 14px; border-radius: 12px; background: #FBF0DC; }
.pendiente > p { display: flex; gap: 10px; color: #5A3A06; font-size: 0.9375rem; margin-bottom: 12px; }
.pendiente label { color: #5A3A06; }
.pasos { counter-reset: paso; display: grid; gap: 10px; margin: 10px 0 12px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tinta); color: var(--hoja); font-size: 0.8125rem; font-weight: 700; }
.pasos .ico { vertical-align: -3px; }
.cuentas li { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--filete); }
.cuentas li.inactiva .cuenta-txt { opacity: 0.6; }
.cuenta-txt { display: grid; gap: 2px; }
.pie-ajustes { text-align: center; font-size: 0.8125rem; color: var(--tinta-2); padding: 8px 0; }

/* ------------------------------------------------------------------ puntero fino: estados al pasar */

@media (hover: hover) {
  .boton:hover:not(:disabled) { border-color: var(--tinta); }
  .boton.primario:hover:not(:disabled) { background: #26332D; }
  .boton.cuadre:hover:not(:disabled) { background: #19673F; }
  .icono-btn:hover:not(:disabled), .forma:hover, .dia:hover:not(:disabled):not(.elegido) { background: var(--acento-suave); }
  .sugerencias li:not(.sug-nuevo):hover { background: var(--hoja-alt); }
  .puesto:hover, .semana-fila:hover { background: var(--hoja-alt); }
  .h-principal:hover strong { text-decoration: underline; text-underline-offset: 3px; }
  .segmentos button:not(.elegido):hover { color: var(--tinta); }
  .enlace:hover:not(:disabled) { text-decoration-thickness: 2px; }
  .ojo:hover { color: var(--tinta); }
}

/* ------------------------------------------------------------------ desde 600 px */

@media (min-width: 600px) {
  :root { --canal: 24px; }
  .hoja { padding: 22px 24px; }
  .formas { grid-template-columns: repeat(4, 1fr); }
  .totales-forma { grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px 28px; }
  .tot { grid-template-columns: auto auto auto; }
  .tot strong { grid-column: auto; }
  .papel { padding: 40px 44px; }
  .papel-tabla { font-size: 0.9375rem; }
  .entre-fechas.en-linea { grid-template-columns: 1fr 1fr auto; }
  .entre-fechas.en-linea .boton { grid-column: auto; }
  .leyenda { grid-template-columns: repeat(4, 1fr); }
  .cuentas li { grid-template-columns: 1fr auto; align-items: center; }
  .dia { min-height: 60px; }
}

/* ------------------------------------------------------------------ desde 900 px: carril de tinta a la izquierda */

@media (min-width: 900px) {
  :root { --canal: 40px; }
  .solo-movil { display: none; }
  .pestanas, .barra-dif { display: none; }
  .armazon { display: grid; grid-template-columns: 252px minmax(0, 1fr); }
  .carril { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--carril); color: var(--carril-texto); }
  .carril-marca { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 28px 22px 30px; text-decoration: none; }
  .carril-marca span { display: grid; min-width: 0; }
  .carril-marca strong { font-size: 1.0625rem; }
  .carril-marca small { color: var(--carril-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .carril-nav { position: relative; z-index: 1; display: grid; gap: 4px; padding-left: 12px; }
  .carril .nav-item { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 16px; border-radius: 12px 0 0 12px; color: var(--carril-texto); text-decoration: none; transition: background-color 0.15s; }
  .carril .nav-item .ico { color: var(--carril-texto-2); }
  .carril .nav-item:hover { background: var(--carril-hover); }
  /* la pestaña actual se funde con la hoja */
  .carril .nav-item.activo { background: var(--suelo); color: var(--tinta); font-weight: 700; }
  .carril .nav-item.activo .ico { color: var(--tinta); }
  .carril .nav-item:focus-visible { outline-color: var(--carril-texto); outline-offset: -3px; }
  .carril-fondo { width: 460px; height: 460px; left: -150px; bottom: -110px; color: rgb(233 237 231 / 0.11); }
  .carril-pie { position: relative; z-index: 1; margin-top: auto; display: grid; gap: 2px; padding: 22px; font-size: 0.8125rem; color: var(--carril-texto-2); }
  .carril-pie strong { font-family: var(--cifras); font-weight: 700; font-size: 1.125rem; color: var(--carril-texto); }
  .principal { padding: 34px var(--canal) 48px; }
  .vista { gap: 22px; }
  .cobros, .arqueo, .clientes { gap: 22px; }
  .arqueo { padding-bottom: 0; }
  h1 { font-size: 1.75rem; }
  .avisos { bottom: 24px; left: 276px; }

  .cabecera-cobros { flex-wrap: nowrap; align-items: flex-start; }
  .total-semana { width: auto; justify-items: end; text-align: right; flex: none; }
  .total-fondo { display: block; width: 300px; height: 300px; right: -130px; top: -60px; color: rgb(23 32 28 / 0.09); }

  .talonario { padding: 22px 28px 12px; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; }
  .talonario-cab { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
  .pregunta { font-size: 1.375rem; }
  .pista { text-align: right; }
  .seg-dia { grid-column: 1; width: 290px; }
  .tira { grid-column: 2; grid-template-columns: minmax(0, 1fr) 150px 170px; gap: 0; }
  .tira .seg { padding: 0 18px; border-left: 1px dashed var(--filete-fuerte); align-content: start; }
  .seg-cliente { grid-column: auto; }
  .tira input { border-width: 0 0 2px; border-color: transparent; border-radius: 0; background: transparent; padding: 6px 0; min-height: 44px; font-size: 1.1875rem; }
  .tira input:focus-visible { outline: none; border-color: var(--tinta); border-radius: 0; }
  .tira .con-euro > span { right: 0; }
  .tira .con-euro input { padding-right: 20px; }
  .seg-importe input { font-size: 1.3125rem; }
  .sugerencias { left: 12px; right: 0; top: 100%; }
  .aviso-campo, .seg-forma, .talonario-pie { grid-column: 1 / -1; }
  .seg-forma { grid-template-columns: 290px minmax(0, 1fr); align-items: center; column-gap: 28px; padding-top: 14px; border-top: 1px dashed var(--filete-fuerte); }
  .formas { display: flex; flex-wrap: wrap; padding-left: 18px; }
  .forma { min-height: 46px; padding: 6px 12px 6px 14px; font-size: 1rem; }
  .forma span:nth-child(2) { flex: none; }
  .forma kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; border: 1px solid var(--filete-fuerte); border-radius: 5px; font: 600 0.75rem var(--texto); color: var(--tinta-2); }
  .talonario-pie { border-top: 0; margin-top: -6px; }
  .cerrada-nota { grid-template-columns: auto 1fr auto; align-items: center; }
  .cerrada-nota .botones { grid-column: auto; }

  .tabla-cobros { padding: 6px 28px; }
  .cobro, .cobro-cab { grid-template-columns: 104px minmax(0, 1fr) 150px 140px 130px 88px; column-gap: 16px; align-items: center; }
  .cobro.cobro-cab { display: grid; padding: 12px 0 10px; border-bottom: 1px solid var(--filete-fuerte); }
  .cobro-cab > span { font-size: 0.8125rem; font-weight: 600; color: var(--tinta-2); }
  .lista-cobros.solo-lectura .cobro { grid-template-columns: 104px minmax(0, 1fr) 150px 140px 130px; }
  .cobro { padding: 13px 0; }
  .lista-cobros:not(.solo-lectura) .cobro { cursor: default; }
  .c-fecha, .c-cliente, .c-factura, .c-forma, .c-importe { grid-column: auto; grid-row: 1; }
  .c-fecha, .c-forma { font-size: 0.9375rem; }
  .c-factura { font-size: 0.9375rem; color: var(--tinta); }
  .c-cliente { font-weight: 500; }
  .fila-acciones { display: flex; grid-column: auto; grid-row: 1; padding: 0; gap: 0; justify-content: flex-end; opacity: 0; transition: opacity 0.15s; }
  .cobro:hover .fila-acciones, .cobro:focus-within .fila-acciones, .cobro.abierta .fila-acciones { opacity: 1; }
  .fila-acciones .icono-btn { flex: none; border: 0; background: none; padding: 0; min-width: 40px; min-height: 40px; }
  .fila-acciones .icono-btn span { display: none; }
  .pie-cobros { grid-template-columns: 1fr auto; align-items: center; }
  .pie-cobros .boton { width: auto; }

  .arqueo-rejilla { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 22px; }
  .arqueo-contar { gap: 22px; }
  .la-cuenta { position: sticky; top: 24px; padding: 26px 28px 24px; }
  .fila-pieza { grid-template-columns: 76px auto minmax(0, 1fr); gap: 10px; min-height: 50px; }
  .pieza { width: 76px; }
  .cantidad { width: 58px !important; min-height: 36px !important; }
  .paso .icono-btn { min-width: 32px; min-height: 32px; }

  .oficina-rejilla { grid-template-columns: 360px minmax(0, 1fr); align-items: start; gap: 22px; }
  .oficina-elegir .dos-fechas { grid-template-columns: minmax(0, 1fr); }
  .oficina-elegir .dos-fechas span { display: none; }
  .semanas-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: 46vh; overflow: auto; margin: 0 -10px; }
  .semana-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 0; border-radius: 10px; background: none; text-align: left; }
  .semana-fila.elegida { background: var(--acento-suave); }
  .semana-txt { display: grid; gap: 2px; min-width: 0; }
  .oficina-acciones .boton { flex: 0 0 auto; }
  .oficina-elegir { position: sticky; top: 24px; }
  .correo-panel { max-width: 560px; }

  .clientes-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
  .clientes-col { gap: 22px; }
  .ajustes-rejilla { grid-template-columns: 1fr 1fr; gap: 22px; }
  .ajustes-rejilla > .hoja:last-child:nth-child(odd), .ajustes-rejilla > div:last-child { grid-column: 1 / -1; }
  .h-principal { grid-template-columns: 1fr 130px 140px; }
  .h-txt { grid-row: 1; }
  .h-principal .marca-estado { grid-column: 2; grid-row: 1; justify-self: start; }
  .h-total { grid-column: 3; }

  .acceso { grid-template-rows: none; grid-template-columns: minmax(340px, 42%) 1fr; }
  .acceso-tinta { display: flex; flex-direction: column; justify-content: space-between; padding: 44px; }
  .acceso-fondo { width: 760px; height: 760px; right: auto; left: -200px; top: auto; bottom: -260px; }
  .acceso-marca { font-size: 1.375rem; }
  .acceso-lema { display: block; position: relative; font-family: var(--cifras); font-weight: 800; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.12; max-width: 14ch; text-wrap: balance; }
  .acceso-hoja { border-radius: 0; justify-content: center; padding: 44px; }
  .acceso-hoja .acceso-caja { margin-top: auto; }
}

@container (min-width: 640px) {
  .piezas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .piezas .grupo + .grupo { border-left: 1px solid var(--filete); padding-left: 32px; }
  .arqueo-contar > .hoja:not(.piezas) { grid-column: span 1; }
}
@media (min-width: 900px) {
  .arqueo-contar { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .arqueo-contar .piezas { grid-column: 1 / -1; }
}

@media (max-width: 349px) {
  :root { --canal: 12px; }
  .hoja { padding: 16px 12px; }
  .fila-pieza { grid-template-columns: 54px auto minmax(0, 1fr); gap: 6px; }
  .pieza { width: 54px; }
  .paso .icono-btn { min-width: 36px; }
  .cantidad { width: 46px !important; }
  .subtotal { font-size: 0.8125rem; }
  .pestanas .nav-item { font-size: 0.625rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .carril, .pestanas, .barra-dif, .avisos, .oficina-elegir, .oficina-acciones, .zona-correo, .cabecera { display: none !important; }
  body, .papel { background: #fff; box-shadow: none; }
  .principal { padding: 0; }
}