/* Ventana «Corte de caja» del Administrativo (12-nov-2026, pedido del dueño: «el diseño se ve feo»).
   Una sola hoja: encabezado, cifras grandes, aviso de diferencia y secciones con aire, en dos columnas cuando cabe.
   Va al final de las hojas de estilo para ganarle a las reglas genéricas de .bloque / .panel. Esquinas de 8 px; todo con las variables del tema. */
/* el cuerpo de la ventana es una columna con scroll: sin esto, con muchas secciones las cifras de arriba se aplastaban a 2 px */
body #panel .cuerpo > :is(.corte-cab, .corte-franja, .corte-aviso, .corte-hoja) { flex: 0 0 auto; }
body .corte-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin: 4px 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--regla); }
body .corte-cab h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
body .corte-botones { display: flex; flex-wrap: wrap; gap: 8px; }
body .corte-estado { display: inline-block; font: 700 .72rem/1 var(--f-texto, inherit); letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--regla); color: var(--tinta-suave); vertical-align: middle; }
body .corte-estado.abierta { color: var(--hoja); border-color: color-mix(in srgb, var(--hoja) 55%, var(--regla)); background: var(--hoja-fondo, transparent); }
body .corte-franja { margin-bottom: 16px; border-radius: 8px; }

/* aviso de diferencia / nota del turno: un recuadro suave, sin franja de color al lado */
body .corte-aviso { margin: 0 0 18px; padding: 14px 18px; border: 1px solid var(--regla); border-radius: 8px; background: var(--papel-2, var(--blanco)); line-height: 1.5; }
body .corte-aviso.falta { background: var(--jitomate-fondo, var(--papel-2)); border-color: color-mix(in srgb, var(--jitomate) 45%, var(--regla)); }
body .corte-aviso.sobra { background: var(--ambar-fondo, var(--papel-2)); border-color: color-mix(in srgb, var(--ambar) 45%, var(--regla)); }
body .corte-aviso.falta > strong { color: var(--jitomate); }
body .corte-aviso.sobra > strong { color: var(--ambar); }
body .corte-aviso-nota { display: block; margin-top: 4px; color: var(--tinta); overflow-wrap: anywhere; }

/* la hoja: secciones en una rejilla, cada una con su título y su línea; sin cajas encimadas */
body .corte-hoja { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 6px 40px; align-items: start; padding: 4px 2px 8px; }
body .corte-hoja > .corte-sec { margin: 0; padding: 14px 0 6px; border: 0; border-radius: 0; background: none; box-shadow: none; min-width: 0; }
body .corte-hoja > .corte-sec.ancha { grid-column: 1 / -1; }
body .corte-hoja > .corte-sec > h3 { margin: 0 0 4px; padding: 0 0 8px; font-size: 1rem; font-weight: 700; border-bottom: 2px solid color-mix(in srgb, var(--tinta) 80%, transparent); display: flex; align-items: baseline; gap: 8px; }
body .corte-hoja .corte-n { font-size: .78rem; font-weight: 600; color: var(--tinta-suave); }
body .corte-hoja .tabla { width: 100%; margin: 0; }
body .corte-hoja .tabla td { padding: 10px 2px; }
body .corte-hoja .tabla tr:last-child td { border-bottom: 0; }
body .corte-hoja .tabla th { padding: 8px 2px; }
body .corte-hoja .tabla small { margin-top: 2px; }
body .corte-hoja .tabla td.der { white-space: nowrap; font-variant-numeric: tabular-nums; }
body .corte-hoja .tabla tr.clic { cursor: pointer; }
body .corte-hoja .tabla tr.clic:hover td, body .corte-hoja .tabla tr.clic:focus-visible td { background: color-mix(in srgb, var(--tinta) 5%, transparent); }
body .corte-hoja .tabla .ok { color: var(--hoja); }
body .corte-hoja .tabla .negativo { color: var(--jitomate); }
@media (max-width: 640px) {
  body .corte-hoja { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body .corte-aviso { padding: 12px 14px; }
}

/* la hoja impresa (Imprimir o PDF): una sola columna, tablas a todo el ancho con los importes a la derecha, secciones que no se parten entre páginas */
#zona-impresion .corte-hoja { display: block; padding: 0; }
#zona-impresion .corte-hoja > .corte-sec { break-inside: avoid; page-break-inside: avoid; padding: 12px 0 4px; }
#zona-impresion .corte-hoja .tabla { width: 100%; border-collapse: collapse; }
#zona-impresion .corte-hoja .tabla td.der, #zona-impresion .corte-hoja .tabla th.der { text-align: right; }
#zona-impresion .corte-aviso { background: none !important; border: 1px solid #888; color: #000; margin: 8px 0 12px; }