/* =====================================================================
   pantallas.css — el acomodo de cada pantalla.
   Solo acomodo: tamaños, columnas y espacios. Los componentes viven en
   componentes.css y los valores en tokens.css.
   ===================================================================== */

/* ─── Marco de la aplicación (todas las pantallas del sistema) ──────── */

.app {
  min-height: var(--alto-pantalla);
  padding-bottom: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom));
}
.app-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio-4) var(--margen-pantalla) var(--espacio-16);
}
@media (min-width: 768px) {
  .app {
    padding-bottom: 0;
    padding-left: var(--ancho-lateral);
  }
  .app-contenido {
    padding: var(--espacio-6);
  }
}

.avisos-sistema {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--margen-pantalla) 0;
}
.avisos-sistema:empty {
  display: none;
}

/* ─── Pantallas de lista (clientes, inventario, reparaciones) ──────── */

.pantalla-lista {
  max-width: var(--ancho-lectura);
}
.pantalla-titulo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}
/* Título con botones a la derecha; en celular los botones bajan */
.pantalla-titulo-con-accion {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-3);
}
/* Más juntos, para que "Agregar · Importar · Exportar" quepan en un renglón a 375 px */
.pantalla-titulo-con-accion > .grupo-botones {
  gap: var(--espacio-2);
}
.pantalla-secciones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-6);
}
.seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.pantalla-lista .fila,
.pantalla-admin .fila {
  flex-wrap: wrap;
}
.pantalla-lista .fila-texto,
.pantalla-admin .fila-texto {
  flex-basis: var(--ancho-tarjeta-minimo);
}

/* Clientes: buscador, "Todos / Dormidos" y las semanas */
.barra-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}
.barra-herramientas > .buscador {
  flex: 1 1 var(--ancho-texto-min);
}
.barra-herramientas > .fichas {
  flex-basis: 100%;
  align-items: center;
}
.importar-vista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.importar-vista:empty {
  display: none;
}
/* Importar: qué columna del archivo es cada dato, uno debajo
   de otro (cada opción dice la columna, su título y un ejemplo). */
.importar-paso {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.importar-paso[hidden] {
  display: none;
}
.importar-mapeo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.importar-mapeo select.entrada {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

/* ─── Panel: cifras arriba y tarjetas en dos columnas en computadora ─ */

.panel-tarjetas {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}
@media (min-width: 1024px) {
  .panel-tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel-tarjetas > .tarjeta-ancha {
    grid-column: 1 / -1;
  }
}

/* ─── Corte con PIN: el PIN en grande, en el centro ────────────────── */

.corte-pin {
  width: 100%;
  max-width: var(--ancho-ventana);
}
/* Lo pendiente de pago y su botón "Marcar como pagado" */
.corte-pendiente {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
}
.entrada-pin {
  min-height: var(--alto-control-grande);
  font-family: var(--fuente-cifras);
  font-size: var(--texto-2xl);
  letter-spacing: var(--letras-folio);
  text-align: center;
}

/* ─── Exportar: ventas por fechas y todo el historial ──────────────── */

.exportar-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
/* Otras fechas: "Desde" y "Hasta" lado a lado si caben */
.exportar-fechas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}
.exportar-fechas[hidden] {
  display: none;
}
.exportar-fechas > .campo {
  flex: 1 1 calc(var(--ancho-tarjeta-minimo) / 2);
}

/* ─── Inventario ─────────────────────────────────────────────────────── */

/* "Productos" y los filtros en un renglón si caben */
.inventario-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.inventario-encabezado > .segmentado {
  flex: 0 1 auto;
  max-width: 100%;
}
/* "Por reponer" abajo de la existencia, para no apretar el nombre */
.fila-dato > .marca {
  display: flex;
  width: fit-content;
  margin-top: var(--espacio-1);
  margin-left: auto;
  font-family: var(--fuente-texto);
}

/* ─── Reporte de ventas ─────────────────────────────────────────────── */

/* Otras fechas: "Desde", "Hasta" y el botón en un renglón si caben */
.reporte-fechas {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espacio-3);
}
.reporte-fechas > .campo {
  flex: 1 1 var(--ancho-tarjeta-minimo);
}
/* Cada forma de pago: en celular, el botón baja a su propio renglón */
.reporte-pago {
  flex-wrap: wrap;
}
.reporte-pago > .fila-texto {
  flex-basis: var(--ancho-tarjeta-minimo);
}
.reporte-detalle {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.reporte-pendiente {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.reporte-celda-nombre {
  display: flex;
  flex-direction: column;
  /* En el teléfono el nombre no se aprieta: la tabla se desliza */
  min-width: var(--ancho-tarjeta-minimo);
  white-space: normal;
}
/* Reporte de una persona: "Todo el equipo" arriba, sin estirarse */
.reporte-volver {
  align-self: flex-start;
}

/* ─── Entrar ────────────────────────────────────────────────────────── */

.pantalla-entrar {
  display: flex;
  flex-direction: column;
  min-height: var(--alto-pantalla);
}
.entrar {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--espacio-5);
  width: 100%;
  max-width: var(--ancho-ventana);
  margin: 0 auto;
  padding: var(--espacio-10) var(--margen-pantalla) var(--espacio-6);
}
.entrar-marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.entrar-logo {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radio-control);
  font-size: var(--texto-lg);
}
.entrar-recientes {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.entrar-ayuda {
  text-align: center;
}

/* ─── estilos.html: la guía de componentes ──────────────────────────── */

/* Marco: menú de secciones a la izquierda (computadora) o arriba (celular) */
@media (min-width: 1024px) {
  .estilos-marco {
    display: grid;
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
    align-items: start;
  }
}
.estilos-principal {
  min-width: 0;
}

.estilos-encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-8) var(--margen-pantalla) var(--espacio-6);
  background: var(--color-tarjeta);
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.estilos-encabezado > .texto-suave {
  max-width: var(--ancho-lectura);
}
@media (min-width: 1024px) {
  .estilos-encabezado {
    padding: var(--espacio-10) var(--espacio-8) var(--espacio-8);
  }
}

/* Menú de la guía, agrupado por secciones y con un ícono por opción */
.indice {
  position: sticky;
  top: 0;
  z-index: var(--capa-barra);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
.indice-boton {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  width: 100%;
  min-height: var(--alto-control-grande);
  padding: 0 var(--margen-pantalla);
  border: 0;
  background: transparent;
  font-weight: var(--peso-fuerte);
  text-align: left;
  cursor: pointer;
}
.indice-actual {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-texto-suave);
  font-weight: var(--peso-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.indice-boton[aria-expanded="true"] > .icono:last-child {
  transform: rotate(180deg);
}
.indice-lista {
  display: none;
  flex-direction: column;
  gap: var(--espacio-4);
  max-height: calc(var(--alto-pantalla) - var(--alto-control-grande));
  overflow-y: auto;
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-5);
  border-top: var(--borde-fino) solid var(--color-linea);
}
.indice[data-abierto] .indice-lista {
  display: flex;
}
.indice-marca {
  display: none;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}
.indice-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-0);
}
.indice-grupo-titulo {
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.indice-enlace {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border-radius: var(--radio-control);
  color: var(--color-texto-suave);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.indice-enlace:hover {
  background: var(--color-hundido);
  color: var(--color-texto);
}
.indice-enlace[aria-current="true"] {
  background: var(--color-acento-tenue);
  color: var(--color-texto);
}
.indice-enlace[aria-current="true"] > .icono {
  color: var(--color-acento-texto);
}
@media (min-width: 1024px) {
  .indice {
    height: var(--alto-pantalla);
    overflow-y: auto;
    border-bottom: 0;
    border-right: var(--borde-fino) solid var(--color-linea);
  }
  .indice-boton {
    display: none;
  }
  .indice-lista,
  .indice[data-abierto] .indice-lista {
    display: flex;
    max-height: none;
    padding: var(--espacio-4) var(--espacio-3);
    border-top: 0;
  }
  .indice-marca {
    display: flex;
  }
}

/* Encabezado de cada sección grande de la guía */
.grupo-muestras {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-12);
}
.grupo-encabezado {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-4);
  padding-bottom: var(--espacio-6);
  border-bottom: var(--borde-grueso) solid var(--color-texto);
}
.grupo-icono {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  flex: none;
  border-radius: var(--radio-control);
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
}
.grupo-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  max-width: var(--ancho-lectura);
}

.controles-personalizacion {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--espacio-5) var(--espacio-10);
}
.boton-muestra-ancho {
  max-width: var(--ancho-maqueta-celular);
}

.selector-acento {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.acento-opcion {
  width: var(--toque-min);
  height: var(--toque-min);
  padding: 0;
  border: var(--borde-grueso) solid var(--color-tarjeta);
  border-radius: var(--radio-pastilla);
  box-shadow: 0 0 0 var(--borde-fino) var(--color-linea);
  cursor: pointer;
  transition: box-shadow var(--duracion) var(--curva);
}
.acento-opcion[aria-pressed="true"] {
  box-shadow: 0 0 0 var(--borde-grueso) var(--color-texto);
}
.acento-naranja  { background: var(--acento-naranja); }
.acento-azul     { background: var(--acento-azul); }
.acento-rosa     { background: var(--acento-rosa); }
.acento-verde    { background: var(--acento-verde); }
.acento-morado   { background: var(--acento-morado); }
.acento-amarillo { background: var(--acento-amarillo); }
.acento-rojo     { background: var(--acento-rojo); }
.acento-grafito  { background: var(--acento-grafito); }

.estilos-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-16);
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio-10) var(--margen-pantalla);
}
@media (min-width: 1024px) {
  .estilos-contenido {
    padding: var(--espacio-12) var(--espacio-8);
  }
}

.muestra {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-6);
  min-width: 0;
  scroll-margin-top: calc(var(--alto-control-grande) + var(--espacio-4));
}
@media (min-width: 1024px) {
  .muestra {
    scroll-margin-top: var(--espacio-6);
  }
}
.muestra-encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  max-width: var(--ancho-lectura);
}
.muestra-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}

.estilos-dos-columnas {
  display: grid;
  gap: var(--espacio-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .estilos-dos-columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Paleta de colores */
.paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-tarjeta-minimo), 1fr));
  gap: var(--espacio-4);
}
.color {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin: 0;
  font-size: var(--texto-sm);
}
.color figcaption {
  display: flex;
  flex-direction: column;
}
.color figcaption .cifra {
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}
.color-muestra {
  height: var(--alto-control-grande);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
}
.muestra-fondo          { background: var(--color-fondo); }
.muestra-tarjeta        { background: var(--color-tarjeta); }
.muestra-texto          { background: var(--color-texto); }
.muestra-texto-suave    { background: var(--color-texto-suave); }
.muestra-linea          { background: var(--color-linea); }
.muestra-acento         { background: var(--color-acento); }
.muestra-acento-texto   { background: var(--color-acento-texto); }
.muestra-info           { background: var(--estado-info); }
.muestra-atencion       { background: var(--estado-atencion); }
.muestra-bien           { background: var(--estado-bien); }
.muestra-apagado        { background: var(--estado-apagado); }
.muestra-cancelado      { background: var(--estado-cancelado); }
.muestra-alerta         { background: var(--estado-alerta); }

/* Maquetas: marcos punteados donde se muestran piezas que en el sistema
   van fijas (barra inferior, menú lateral, botón flotante, brindis). */
.maqueta {
  min-width: 0;
  overflow: hidden;
  border: var(--borde-fino) dashed var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-fondo);
}
.maqueta-celular {
  width: 100%;
  max-width: var(--ancho-maqueta-celular);
  background: var(--color-tarjeta);
}
.maqueta .encabezado,
.maqueta .barra-inferior,
.maqueta .menu-lateral,
.maqueta .brindis {
  position: static;
}
.maqueta .barra-inferior {
  display: grid;
  border-top: 0;
}
.maqueta-lateral .menu-lateral {
  display: flex;
  width: 100%;
  max-width: var(--ancho-lateral);
  min-height: var(--alto-maqueta);
}
.maqueta-brindis {
  display: flex;
  justify-content: center;
  padding: var(--espacio-6);
}
.maqueta .brindis {
  transform: none;
}

.avisos-muestra {
  display: grid;
  gap: var(--espacio-3);
}
@media (min-width: 1024px) {
  .avisos-muestra {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.muestra-panel {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}

/* El ticket a 58 y a 80 mm, uno junto al otro (o uno debajo del otro). */
.tickets-muestra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--espacio-6);
}
.progreso-muestra {
  transform: scaleX(0.6);
}
@media (min-width: 1024px) {
  .muestra-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── Campos en línea ────────────────────────────────────────────────── */

/* Dos campos lado a lado (en celular, uno bajo otro) */
.campos-en-linea,
.rejilla-campos {
  display: grid;
  gap: var(--espacio-4);
}
@media (min-width: 768px) {
  .campos-en-linea {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* ─── Administración de Localiapps (/admin): sin menú lateral ───────── */

@media (min-width: 768px) {
  .app-admin {
    padding-left: 0;
  }
}
.pantalla-admin {
  max-width: var(--ancho-lectura);
}
.pantalla-admin > .pantalla-titulo > .boton-texto {
  align-self: flex-start;
  margin-left: calc(var(--espacio-3) * -1);
}
.lista-personas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.persona-alta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.persona-alta > .boton-texto {
  align-self: flex-end;
}
.credenciales {
  border-color: var(--aviso-exito);
}
.pantalla-admin .fila-acciones > .boton {
  min-height: var(--toque-min);
}

/* ─── Bitácora ──────────────────────────────────────────────────────── */

/* Los filtros no caben en una fila de celular: van de tres en tres. */
.bitacora-filtro {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
}
@media (min-width: 480px) {
  .bitacora-filtro {
    grid-template-columns: none;
    grid-auto-flow: column;
  }
}

/* ─── Vender: buscador y venta; en computadora, lado a lado ────────── */

.pantalla-vender {
  max-width: var(--ancho-maximo);
}
.vender {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}
.vender-buscar {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  min-width: 0;
}
@media (min-width: 1024px) {
  .vender {
    grid-template-columns: minmax(0, 1fr) var(--ancho-venta);
  }
  /* La venta se queda a la vista mientras se busca */
  .vender-venta {
    position: sticky;
    top: calc(var(--alto-encabezado) + var(--espacio-4));
  }
}
/* El precio de un renglón: el dueño lo toca para cambiarlo */
.venta-renglon-precio {
  justify-self: start;
  min-height: var(--toque-min);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: var(--espacio-1);
  cursor: pointer;
}
.venta-descuento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  color: var(--color-texto-suave);
}
.venta-descuento > .cifra {
  margin-left: auto;
}
.vender-cliente {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.vender-cliente-abrir {
  align-self: flex-start;
}
.vender-listo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-2);
  text-align: center;
}

/* ─── Caja, gastos y saldo ─────────────────────────────────────────────── */

.pantalla-caja,
.pantalla-gastos,
.pantalla-devolucion,
.pantalla-reparacion,
.pantalla-saldo {
  max-width: var(--ancho-lectura);
}
/* Pantalla angosta: las cifras de dos en dos también en computadora */
.pantalla-caja .panel-datos,
.pantalla-gastos .panel-datos,
.pantalla-saldo .panel-datos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.caja-abrir {
  gap: var(--espacio-4);
}
/* Saldo → Comisiones: cada tipo con su comisión y su cargo */
.saldo-tipo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.caja-abrir .vacio {
  padding-top: 0;
}
.caja-cerrar {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
/* "‹ Septiembre 2026 ›" */
.gastos-mes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.gastos-mes-hueco {
  width: var(--toque-min);
}

/* ─── Compras ───────────────────────────────────────────────────────── */

.pantalla-compras {
  max-width: var(--ancho-lectura);
}
.pantalla-compras .panel-datos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ─── Contar mercancía ──────────────────────────────────────────────── */

.pantalla-conteo {
  max-width: var(--ancho-lectura);
}
.conteo-productos {
  display: flex;
  flex-direction: column;
}
.conteo-grupo {
  margin: var(--espacio-4) 0 var(--espacio-1);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
}
.conteo-producto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ancho-denominacion);
  align-items: center;
  gap: var(--espacio-3);
  padding-block: var(--espacio-2);
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.conteo-producto-nombre {
  min-width: 0;
  overflow-wrap: anywhere;
}
.conteo-producto .entrada {
  text-align: end;
}


/* ─── Configuración → Ticket: el editor y su vista previa ──────────── */

.ticket-editor {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}
.ticket-vista {
  padding: var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}
@media (min-width: 1024px) {
  .ticket-editor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ticket-editor-vista {
    position: sticky;
    top: calc(var(--alto-encabezado) + var(--espacio-4));
  }
}


/* ─── Panel del dueño ───────────────────────────────────────────────── */

/* "Sin abrir", "Cuadró": con la letra del texto y pueden partirse */
.dato-valor-texto {
  font-family: var(--fuente-texto);
  white-space: normal;
}
/* Cada dato del día lleva a su pantalla */
.dato-enlace {
  color: var(--color-texto);
  text-decoration: none;
}
.dato-enlace:hover {
  background: var(--color-hundido);
}
/* Las reparaciones por estado: en la tarjeta (media pantalla), de dos en dos */
.pantalla-panel .estados-cuentas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
a.estado-cuenta:hover {
  background: var(--color-hundido);
}


/* ─── Reporte y corte del día ───────────────────────────────────────── */

/* Cifras de un mes ($134,894): un tamaño menos, para que quepan cuatro por renglón */
.panel-datos-largos .dato-valor {
  font-size: var(--texto-xl);
}

.reporte-acciones {
  flex-wrap: wrap;
}
/* ← [fecha] → sin partirse */
.corte-dia {
  flex-wrap: nowrap;
  align-items: center;
}
.corte-dia .entrada {
  width: auto;
}
/* El papel como saldrá de la impresora, sobre fondo gris */
.corte-papel > .ticket {
  margin-top: var(--espacio-2);
}
.corte-papel {
  background: var(--color-hundido);
}