/* Estilos base del sistema.
 *
 * spec §9.4 — accesibilidad como requisito, no como preferencia estética:
 *   - tipografía base mínima 18px
 *   - contraste mínimo 4.5:1 (WCAG AA)
 *   - áreas táctiles mínimo 44x44px
 * Los valores de este archivo se verifican con CA-42a y CA-42b.
 */

:root {
  --texto: #16202c;          /* sobre --fondo: contraste 14.8:1 */
  --texto-suave: #4a5765;    /* sobre --fondo: contraste 7.4:1  */
  --fondo: #f4f6f8;
  --superficie: #ffffff;
  --borde: #c3ccd6;

  --principal: #0b5cab;      /* sobre blanco: 6.4:1 */
  --principal-oscuro: #084382;
  --error: #a01a1a;          /* sobre blanco: 7.1:1 */
  --error-fondo: #fdecec;
  --exito: #1a6b33;
  --exito-fondo: #e9f6ed;

  --radio: 10px;
  --toque-minimo: 44px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;           /* CA-42a */
  line-height: 1.55;
  color: var(--texto);

  /* La imagen del local como fondo, con un velo oscuro encima.
     El velo asienta la imagen para que no compita con el contenido, pero es
     suave a propósito: la foto ya es oscura de por sí (luminancia media 59 de
     255), y un velo fuerte la dejaba directamente negra.

     Lo que protege la lectura no es el velo: es que **nada se lee sobre la
     imagen**. Todo el contenido vive dentro de `.contenido`, que tiene su
     propio fondo claro, y el pie tiene el suyo. La imagen solo se ve en los
     márgenes (§9.4). */
  background-color: #0e151d;
  background-image:
    linear-gradient(rgba(14, 21, 29, 0.35), rgba(14, 21, 29, 0.35)),
    url("../img/fondo-local.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1 { font-size: 1.85rem; margin: 0 0 1.2rem; }

/* --- Barra superior --- */
.barra {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.marca { font-size: 1.15rem; font-weight: 700; color: var(--texto); text-decoration: none; }
.marca img { display: block; height: 40px; width: auto; }
.barra-derecha { display: flex; align-items: center; gap: 1rem; }
.barra-derecha form { margin: 0; }
.usuario { color: var(--texto-suave); }

/* El contenido va sobre su propio fondo claro, apenas translúcido, para que la
   foto del local se intuya detrás sin competir con el texto.

   El 80% está medido, no elegido a ojo: con el velo del fondo, el peor caso
   —una zona clara del flyer justo detrás de un párrafo— deja el texto en 9,9:1,
   muy por encima del mínimo de 4,5:1 que pide el spec (§9.4). Bajar de ese 80%
   empieza a comerse el margen.

   Las **dos** declaraciones son necesarias. `color-mix()` no existe en
   navegadores viejos, y una propiedad que el navegador no entiende se descarta
   entera: sin la primera línea, ahí `.contenido` se quedaría sin fondo y el
   texto oscuro caería directamente sobre la imagen. */
.contenido {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  background: var(--fondo);
  background: color-mix(in srgb, var(--fondo) 80%, transparent);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
}

/* --- Pie ---
   Su fondo es casi opaco a propósito: es el único texto que queda sobre la
   imagen, y si dependiera de lo que hay detrás, una zona clara de la foto lo
   volvería ilegible. Así el contraste no cambia según qué imagen se ponga. */
.pie {
  padding: 1.1rem 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  color: #c3ccd6;                    /* sobre este fondo: 10,4:1 */
  background: rgba(14, 21, 29, 0.92);
}
.pie p { margin: 0; }

/* --- Tarjetas y formularios --- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.75rem;
}
.tarjeta-angosta { max-width: 440px; margin: 3rem auto; }

label { display: block; margin: 1.1rem 0 0.35rem; font-weight: 600; }

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
select {
  width: 100%;
  min-height: var(--toque-minimo);
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}
input:focus-visible, select:focus-visible, .boton:focus-visible, .accion:focus-visible {
  outline: 3px solid var(--principal);
  outline-offset: 2px;
}

/* --- Botones --- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque-minimo);   /* CA-42b */
  min-width: var(--toque-minimo);
  padding: 0.65rem 1.4rem;
  font: inherit;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
}
.boton-principal { color: #fff; background: var(--principal); }
.boton-principal:hover { background: var(--principal-oscuro); }
.boton-secundario {
  color: var(--texto);
  background: var(--superficie);
  border-color: var(--borde);
}
.boton-ancho { width: 100%; margin-top: 1.75rem; }

/* --- Avisos --- */
.avisos { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.aviso {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radio);
  border-left: 5px solid;
  margin-bottom: 0.75rem;
}
/* El color nunca es el único indicador: cada aviso lleva su texto (CA-42b). */
.aviso-error { color: var(--error); background: var(--error-fondo); border-color: var(--error); }
.aviso-success { color: var(--exito); background: var(--exito-fondo); border-color: var(--exito); }

/* --- Cuadros de diálogo ---
   Un aviso que el usuario tiene que notar sí o sí: título, ícono y texto
   grande. El ícono acompaña, nunca reemplaza a las palabras (CA-42b). */
.dialogo {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 2px solid;
  border-radius: var(--radio);
}
.dialogo-icono {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
}
.dialogo-texto { flex: 1; }
.dialogo-titulo { display: block; font-size: 1.15rem; }
.dialogo p { margin: 0.2rem 0 0; }
.dialogo-error { color: var(--error); background: var(--error-fondo); border-color: var(--error); }
.dialogo-error .dialogo-icono { background: var(--error); }
.dialogo-success { color: var(--exito); background: var(--exito-fondo); border-color: var(--exito); }
.dialogo-success .dialogo-icono { background: var(--exito); }

.ayuda { margin-top: 1.75rem; color: var(--texto-suave); }

/* --- Menú principal --- */
.acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.accion {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 96px;
  padding: 1.4rem;
  text-decoration: none;
  color: var(--texto);
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}
.accion:hover { border-color: var(--principal); }
.accion-principal {
  color: #fff;
  background: var(--principal);
  border-color: var(--principal);
  grid-column: 1 / -1;
}
.accion-principal:hover { background: var(--principal-oscuro); border-color: var(--principal-oscuro); }
.accion-titulo { font-size: 1.3rem; font-weight: 700; }
.accion-detalle { font-size: 0.95rem; opacity: 0.9; }

/* ==========================================================================
   Pantalla de ventas (CU-02)
   Es la pantalla que más se usa: todo lo importante grande y a la vista.
   ========================================================================== */

h2 { font-size: 1.25rem; margin: 1.4rem 0 0.75rem; }
h2:first-child { margin-top: 0; }
/* Dentro del formulario el ritmo es más apretado: la prioridad es que todo
   entre en una pantalla. */
.formulario h2 { margin: 0.75rem 0 0.6rem; }

.tarjeta + .tarjeta { margin-top: 1.25rem; }
.tarjeta-atencion { border-color: var(--error); border-width: 2px; }
.bloque-caja { max-width: 520px; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Buscador ---
   Cada campo va en su .campo con su etiqueta visible arriba: en una pantalla de
   mostrador no alcanza con el placeholder, que desaparece al escribir (RN-27).

   Ojo con la especificidad: `input[type="text"]` vale (0,1,1) y le gana a una
   clase suelta como `.campo-cantidad` (0,1,0). Por eso el ancho de los campos
   se controla en el contenedor flex y no con `width` sobre el input, que era lo
   que hacía que el buscador se colapsara y la cantidad ocupara toda la fila. */
.fila-busqueda { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.fila-busqueda .campo { display: flex; flex-direction: column; }
.fila-busqueda label { margin-top: 0; }
.campo-termino { flex: 1 1 22rem; min-width: 0; }
.campo-termino input { font-size: 1.15rem; }
.campo-cantidad { flex: 0 0 8rem; }
.campo-cantidad input { text-align: center; font-size: 1.15rem; }
.campo-boton { flex: 0 0 auto; }
.campo-boton .boton { height: var(--toque-minimo); padding-inline: 1.75rem; }

/* Campo de cantidad dentro de la tabla de la venta. */
.entrada-cantidad { width: 5.5rem; text-align: center; }
input.entrada-cantidad { width: 5.5rem; }

.fila-corregir { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.fila-corregir input { flex: 0 0 8rem; text-align: center; font-size: 1.15rem; }
.unidad-grande { font-size: 1.15rem; font-weight: 600; color: var(--texto-suave); }

/* --- Resultados de búsqueda --- */
.resultados { list-style: none; margin: 1rem 0 0; padding: 0; }
.resultados li + li { margin-top: 0.5rem; }
.resultado {
  display: flex; flex-direction: column; gap: 0.25rem;
  width: 100%; min-height: var(--toque-minimo);
  padding: 0.85rem 1rem; text-align: left; font: inherit; cursor: pointer;
  background: var(--superficie); color: var(--texto);
  border: 2px solid var(--borde); border-radius: var(--radio);
}
.resultado:hover { border-color: var(--principal); background: #f0f6fc; }
.resultado-descripcion { font-weight: 600; font-size: 1.1rem; }
.resultado-datos { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--texto-suave); font-size: 0.95rem; }
.resultado-precio { font-weight: 600; color: var(--texto); }

/* ==========================================================================
   Tablas
   Todas las del sistema comparten estas reglas. Antes cada pantalla repetía
   las suyas y terminaron distintas: una columna de mes pegada a la de al lado
   se lee como un solo dato («Septiembre 2026 3»).

   Las tres decisiones que hacen la diferencia:
     - separación horizontal generosa entre columnas (1,1rem por lado);
     - los números no se parten nunca a mitad de importe (`nowrap`);
     - filas alternadas, para no perder el renglón al recorrer una fila ancha.
   ========================================================================== */

.tabla-venta,
.tabla-listado,
.tabla-ingreso,
.tabla-etiquetas,
.tabla-ejemplos { width: 100%; border-collapse: collapse; }

.tabla-venta th,
.tabla-listado th,
.tabla-ingreso th,
.tabla-etiquetas th,
.tabla-ejemplos th {
  text-align: left; font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texto-suave);
  padding: 0.4rem 1.1rem 0.7rem; border-bottom: 2px solid var(--borde);
  white-space: nowrap;
}

.tabla-venta td,
.tabla-listado td,
.tabla-ingreso td,
.tabla-etiquetas td,
.tabla-ejemplos td {
  padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}
.tabla-ingreso td,
.tabla-etiquetas td { vertical-align: top; }

/* La primera y la última columna se alinean con el borde de la tarjeta: el
   relleno de la tarjeta ya da el aire de los costados. */
.tabla-venta th:first-child, .tabla-venta td:first-child,
.tabla-listado th:first-child, .tabla-listado td:first-child,
.tabla-ingreso th:first-child, .tabla-ingreso td:first-child,
.tabla-etiquetas th:first-child, .tabla-etiquetas td:first-child,
.tabla-ejemplos th:first-child, .tabla-ejemplos td:first-child { padding-left: 0; }
.tabla-venta th:last-child, .tabla-venta td:last-child,
.tabla-listado th:last-child, .tabla-listado td:last-child,
.tabla-ingreso th:last-child, .tabla-ingreso td:last-child,
.tabla-etiquetas th:last-child, .tabla-etiquetas td:last-child,
.tabla-ejemplos th:last-child, .tabla-ejemplos td:last-child { padding-right: 0; }

/* Un importe partido en dos renglones deja de leerse como un número. */
.tabla-venta .der, .tabla-venta .cen,
.tabla-listado .der, .tabla-listado .cen,
.tabla-ingreso .der, .tabla-ingreso .cen,
.tabla-etiquetas .der, .tabla-etiquetas .cen,
.tabla-ejemplos .der { white-space: nowrap; }

.tabla-venta .der,
.tabla-listado .der,
.tabla-ingreso .der,
.tabla-etiquetas .der,
.tabla-ejemplos .der { text-align: right; }
.tabla-venta .cen,
.tabla-listado .cen,
.tabla-ingreso .cen,
.tabla-etiquetas .cen { text-align: center; }

/* Filas alternadas: al recorrer una fila ancha con la vista, es lo que evita
   saltar de renglón sin darse cuenta. Muy suave, para no bajar el contraste. */
.tabla-venta tbody tr:nth-child(even),
.tabla-listado tbody tr:nth-child(even),
.tabla-ingreso tbody tr:nth-child(even),
.tabla-etiquetas tbody tr:nth-child(even),
.tabla-ejemplos tbody tr:nth-child(even) { background: #fafbfc; }

.tabla-venta tbody tr:hover,
.tabla-listado tbody tr:hover,
.tabla-ingreso tbody tr:hover,
.tabla-etiquetas tbody tr:hover { background: #eef3f8; }

.tabla-venta form { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.importe { font-size: 1.15rem; font-weight: 600; white-space: nowrap; }
.codigo { display: block; color: var(--texto-suave); font-size: 0.9rem; }
.unidad { color: var(--texto-suave); }

/* El color no es el único indicador: la fila lleva además su texto (CA-42b). */
.fila-sin-stock { background: var(--error-fondo); }
.etiqueta-alerta { display: block; margin-top: 0.25rem; color: var(--error); font-weight: 600; font-size: 0.9rem; }

.boton-quitar {
  padding: 0.4rem 0.8rem; font-size: 1.15rem;
  color: var(--error); background: transparent; border-color: var(--borde);
}
.boton-quitar:hover { background: var(--error-fondo); border-color: var(--error); }

.vacio { color: var(--texto-suave); padding: 1.25rem 0; }

/* --- Descuento y totales --- */
.cierre {
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: space-between; align-items: flex-end;
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid var(--borde);
}
.ajustes { display: flex; gap: 1rem; }
.ajustes .campo { display: flex; flex-direction: column; }
.ajustes label { margin-top: 0; font-size: 0.95rem; }
.ajustes input { flex: 0 0 auto; }
.ajustes .campo { flex: 0 0 9rem; }
.totales { min-width: 260px; margin-left: auto; }
.linea-total { display: flex; justify-content: space-between; gap: 2rem; padding: 0.3rem 0; }
.total-grande {
  margin-top: 0.5rem; padding-top: 0.75rem; border-top: 2px solid var(--borde);
  font-size: 1.9rem; font-weight: 700;   /* el dato que más se mira (CA-42a) */
}

/* --- Cobro --- */
.medios-pago { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem; }
.medios-pago form { margin: 0; }
.boton-cobrar {
  display: flex; flex-direction: column; gap: 0.15rem;
  width: 100%; min-height: 76px; padding: 0.9rem;
  font: inherit; cursor: pointer; color: #fff;
  background: var(--principal); border: 2px solid var(--principal); border-radius: var(--radio);
}
.boton-cobrar:hover { background: var(--principal-oscuro); border-color: var(--principal-oscuro); }
.cobrar-medio { font-size: 1.15rem; font-weight: 700; }
.cobrar-monto { font-size: 1.35rem; }

.fila-cancelar { margin-top: 1.5rem; }

@media (max-width: 640px) {
  .fila-busqueda { flex-wrap: wrap; }
  .fila-busqueda input[name="termino"] { flex-basis: 100%; }
  .tabla-venta thead { display: none; }
  .tabla-venta, .tabla-venta tbody, .tabla-venta tr, .tabla-venta td { display: block; width: 100%; }
  .tabla-venta tr { padding: 0.75rem 0; border-bottom: 2px solid var(--borde); }
  .tabla-venta td { border: 0; padding: 0.3rem 0; text-align: left; }
  .tabla-venta .der, .tabla-venta .cen { text-align: left; }
  .totales { margin-left: 0; }
}

/* Secciones todavía no construidas: se ven claramente inactivas y dicen por qué.
   No son <a>, así que tampoco reciben foco al tabular. */
.accion-pendiente {
  background: transparent;
  border-style: dashed;
  color: var(--texto-suave);
  cursor: default;
}
.accion-pendiente:hover { border-color: var(--borde); }
.accion-pendiente .accion-titulo { font-weight: 600; }
.accion-pendiente-marca {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Catálogo de artículos (CU-06)
   ========================================================================== */

.encabezado-seccion {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between; margin-bottom: 1.25rem;
}
.encabezado-seccion h1 { margin: 0; }
.acciones-encabezado { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- Filtros del listado --- */
.filtros { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.filtros .campo { display: flex; flex-direction: column; }
.filtros label { margin-top: 0; }
.filtros select { min-width: 12rem; }
.filtros-casillas { display: flex; flex-wrap: wrap; gap: 1.5rem; flex-basis: 100%; }
.casilla {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0; font-weight: 400; cursor: pointer;
}
.casilla input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }

/* --- Tabla del listado --- */
.resumen-listado { margin: 0 0 1rem; color: var(--texto-suave); }
.enlace-articulo { font-weight: 600; color: var(--principal); text-decoration: none; }
.enlace-articulo:hover { text-decoration: underline; }
/* Un artículo dado de baja se distingue de un vistazo del resto del listado.
   El gris se leía como "deshabilitado"; el rojo pálido dice que está fuera de
   circulación. El color no es el único indicador: la fila lleva además su
   etiqueta con el texto (CA-42b). */
.fila-inactiva { background: var(--error-fondo); }
.etiqueta-baja {
  display: inline-block; margin-top: 0.25rem; padding: 0.1rem 0.5rem;
  font-size: 0.85rem; font-weight: 600;
  color: var(--error); border: 1px solid var(--error); border-radius: 999px;
}
.sin-dato { color: var(--texto-suave); font-size: 0.95rem; }

.paginacion {
  display: flex; gap: 1rem; align-items: center; justify-content: center;
  margin-top: 1.5rem;
}
.paginacion-estado { color: var(--texto-suave); }

/* --- Formulario del artículo ---
   Dos columnas: formulario a la izquierda, códigos de barras y situación del
   artículo a la derecha. Con una sola columna había que bajar con la rueda del
   mouse hasta el botón de guardar, que es justo lo que hay que evitar con
   usuarios mayores (spec §1.3). */
.disposicion {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.25rem;
  align-items: start;
}
.disposicion-sola { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.lateral { display: flex; flex-direction: column; gap: 1.25rem; }
/* Dentro de la disposición, las tarjetas ya se separan con el gap de la rejilla. */
.disposicion .tarjeta + .tarjeta { margin-top: 0; }

@media (max-width: 1000px) {
  .disposicion { grid-template-columns: minmax(0, 1fr); }
}
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.5rem 1.5rem;
}
.rejilla-tres { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.campo-ancho { grid-column: 1 / -1; }
.campo-formulario { margin-bottom: 1rem; }
.campo-formulario label { margin-top: 0; }
.opcional { font-weight: 400; color: var(--texto-suave); }
.ayuda-campo { margin: 0.3rem 0 0; font-size: 0.9rem; line-height: 1.4; color: var(--texto-suave); }
.error-campo { margin: 0.3rem 0 0; font-weight: 600; color: var(--error); }
.campo-con-error input, .campo-con-error select { border-color: var(--error); }

/* El botón de guardar queda pegado al pie mientras se ve el formulario, así no
   hay que buscarlo desplazándose (spec §1.3, punto 4). */
.barra-guardar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: 1.5rem -1.75rem -1.75rem;
  padding: 1rem 1.75rem;
  background: var(--superficie);
  border-top: 2px solid var(--borde);
  border-radius: 0 0 var(--radio) var(--radio);
}
.barra-guardar .boton-principal { flex: 1 1 auto; max-width: 26rem; }

/* --- Precio sugerido (RN-01b) --- */
.sugerencia {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; padding: 1rem 1.25rem;
  background: #f0f6fc; border: 2px solid var(--principal); border-radius: var(--radio);
}
.sugerencia-etiqueta { display: block; font-size: 0.9rem; color: var(--texto-suave); }
.sugerencia-monto { display: block; font-size: 1.6rem; }
.sugerencia-detalle { font-size: 0.9rem; color: var(--texto-suave); }

/* --- Códigos de barras --- */
.lista-codigos { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.lista-codigos li {
  display: flex; gap: 1rem; align-items: center;
  padding: 0.75rem 0; border-bottom: 1px solid var(--borde);
}
/* Sin flex-wrap: si envuelve, el botón de quitar cae a su propia línea y queda
   suelto, sin que se vea a qué código pertenece. */
.lista-codigos form { margin: 0 0 0 auto; flex: 0 0 auto; }
.lista-codigos .codigo-tipo { flex: 1 1 auto; }
.codigo-valor { font-size: 1.15rem; font-weight: 600; font-family: ui-monospace, monospace; }
.codigo-tipo { color: var(--texto-suave); }

.boton-peligro { color: #fff; background: var(--error); border-color: var(--error); }
.boton-peligro:hover { background: #7d1414; border-color: #7d1414; }

@media (max-width: 640px) {
  .tabla-listado thead { display: none; }
  .tabla-listado, .tabla-listado tbody, .tabla-listado tr, .tabla-listado td { display: block; width: 100%; }
  .tabla-listado tr { padding: 0.75rem 0; border-bottom: 2px solid var(--borde); }
  .tabla-listado td { border: 0; padding: 0.3rem 0; text-align: left; }
  .tabla-listado .der { text-align: left; }
}

/* ==========================================================================
   Ingreso de mercadería (CU-05)
   ========================================================================== */

.campo-costo { flex: 0 0 12rem; }
.campo-costo input { text-align: right; font-size: 1.15rem; }

input.entrada-importe {
  width: 8.5rem; text-align: right; font-size: 1.05rem;
}

/* Los datos de contexto —stock que va a quedar, costo anterior, precio
   sugerido— se muestran chicos debajo del campo: informan sin competir con el
   dato que hay que escribir. */
.dato-menor {
  display: block; margin-top: 0.3rem;
  font-size: 0.85rem; line-height: 1.35; color: var(--texto-suave);
}

.atajos-precio { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.3rem; }
.boton-enlace {
  padding: 0.15rem 0; font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--principal); background: none; border: 0; cursor: pointer;
  text-align: center; text-decoration: underline;
}
.boton-enlace:hover { color: var(--principal-oscuro); }

.campo-observaciones { flex: 1 1 22rem; display: flex; flex-direction: column; }
.campo-observaciones label { margin-top: 0; }

@media (max-width: 900px) {
  .tabla-ingreso thead,
  .tabla-etiquetas thead { display: none; }
  .tabla-ingreso, .tabla-ingreso tbody, .tabla-ingreso tr, .tabla-ingreso td,
  .tabla-etiquetas, .tabla-etiquetas tbody, .tabla-etiquetas tr, .tabla-etiquetas td { display: block; width: 100%; }
  .tabla-ingreso tr,
  .tabla-etiquetas tr { padding: 0.75rem 0; border-bottom: 2px solid var(--borde); }
  .tabla-ingreso td,
  .tabla-etiquetas td { border: 0; padding: 0.4rem 0; text-align: left; }
  .tabla-ingreso .der, .tabla-ingreso .cen,
  .tabla-etiquetas .der, .tabla-etiquetas .cen { text-align: left; }
  .atajos-precio { flex-direction: row; gap: 1rem; }
  .boton-enlace { text-align: left; }
}

/* ==========================================================================
   Aumento masivo de precios (CU-08, CU-09)
   ========================================================================== */

.fila-sin-cambio { color: var(--texto-suave); }

/* Los grupos de opciones se ven como botones grandes, no como radios chicos:
   son más fáciles de acertar y de leer (spec §9.4). */
.formulario ul { list-style: none; margin: 0; padding: 0; }
.formulario ul li { margin-bottom: 0.4rem; }
.formulario ul li label {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: var(--toque-minimo); margin: 0; padding: 0.5rem 0.9rem;
  font-weight: 400; cursor: pointer;
  border: 2px solid var(--borde); border-radius: var(--radio);
}
.formulario ul li label:hover { border-color: var(--principal); }
.formulario ul li input[type="radio"] { width: 1.25rem; height: 1.25rem; }

.lista-aumentos { list-style: none; margin: 0; padding: 0; }
.lista-aumentos li {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding: 1rem 0; border-bottom: 1px solid var(--borde);
}
.lista-aumentos li:last-child { border-bottom: 0; }
.aumento-datos { display: flex; flex-direction: column; gap: 0.2rem; }
.aumento-titulo { font-size: 1.1rem; }
.aumento-detalle { color: var(--texto-suave); font-size: 0.95rem; }
.aumento-bloqueo { color: var(--texto-suave); font-size: 0.9rem; font-style: italic; }
.aumento-revertido .aumento-titulo { text-decoration: line-through; }

/* --- Importación de artículos (CU-11) --- */
.lista-rechazos { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.lista-rechazos li { margin-bottom: 0.35rem; color: var(--error); }
input[type="file"] {
  width: 100%; min-height: var(--toque-minimo); padding: 0.55rem 0.75rem;
  font: inherit; background: var(--superficie);
  border: 2px dashed var(--borde); border-radius: var(--radio);
}
code {
  padding: 0.05rem 0.35rem; font-size: 0.9em;
  background: #eef2f6; border-radius: 4px;
}

/* ==========================================================================
   Reportes (R-01 a R-05)
   ========================================================================== */

.filtros-reporte + .filtros-reporte { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--borde); }
.atajos-periodo { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.rango-manual { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.rango-manual .campo { display: flex; flex-direction: column; }
.rango-manual label { margin-top: 0; }
.rango-manual select, .rango-manual input[type="date"] { min-width: 11rem; }

/* Los números que se miran primero, grandes y separados de la tabla. */
.tarjetas-numero { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.numero-grande { display: flex; flex-direction: column; gap: 0.15rem; }
.numero-etiqueta { color: var(--texto-suave); font-size: 0.95rem; }
.numero-valor { font-size: 2rem; line-height: 1.15; }

/* --- Gráfico de evolución (R-01) ---
   Barras simples, con el importe escrito arriba de cada una. El gráfico
   acompaña a la tabla; los datos exactos siempre están en texto (CA-42b). */
.grafico {
  display: flex; gap: 1rem; align-items: flex-end;
  min-height: 220px; padding-top: 1.5rem; overflow-x: auto;
}
.grafico-columna {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  flex: 1 1 4.5rem; min-width: 4.5rem; height: 200px;
}
.grafico-valor { margin-bottom: 0.35rem; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.grafico-barra {
  width: 100%; max-width: 4rem; min-height: 4px;
  background: var(--principal); border-radius: 6px 6px 0 0;
}
.grafico-etiqueta {
  margin-top: 0.5rem; font-size: 0.85rem; color: var(--texto-suave);
  text-align: center; line-height: 1.25;
}

.fila-total td { padding-top: 0.9rem; font-weight: 700; border-top: 2px solid var(--borde); }
.posicion { font-size: 1.15rem; font-weight: 700; color: var(--texto-suave); }

/* La diferencia de caja lleva su palabra además del color (CA-42b). */
.diferencia-sobra { color: var(--exito); }
.diferencia-falta { color: var(--error); }
.diferencia-exacta { color: var(--texto-suave); font-weight: 400; }

.acciones-exportar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.etiqueta-exportar { color: var(--texto-suave); }

/* ==========================================================================
   Etiquetas de código de barras (CU-07)
   ========================================================================== */

/* El número del código va en tipografía monoespaciada: se lee dígito por
   dígito, que es como se compara contra el envase. */
.codigo-barras-numero {
  font-family: "Consolas", "Menlo", monospace;
  font-size: 1.05rem; letter-spacing: 0.04em;
}

.resumen-etiquetas {
  margin: 1.25rem 0; padding: 1rem 1.25rem;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio);
}
.resumen-etiquetas-total { margin: 0; font-size: 1.2rem; }
.resumen-etiquetas .dato-menor { margin-top: 0.4rem; }

/* El botón de imprimir es un enlace (descarga un archivo, no ejecuta una
   acción), así que hay que devolverle la caja y el centrado de un botón. */
a.boton-ancho { display: block; text-align: center; }

/* El aviso va con palabra además de color (CA-42b): no se comunica solo con el
   rojo, porque hay que poder distinguirlo sin ver bien los colores. */
.aviso-linea {
  display: block; margin-top: 0.4rem; padding: 0.5rem 0.7rem;
  font-size: 0.85rem; line-height: 1.4;
  color: var(--error); background: var(--error-fondo);
  border-left: 4px solid var(--error); border-radius: 0 6px 6px 0;
}

/* Ejemplos de la regla de redondeo (CU-12). El resto lo hereda de las reglas
   comunes de tablas. */
.tabla-ejemplos { margin: 1rem 0; }
.tabla-ejemplos td { font-size: 1.05rem; }
.tabla-ejemplos .dato-menor { display: inline; margin-left: 0.5rem; }

/* Datos del turno abierto (CU-04). */
.ficha-caja { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.25rem; margin: 0 0 1.5rem; }
.ficha-caja dt { color: var(--texto-suave); }
.ficha-caja dd { margin: 0; font-weight: 600; }