/**
 * intranet.css
 * ------------------------------------------------------------------
 * Estilos propios de las pantallas internas (hoy: caja.html).
 * NO se importa desde main.css a propósito: el sitio público no lo
 * necesita y no tiene por qué descargarlo. caja.html enlaza los dos
 * (main.css + este), con la misma versión de cache-busting.
 *
 * Todo usa los tokens de css/variables.css y las clases de formulario
 * que ya existen en components.css: la intranet no inventa una estética
 * aparte, es el mismo sitio en modo trabajo.
 * ------------------------------------------------------------------
 */

/**
 * ATENCIÓN, ESTO NO ES DECORATIVO.
 * La intranet muestra y esconde bloques enteros con el atributo [hidden]
 * (pantalla de acceso, formulario, barra de sesión, bloques de ingreso y
 * de egreso). El navegador aplica [hidden] con un `display: none` de muy
 * baja prioridad, así que CUALQUIER regla propia con `display` —un
 * `display: flex` o `display: grid` de una clase— le gana y el bloque
 * sigue viéndose aunque el JavaScript lo haya marcado como oculto.
 * Ya pasó tres veces en este proyecto. Se refuerza una sola vez acá, y
 * así las reglas nuevas no tienen que acordarse del problema.
 */
[hidden] {
  display: none !important;
}

/* Utilitaria: visible para lectores de pantalla, no en pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============ HEADER DE LA INTRANET ============ */
/* A diferencia del sitio público, este header NO es fijo: acá se
   trabaja hacia abajo en un formulario y no hay menú al que volver. */
.intranet__header {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
}

.intranet__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}

.intranet__header-derecha {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* "Intranet" en el lugar del menú, mientras no hay sesión. Mismo
   lenguaje que los ítems del menú que va a ocupar ese espacio después,
   pero sin subrayado ni interacción: es un rótulo, no un botón. */
.intranet__marca {
  margin: 0 auto 0 var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--c-taupe);
}

/* "Ir al sitio" usa el mismo botón que "Solicitar turno" del sitio
   público (.btn.btn--primary): salvia fijo, taupe al pasar el mouse,
   texto blanco. Acá sólo se acomoda el ícono. */
.intranet__ir-sitio {
  flex-shrink: 0;
}
.intranet__ir-sitio .icon {
  width: 14px;
  height: 14px;
}

/* ============ MENÚ DE LA INTRANET ============ */
/* Mismo lenguaje que el menú del sitio público: mayúscula chica con
   tracking y una línea fina abajo en la sección activa. Son botones y
   no links porque cambian de vista, no de página. */
.intranet__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-right: auto;
  margin-left: var(--space-xl);
}

.intranet__nav-item {
  position: relative;
  padding: var(--space-2xs) 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-70);
  transition: color var(--transition);
}

.intranet__nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--c-brown);
  transition: width var(--transition);
}

.intranet__nav-item:hover,
.intranet__nav-item.is-active {
  color: var(--c-ink);
}
.intranet__nav-item:hover::after,
.intranet__nav-item.is-active::after {
  width: 100%;
}

/* ============ ENCABEZADO DE CADA VISTA ============ */
.vista__encabezado {
  max-width: 60ch;
  margin-bottom: var(--space-lg);
}

.vista__titulo {
  margin-block: var(--space-2xs) var(--space-2xs);
  font-size: var(--fs-h2);
}

.vista__lead {
  color: var(--c-ink-70);
}

/* ============ VISTA AGENDA ============ */
/* El iframe no crece solo: necesita un alto propio, como el widget de
   Calendly en el sitio público. */
.vista-agenda__calendario {
  width: 100%;
  height: min(70vh, 640px);
  border: 1px solid var(--c-line);
}

/* ============ ENCABEZADO DE LA PANTALLA ============ */
.intranet__seccion {
  padding-block: var(--space-2xl);
}

/* Ya adentro, el aire de arriba se recorta: la barra de menú ya separa
   visualmente el encabezado del contenido, así que 5rem de padding sólo
   empujaban el formulario fuera de la primera pantalla. Abajo se
   mantiene el respiro para que el último campo no quede pegado al pie. */
.intranet:not(.sin-sesion) .intranet__seccion {
  padding-block: var(--space-lg) var(--space-2xl);
}

/* El encabezado de cada vista también se compacta: el rótulo, el título
   y el lead son tres líneas y no necesitan tanto espacio entre ellas. */
.intranet:not(.sin-sesion) .vista__encabezado {
  margin-bottom: var(--space-md);
}

.intranet__titulo-bloque {
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

.intranet__titulo {
  margin-block: var(--space-2xs) var(--space-xs);
}

.intranet__lead {
  color: var(--c-ink-70);
}

/* Se oculta con [hidden] cuando no hay planilla configurada; de eso se
   encarga la regla global de arriba. */
.intranet__planilla {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--c-brown);
}
.intranet__planilla:hover {
  color: var(--c-ink);
}

/* ============ AVISOS ============ */
/* Se usa para el cartel de "falta conectar la planilla" y para
   cualquier problema general de la pantalla. Sin sombras, coherente
   con el resto: una línea al costado y fondo muy suave. */
.aviso {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  border-left: 3px solid var(--c-taupe);
  background: var(--c-cream);
  font-size: var(--fs-sm);
}
.aviso--error {
  border-left-color: #a3564a;
}

/* El bloque de presentación acompaña al cuadro de ingreso; con la
   sesión abierta, cada vista trae su propio encabezado. */
.intranet:not(.sin-sesion) [data-solo-login] {
  display: none;
}

/* ============ ALTO DE LA PÁGINA ============ */
/* El body ocupa toda la ventana y el main se estira: así el bloque de
   acceso puede centrarse en lo que sobra entre el header y el pie, sin
   depender de alturas fijas que se rompen en cada pantalla distinta. */
.intranet {
  min-height: 100vh;
  min-height: 100dvh; /* en móviles descuenta la barra del navegador */
  display: flex;
  flex-direction: column;
}
.intranet > main {
  flex: 1;
  display: flex;
}
.intranet > main > .intranet__seccion {
  flex: 1;
}

/* ============ PANTALLA DE ACCESO ============ */
/* Mientras no hay sesión (clase .sin-sesion en el body, la pone
   js/caja.js) la página se reduce a lo único que se puede hacer:
   ingresar. Se esconde el encabezado largo de la pantalla de trabajo y
   el cuadro se centra verticalmente, para que entre sin scroll incluso
   en notebooks de pantalla baja. Con la sesión abierta vuelve todo al
   formato normal. */
.sin-sesion .intranet__seccion {
  display: grid;
  /* Arriba, como en la pantalla de trabajo, en vez de centrado en la
     ventana. El aire de arriba se adapta al alto de pantalla: generoso
     en un monitor grande, mínimo en una notebook baja, para que el
     cuadro siga entrando entero sin scroll. */
  align-content: start;
  padding-block: clamp(var(--space-sm), 6vh, var(--space-2xl)) var(--space-md);
}

.sin-sesion .intranet__titulo-bloque {
  max-width: none;
  margin-bottom: var(--space-md);
  text-align: center;
}

.sin-sesion .intranet__titulo {
  font-size: var(--fs-h2);
  margin-block: var(--space-3xs) 0;
}

/* El texto largo y el link a la planilla son para la pantalla de
   trabajo; acá sólo ocupan alto. */
.sin-sesion .intranet__lead,
.sin-sesion .intranet__planilla {
  display: none;
}

.sin-sesion .acceso {
  padding-block: 0;
}

/* Con el encabezado grande y el pie fuera, lo que queda es el cuadro.
   El pie repite lo que ya dice el header, así que en esta pantalla sobra. */
.sin-sesion .intranet__seccion {
  padding-block: var(--space-sm);
}
.sin-sesion .intranet__titulo-bloque {
  margin-bottom: var(--space-sm);
}
.sin-sesion .intranet__titulo {
  font-size: var(--fs-h3);
}
.sin-sesion .intranet__titulo-bloque .rotulo,
.sin-sesion .intranet__footer {
  display: none;
}

/* En notebooks de pantalla baja (720px de alto) la pantalla de primer
   ingreso, que tiene un campo más, se pasaba por unos pocos píxeles. Ahí
   se oculta el título de la sección: el header ya muestra la marca y la
   palabra "Intranet", y el cuadro dice qué hacer. No se usa display:none
   a propósito — el título sigue existiendo para los lectores de pantalla. */
@media (max-height: 760px) and (max-width: 899px) {
  .sin-sesion .intranet__titulo-bloque {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    margin: 0;
  }
}

/* Los mensajes de error y de estado ocupaban alto aun estando vacíos:
   entre los dos campos y el cartel de resultado se iban más de 60px de
   nada. Al aparecer el texto, el bloque crece; es el momento correcto
   para que la pantalla se mueva. */
.form__feedback:empty,
.acceso__caja .form__error:empty {
  display: none;
}

/* El cuadro de acceso respira menos que el formulario de trabajo: son
   dos campos, no una carga larga. */
.acceso__caja {
  padding: var(--space-md);
}
.acceso__caja .form__grupo {
  margin-bottom: var(--space-sm);
}
.acceso__caja .acceso__nota {
  margin-bottom: var(--space-sm);
}
.acceso__caja .btn--enviar {
  margin-top: 0;
}
.acceso__caja .form__ayuda {
  margin-top: var(--space-3xs);
}

/* Angosta y centrada: hasta que la planilla no valide el usuario, no
   hay nada más que hacer en esta pantalla. */
.acceso {
  display: flex;
  justify-content: center;
  padding-block: var(--space-lg) var(--space-2xl);
}

.acceso__caja {
  width: 100%;
  max-width: 380px;
  padding: var(--space-lg);
  border: 1px solid var(--c-line);
  background: var(--c-white);
}

.acceso__titulo {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2xs);
}

.acceso__nota {
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
  margin-bottom: var(--space-md);
}

.acceso__caja .btn--enviar {
  width: 100%;
  margin-top: var(--space-2xs);
}

.acceso__pie {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
  text-align: center;
}

/* ============ BARRA DE SESIÓN ============ */
.intranet__sesion {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-70);
}
.intranet__sesion .icon {
  width: 14px;
  height: 14px;
  color: var(--c-taupe);
}

.intranet__cerrar-sesion {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--c-brown);
  text-decoration: underline;
  cursor: pointer;
}
.intranet__cerrar-sesion:hover {
  color: var(--c-ink);
}

@media (max-width: 700px) {
  /* En pantalla chica el header ya va justo de espacio: la sesión pasa
     a una línea propia debajo del logo. */
  .intranet__header-inner {
    flex-wrap: wrap;
    padding-block: var(--space-2xs);
  }
  /* El menú pasa a su propia línea, a todo el ancho y con menos aire
     entre ítems. Con cuatro secciones (desde que se sumó Estadísticas)
     ya no entraba en 360 px y empujaba la página para el costado. Si
     algún día no entran ni así, bajan a otra línea en vez de desbordar. */
  .intranet__nav {
    flex-basis: 100%;
    flex-wrap: wrap;
    margin-left: 0;
    column-gap: var(--space-sm);
    row-gap: 0;
  }
}

/* ============ GRILLA: FORMULARIO + RESUMEN ============ */
.caja__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 900px) {
  .caja__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

/* Texto de ayuda debajo de un campo (más chico que el label). */
.form__ayuda {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
}

/* Campos calculados (importe de timbres, IVA y total a cobrar).
   No se escriben: los llena js/caja.js. Se muestran igual porque el
   total tiene que verse abierto en sus partes, no como un número final.
   Se los distingue con fondo y cursor para que nadie pierda tiempo
   intentando tipear ahí, y quedan fuera del recorrido con Tab. */
.form__input--calculado {
  background: var(--c-cream);
  cursor: default;
  color: var(--c-ink);
}

/* El total a cobrar es el número que se le cobra al paciente: pesa más
   que los dos de al lado y se nota. */
.form__input--total {
  font-weight: 600;
  border-bottom-color: var(--c-taupe);
}

/* Campo con error: se refuerza el borde inferior del input de línea. */
.form__input--error {
  border-bottom-color: #a3564a;
}

/* Estados del mensaje de resultado del formulario. */
.form__feedback--ok {
  color: #4a6b45;
}
.form__feedback--error {
  color: #a3564a;
}

/* ============ ESTUDIOS (selección múltiple) ============ */
/* Casillas en grilla, no un <select multiple>: se ve todo el catálogo
   de un vistazo y se marca con un clic, sin Ctrl+clic. */
.caja__estudios {
  border: 0;
  padding: 0;
  margin-bottom: var(--space-md);
}

.caja__estudios-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-2xs);
}

.caja__estudio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding-block: var(--space-3xs);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.caja__estudio input {
  margin-top: 3px;
  accent-color: var(--c-taupe);
  flex-shrink: 0;
}

/* ============ ESTUDIOS Y COMBOS (desde la hoja Tarifario) ============ */
/* Agrupados por familia, con el precio con IVA a la derecha. Los combos
   van primero; al marcar uno, sus estudios quedan marcados, bloqueados
   y con la leyenda "en <combo>". */
.caja__familia {
  grid-column: 1 / -1;
  display: grid;
  /* La lista no lleva precios (se ven sólo en el cálculo del cobro),
     así que entran dos columnas en el ancho del formulario. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0 var(--space-md);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--c-line-soft);
}
.caja__familia-titulo {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-taupe);
}
.caja__familia--combos {
  grid-template-columns: 1fr;
  padding: var(--space-2xs) var(--space-xs) var(--space-xs);
  border: 1px solid var(--c-line);
  background: var(--c-cream);
}
.caja__estudio-nombre {
  flex: 1;
  min-width: 0;
}
.caja__combo-detalle {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
}
/* Estudio incluido en un combo elegido: bloqueado y con la leyenda. */
.caja__estudio[data-en-combo] {
  cursor: default;
}
/* La leyenda va en su propia línea, debajo del nombre (al lado le
   quitaba ancho al nombre y lo pisaba el precio). El padding-left la
   alinea con el texto, después de la casilla. */
.caja__estudio[data-en-combo] {
  flex-wrap: wrap;
}
.caja__estudio[data-en-combo]::after {
  content: attr(data-en-combo);
  flex-basis: 100%;
  margin-top: -2px;
  padding-left: calc(13px + var(--space-2xs));
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--c-brown);
}
.caja__estudio--bloqueado {
  opacity: 0.45;
  cursor: not-allowed;
}
.caja__estudios-estado {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-70);
}
.caja__estudios-estado--error {
  color: #a3564a;
}
.caja__sugerencia-combo {
  grid-column: 1 / -1;
  margin: var(--space-2xs) 0 0;
  padding: var(--space-2xs) var(--space-xs);
  border-left: 2px solid var(--c-sage);
  background: var(--c-taupe-08);
  font-size: var(--fs-sm);
}
.caja__sugerencia-boton {
  margin-left: var(--space-3xs);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-brown);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.caja__tarifario-avisos {
  grid-column: 1 / -1;
  margin: var(--space-2xs) 0 0;
  padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-md);
  border-left: 2px solid #a3564a;
  font-size: var(--fs-xs);
  color: #a3564a;
}

/* ============ SUGERENCIA DEL TARIFARIO ============ */
/* Cuando el monto cargado no coincide con el tarifario, o falta un
   precio, la línea cambia de color: la diferencia se muestra, no se
   corrige sola ni se calla. */
.caja__tarifa {
  margin: calc(var(--space-md) * -0.5) 0 var(--space-md);
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
  font-variant-numeric: tabular-nums;
}
.caja__tarifa--aviso {
  padding-left: var(--space-2xs);
  border-left: 2px solid #a3564a;
  color: #a3564a;
}

/* ============ DESGLOSE DEL TOTAL ============ */
/* Se muestra cómo se compone el total (estudio + timbres) en vez de un
   número final sin explicación. */
.caja__calculo {
  margin: calc(var(--space-md) * -0.5) 0 var(--space-md);
  padding: var(--space-2xs) var(--space-xs);
  border-left: 2px solid var(--c-taupe);
  background: var(--c-cream);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.caja__calculo--error {
  border-left-color: #a3564a;
  color: #a3564a;
}

/* ============ PANEL DE RESUMEN ============ */
.caja__resumen {
  padding: var(--space-lg);
  border: 1px solid var(--c-line);
  background: var(--c-cream);
}

.caja__resumen-titulo {
  margin-block: var(--space-2xs) var(--space-xs);
  font-size: var(--fs-h3);
}

.caja__resumen-nota {
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
  margin-bottom: var(--space-md);
}

/* Estado del panel del día: "trayendo…" o el aviso de que no se pudo
   actualizar. Ocupa lugar sólo cuando dice algo. */
.caja__resumen-estado {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
}
.caja__resumen-estado--error {
  color: #a3564a;
}

/* Texto de ayuda que en realidad está avisando de un problema. */
.form__ayuda--error {
  color: #a3564a;
}

/* Botón discreto para volver a pedirle el día a la planilla. Es un link
   con forma de texto, no un botón fuerte: no compite con "Registrar". */
.caja__resumen-refrescar {
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-brown);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--transition);
}
.caja__resumen-refrescar:hover {
  opacity: 0.7;
}

.caja__total {
  padding-block: var(--space-sm);
  border-top: 1px solid var(--c-line);
}

.caja__total-moneda {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-taupe);
}

.caja__total-lista > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 2px;
  font-size: var(--fs-sm);
}

.caja__total-lista dt {
  color: var(--c-ink-70);
}

.caja__total-lista dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Los timbres ya están adentro de los ingresos: se muestran como
   apertura, indentados y más chicos, para que no se lean como un
   tercer total que se suma. */
.caja__total-nota {
  padding-left: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
}

/* El saldo es el número que se compara contra la caja física: va
   separado y con más peso que los parciales. */
.caja__total-saldo {
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--c-line);
  font-weight: 500;
}
.caja__total-saldo dt {
  color: var(--c-ink);
}

/* Bloque del efectivo. Va separado del saldo por un espacio propio para
   que se lea como otra mirada del mismo día —la plata en mano— y no como
   más renglones que se sumen al saldo de arriba. */
.caja__total-efectivo {
  margin-top: var(--space-sm);
}
.caja__total-efectivo .caja__total-nota {
  padding-left: 0;
}

/* ============ TABLA DE MOVIMIENTOS DE LA SESIÓN ============ */
.caja__tabla {
  width: 100%;
  margin-top: var(--space-md);
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.caja__tabla th {
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-70);
  font-weight: 400;
}

.caja__tabla td {
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}

.caja__col-monto {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.caja__vacio {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--c-ink-70);
}

/* Etiqueta de tipo de movimiento. Sin relleno fuerte: hairline y
   color de texto, como el resto del sitio. */
.etiqueta {
  display: inline-block;
  padding: 2px var(--space-2xs);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
.etiqueta--ingreso {
  color: #4a6b45;
}
.etiqueta--egreso {
  color: #a3564a;
}

/* ============ PIE ============ */
.intranet__footer {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
}

/* ============ ACCESO EN PANTALLA ANCHA: ENCABEZADO AL COSTADO ============ */
/* De un lado la presentación de la pantalla, del otro el cuadro de
   ingreso. Puesto al costado, el encabezado vuelve completo —rótulo,
   título grande y texto— sin empujar el cuadro hacia abajo ni obligar a
   scrollear. Por debajo de 900px se apila y ahí sí se usa la versión
   compacta de más arriba, que es la que entra en un celular. */
@media (min-width: 900px) {
  .sin-sesion .intranet__seccion .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: var(--space-2xl);
    align-items: start;
  }

  /* Un aviso (por ejemplo, planilla sin conectar) cruza las dos columnas */
  .sin-sesion .aviso {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .sin-sesion .intranet__titulo-bloque {
    max-width: 46ch;
    margin-bottom: 0;
    text-align: left;
  }

  .sin-sesion .intranet__titulo-bloque .rotulo,
  .sin-sesion .intranet__lead {
    display: block;
  }

  .sin-sesion .intranet__titulo {
    font-size: var(--fs-h2);
    margin-block: var(--space-2xs) var(--space-xs);
  }
}

/* ==================================================================
   TABLERO DE CONTROL
   ==================================================================
   Los gráficos se dibujan en SVG desde js/tablero.js. Acá va sólo el
   armado de la página: filtros, tarjetas de números y la grilla de
   figuras. Los colores de las series NO están acá: viven en
   js/tablero.js, donde está explicado por qué son esos y no los de la
   marca (ver PALETA en ese archivo).
   ================================================================== */

/* --- Filtros: una sola fila arriba de todo, como pide la lectura --- */
.tablero__filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--c-line);
}
.tablero__filtros .form__grupo {
  min-width: 140px;
}
.tablero__filtros .btn {
  margin-bottom: 2px;
}

/* --- Atajos de período: texto, no botones fuertes --- */
.tablero__atajos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.tablero__atajos button {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-brown);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 2px;
  transition: border-color var(--transition);
}
.tablero__atajos button:hover {
  border-bottom-color: var(--c-brown);
}

.tablero__estado {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--c-ink-70);
}
.tablero__estado--error {
  color: #a3564a;
}

/* --- Números principales del período --- */
/* Las líneas divisorias se dibujan con un anillo de box-shadow en cada
   tarjeta, no con el truco de "fondo gris + gap de 1px": la cantidad de
   tarjetas no siempre completa la última fila, y con aquel truco los
   lugares vacíos quedaban como manchones grises. El anillo no ocupa
   lugar, así que dos tarjetas vecinas comparten la misma línea de 1px. */
.tablero__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: var(--space-lg);
}
.tablero__kpi {
  background: var(--c-white);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 0 0 1px var(--c-line);
}
/* El facturado es el número con el que se lee todo el resto. */
.tablero__kpi--destacado {
  background: var(--c-cream);
}
.tablero__kpi-rotulo {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--c-ink-70);
  margin-bottom: var(--space-3xs);
}
.tablero__kpi-valor {
  font-size: var(--fs-h3);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.tablero__kpi--destacado .tablero__kpi-valor {
  font-weight: 500;
}

/* --- Grilla de gráficos --- */
.tablero__grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.tablero__figura--ancha {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .tablero__grilla {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tablero__figura {
  margin: 0;
  padding: var(--space-md);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  min-width: 0; /* si no, el SVG estira la columna de la grilla */
}
.tablero__figura-titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--c-ink);
}
.tablero__figura-nota {
  margin-top: var(--space-3xs);
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
}

/* El lienzo es el ancla del tooltip, que se posiciona en absoluto. */
.tablero__lienzo {
  position: relative;
}
.tablero__lienzo svg {
  display: block;
  max-width: 100%;
  overflow: visible;
}

.tablero__sin-datos {
  padding-block: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--c-ink-70);
}

/* --- Tooltip --- */
.tablero__tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none; /* si no, se escapa del propio elemento que lo abrió */
  max-width: 240px;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--c-ink);
  color: var(--c-white);
  font-size: var(--fs-xs);
  line-height: 1.4;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.tablero__tooltip-nota {
  color: rgba(255, 255, 255, 0.7);
}

/* --- Referencia de colores (barra apilada) --- */
.tablero__referencia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
}
.tablero__referencia li {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}
.tablero__referencia-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.tablero__referencia-nombre {
  color: var(--c-ink);
}
.tablero__referencia-valor {
  color: var(--c-ink-70);
  font-variant-numeric: tabular-nums;
}

/* --- Tabla de números de cada gráfico ---
   No es un extra: es lo que permite controlar las cifras y lo que hace
   legible el gráfico para quien no distingue bien los colores. */
.tablero__tabla-caja {
  margin-top: var(--space-md);
  border-top: 1px solid var(--c-line-soft);
  padding-top: var(--space-2xs);
}
.tablero__tabla-caja summary {
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--c-brown);
}
.tablero__tabla {
  width: 100%;
  margin-top: var(--space-2xs);
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.tablero__tabla th,
.tablero__tabla td {
  padding: var(--space-3xs) 0;
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
}
.tablero__tabla th {
  color: var(--c-ink-70);
  font-weight: 400;
}
.tablero__col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==================================================================
   ESTADÍSTICAS (archivo "Facturación Sistema")
   ==================================================================
   Reutiliza el armado del tablero (filtros, tarjetas, figuras, tablas,
   tooltip). Acá va sólo lo propio: la torta con su referencia, el
   selector de medida y la grilla de gráficos chicos por tipo.
   Los colores de los tipos viven en js/estadisticas.js (PALETA_TIPOS),
   donde está explicado por qué son esos.
   ================================================================== */

.est__fuente {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
  overflow-wrap: anywhere;
}
.est__fuente a {
  color: var(--c-brown);
  border-bottom: 1px solid var(--c-line);
}

/* Casilla "Incluir timbres", alineada con la base de los campos. */
.est__casilla {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  cursor: pointer;
}
.est__casilla input {
  width: 16px;
  height: 16px;
  accent-color: var(--c-brown);
}

/* Avisos del archivo: a la vista, sin gritar. */
.est__avisos {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid #a3564a;
  background: var(--c-cream);
  font-size: var(--fs-xs);
  color: var(--c-ink);
}
.est__avisos-titulo {
  margin-bottom: var(--space-3xs);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: #a3564a;
}
.est__avisos ul {
  display: grid;
  gap: var(--space-3xs);
  padding-left: 1.1em;
  list-style: disc;
}

.est__periodo {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink-70);
}
.est__periodo strong {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--c-ink);
}
/* Las tarjetas de números del tablero arrancan con su propio margen;
   acá el período ya lo separa. */
.vista-estadisticas .tablero__kpis {
  margin-top: var(--space-sm);
}
.est__kpi-nota {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--fs-micro);
  color: var(--c-ink-70);
}

/* --- Torta + referencia: lado a lado si entra, una abajo de otra si no --- */
.est__torta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.est__torta-svg {
  flex-shrink: 0;
  margin-inline: auto;
}
.est__porcion {
  transition: opacity var(--transition);
  cursor: default;
}
/* Al pasar por una porción, las demás se apagan un poco. */
.est__torta-svg:hover .est__porcion:not(.is-activa) {
  opacity: 0.55;
}

.est__referencia {
  flex: 1 1 220px;
  min-width: 0;
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
}
.est__referencia-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--space-2xs);
}
.est__referencia-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.est__referencia-nombre {
  min-width: 0;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}
.est__referencia-detalle {
  display: block;
  color: var(--c-ink-70);
  font-size: var(--fs-micro);
}
.est__referencia-valor,
.est__referencia-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--c-ink-70);
}
.est__referencia-pct {
  min-width: 3.6em;
  color: var(--c-ink);
}

/* --- Comparativo --- */
.est__comparativo-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm) var(--space-md);
}
.est__comparativo-cabecera .tablero__figura-nota {
  max-width: 60ch;
}

/* Selector Cantidad / Facturación: dos botones pegados. */
.est__selector {
  display: inline-flex;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.est__selector button {
  padding: var(--space-2xs) var(--space-sm);
  min-height: 36px;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-70);
  background: var(--c-white);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.est__selector button + button {
  border-left: 1px solid var(--c-line);
}
.est__selector button.is-active {
  background: var(--c-cream);
  color: var(--c-ink);
}

.est__subtitulo {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--font-display);
  font-size: var(--fs-base, 1rem);
  font-weight: 500;
  color: var(--c-ink);
}

/* Gráficos chicos: tres por fila en pantalla ancha. */
.est__multiples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (max-width: 1100px) {
  .est__multiples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .est__multiples {
    grid-template-columns: minmax(0, 1fr);
  }
}
.est__multiple {
  padding: var(--space-sm);
}
.est__multiple-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}

/* --- Qué explica la variación (debajo del comparativo) --- */
.est__conclusiones {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 var(--space-md);
  padding-left: 1.1em;
  list-style: disc;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-ink);
  max-width: 95ch;
}
.est__conclusiones li::marker {
  color: var(--c-taupe);
}
.est__conclusiones strong {
  font-weight: 500;
}
.est__puente {
  margin-top: var(--space-sm);
}
.est__control {
  margin-top: var(--space-2xs);
  font-size: var(--fs-micro);
  color: var(--c-ink-70);
}
.est__control--error {
  color: #a3564a;
  font-weight: 500;
}
.est__metodo {
  margin-top: var(--space-sm);
  margin-bottom: 0;
}
/* La tabla por tipo tiene siete columnas: en pantalla chica se desliza
   dentro de su caja en vez de empujar la página para el costado. */
.est__explicacion .tablero__tabla-caja {
  overflow-x: auto;
}

/* En la fila de filtros, el selector Sólo el mes / Acumulado tiene el
   mismo alto que el campo de mes de al lado, para que queden alineados. */
.tablero__filtros .est__selector button {
  min-height: 46px;
}

/* ============ VISTA PREVIA ANTES DE REGISTRAR ============ */
/* Ventana (<dialog>) con lo que se va a guardar. Misma estética que la
   intranet: hairlines, sin sombras grandes, números tabulares. */
.vp {
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  color: var(--c-ink);
}
.vp::backdrop {
  background: rgba(35, 32, 29, 0.45);
}
.vp__marco {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}
.vp__encabezado {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-h3);
}
.vp__cuerpo {
  overflow-y: auto;
  padding: var(--space-sm) var(--space-md);
}
.vp__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.vp__numero {
  font-weight: 600;
}
.vp__fecha {
  margin-left: auto;
  color: var(--c-ink-70);
  font-variant-numeric: tabular-nums;
}
.vp__nota {
  margin: var(--space-2xs) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
}
.vp__nota--aviso {
  padding-left: var(--space-2xs);
  border-left: 2px solid #a3564a;
  color: #a3564a;
}
.vp__datos,
.vp__importes {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-md);
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-sm);
}
.vp__datos dt,
.vp__importes dt {
  color: var(--c-ink-70);
}
.vp__datos dd,
.vp__importes dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.vp__importes dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.vp__titulo {
  margin: var(--space-md) 0 var(--space-2xs);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-taupe);
}
.vp__tabla-envoltura {
  overflow-x: auto;
}
.vp__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.vp__tabla th,
.vp__tabla td {
  padding: var(--space-3xs) var(--space-2xs);
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
  vertical-align: top;
}
.vp__tabla th {
  font-weight: 600;
  color: var(--c-ink-70);
  border-bottom-color: var(--c-line);
}
.vp__tabla .vp__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vp__total td {
  font-weight: 600;
  border-top: 1px solid var(--c-line);
  border-bottom: 0;
}
.vp__combo {
  display: block;
  font-size: var(--fs-micro);
  color: var(--c-brown);
}
.vp__a-cobrar {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  line-height: 1.2;
}
.vp__a-cobrar span {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-70);
}
.vp__a-cobrar strong {
  font-size: var(--fs-h3);
  font-variant-numeric: tabular-nums;
}
.vp__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--c-line);
}
.vp__acciones .btn--enviar {
  align-self: auto;
}
@media (max-width: 560px) {
  .vp__a-cobrar {
    flex: 1 1 100%;
  }
  .vp__acciones .btn {
    flex: 1 1 100%;
  }
  .vp__datos,
  .vp__importes {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .vp__datos dd,
  .vp__importes dd {
    margin-bottom: var(--space-2xs);
    text-align: left;
  }
}

/* ============ TIMBRES EN EFECTIVO ============ */
.caja__tilde {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.caja__tilde input {
  accent-color: var(--c-taupe);
}
/* Reparto del cobro: efectivo (timbres) + resto con el medio elegido. */
.caja__reparto {
  margin: calc(var(--space-md) * -0.5) 0 var(--space-md);
  padding: var(--space-2xs) var(--space-xs);
  border-left: 2px solid var(--c-sage);
  background: var(--c-taupe-08);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
/* Resumen del día: ingresos abiertos por medio de pago. */
.caja__total-subtitulo dt {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-taupe);
}
.caja__total-medios {
  margin-top: var(--space-sm);
}
.caja__total-medios .caja__total-nota {
  padding-left: 0;
}

/* Paso 3 de la ventana: resultado del registro. */
.vp[data-estado='guardando'] .vp__marco {
  cursor: progress;
}
.vp[data-estado='guardando'] .vp__cuerpo {
  opacity: 0.55;
}
.vp__ok {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-left: 3px solid var(--c-sage);
  background: var(--c-taupe-08);
}
.vp__ok-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-sage);
  color: var(--c-white);
  font-weight: 700;
}
.vp__ok-texto {
  margin: 0;
  font-weight: 600;
}
.vp__error {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-left: 3px solid #a3564a;
  background: rgba(163, 86, 74, 0.08);
  color: #a3564a;
  font-weight: 500;
}

/* ======================================================================
   VISTA CAJA (28/10/2026): resumen del día, egresos y cierre de caja.
   Mismo lenguaje que el resto de la intranet: líneas finas, fondo crema,
   sin sombras. Los colores de estado son los ya usados (verde de
   "Ingreso", terracota de "Egreso" y de los errores).
   ====================================================================== */

/* Encabezado con el día a la derecha */
.vista-caja__encabezado {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
}
.vista-caja__dia {
  min-width: 12rem;
  margin: 0;
}

/* Cartel del estado del día (abierto / cerrado) */
.caja__estado-dia {
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--c-taupe);
  background: var(--c-cream);
  font-size: var(--fs-sm);
}
.caja__estado-dia--abierto {
  border-left-color: #4a6b45;
}
.caja__estado-dia--cerrado {
  border-left-color: var(--c-brown);
  background: var(--c-cream-alt);
  font-weight: 500;
}
.caja__estado-dia--error {
  border-left-color: #a3564a;
  color: #a3564a;
}

/* Columna izquierda: egreso arriba, cierre abajo */
.vista-caja__columna {
  display: grid;
  /* minmax(0, 1fr): sin esto la columna toma el ancho mínimo de su
     contenido y en el celular se sale de la pantalla. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  min-width: 0;
}

.caja__tarjeta {
  padding: var(--space-lg);
  border: 1px solid var(--c-line);
}
.caja__tarjeta-titulo {
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-h3);
}
/* Día cerrado: el formulario de egresos queda a la vista pero apagado. */
.caja__tarjeta--bloqueada {
  opacity: 0.55;
}
.caja__tarjeta--bloqueada [data-egreso-feedback] {
  opacity: 1;
}

/* ---------- Cierre ---------- */
.cierre__periodo {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink-70);
}
.cierre__aviso {
  margin-bottom: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border-left: 2px solid var(--c-taupe);
  font-size: var(--fs-xs);
  color: var(--c-ink-70);
}
.cierre__aviso--error {
  border-left-color: #a3564a;
  color: #a3564a;
}

.cierre__tabla-envoltura {
  overflow-x: auto;
  margin-bottom: var(--space-md);
}
.cierre__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.cierre__tabla th,
.cierre__tabla td {
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
  vertical-align: middle;
}
.cierre__tabla thead th {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--c-taupe);
  border-bottom-color: var(--c-line);
}
.cierre__tabla tbody th {
  font-weight: 400;
  color: var(--c-ink-soft);
  white-space: nowrap;
}
.cierre__tabla .cierre__num {
  text-align: right;
  white-space: nowrap;
}
.cierre__fila--total th,
.cierre__fila--total td {
  font-weight: 600;
  color: var(--c-ink);
  border-bottom-color: var(--c-line);
}
.cierre__fila--entrada {
  background: var(--c-taupe-08);
}
.cierre__campo {
  width: 100%;
  min-width: 7rem;
  max-width: 11rem;
  margin-left: auto;
  text-align: right;
  padding-block: var(--space-2xs);
}
.cierre__nota {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-ink-70);
  white-space: normal;
}
.cierre__dif--hay {
  color: #a3564a;
  font-weight: 600;
}
.cierre__dif--ok {
  color: #4a6b45;
  font-weight: 500;
}
.cierre__obs-req {
  color: #a3564a;
  font-size: var(--fs-xs);
}

.cierre__datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2xs) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--fs-sm);
}
.cierre__datos dt {
  color: var(--c-ink-70);
}
.cierre__anular {
  margin-top: var(--space-md);
}
.cierre__anular-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Etiqueta "Cierre" en la ventana de confirmación */
.etiqueta--cierre {
  color: var(--c-brown);
}

@media (max-width: 520px) {
  .caja__tarjeta {
    padding: var(--space-md);
  }
  .cierre__campo {
    min-width: 4.75rem;
  }
  .cierre__tabla {
    font-size: var(--fs-xs);
  }
  .cierre__tabla th,
  .cierre__tabla td {
    padding-inline: var(--space-2xs);
  }
  /* En el celular el rótulo puede ir en dos renglones: así la tabla
     entra entera sin tener que deslizarla. */
  .cierre__tabla tbody th {
    white-space: normal;
  }
}

/* Qué campo falta, debajo del botón de registrar (28/10/2026). */
.caja__faltan {
  margin-top: var(--space-sm);
}

/* Egresos en negativo en la tabla del día (28/10/2026). */
.caja__col-monto--egreso {
  color: #a3564a;
}