/* Sistema de diseño YaFarma — identidad familia YaMarca.
   Tokens extraídos de yamarca-landing/index.html (ver docs/sistema-diseno-familia.md).
   Neutros slate para el 90%, azul de marca para identidad/links, verde para LA acción,
   semánticos SOLO para estado. Cero gradientes, cero biselados. */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Marca (azul YaMarca): identidad, links, foco, info */
  --marca: #2563EB;
  --marca-hover: #1D4ED8;
  --marca-sutil: #EFF6FF;
  --marca-borde: #93C5FD;
  /* Acción (verde YaMarca): los botones que hacen cosas */
  --primario: #10B981;
  --primario-hover: #059669;
  --primario-sutil: #ECFDF5;
  --primario-borde: #A7F3D0;
  /* Neutros (slate) */
  --fondo: #F8FAFC;
  --superficie: #FFFFFF;
  --borde: #E2E8F0;
  --borde-marcado: #CBD5E1;
  --texto: #0F172A;
  --texto-secundario: #64748B;
  --texto-deshabilitado: #94A3B8;
  /* Semánticos (estado, nunca decoración) */
  --exito: #10B981;
  --exito-sutil: #ECFDF5;
  --advertencia: #F59E0B;
  --advertencia-sutil: #FFFBEB;
  --error: #DC2626;
  --error-sutil: #FEF2F2;
  /* Forma y profundidad (sombras teñidas de slate, no negro) */
  --radio: 8px;
  --radio-grande: 12px;
  --radio-chico: 6px;
  --radio-pill: 999px;
  --sombra: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
  --sombra-elevada: 0 4px 6px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Los controles de formulario NO heredan la fuente por defecto del
   navegador: esta regla base los mete a la familia (los tokens llegan
   por body) — cada componente ajusta tamaño y peso encima */
button, input, select, textarea {
  font: inherit;
}

a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-hover); }
:focus-visible { outline: 2px solid var(--marca-borde); outline-offset: 2px; }

/* Números tabulares en TODA cifra (dinero, stock, cantidades) */
.tabular, td.monto, input.monto {
  font-variant-numeric: tabular-nums;
}

/* --- Barra superior v2 (UI-1: fiel a docs/maquetas/v2) --- */
.barra {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.barra .marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  color: var(--marca);
  letter-spacing: -0.01em;
}
/* Cubo de marca: mismo tratamiento que el logo YaMarca (26px, radio 7, glifo blanco) */
.marca-cubo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--marca);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
/* El chip ámbar junto al logo cuando NO es producción: nadie confunde
   la base local de pruebas con la caja real */
.chip-local {
  padding: 3px 8px;
  border-radius: var(--radio-pill);
  background: var(--advertencia-sutil);
  color: #B45309;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.barra-divisor { width: 1px; height: 18px; background: var(--borde); flex: none; }
.barra-espacio { flex: 1; }
.navegacion { display: flex; align-items: center; gap: 2px; }
.nav-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radio-pill);
  color: var(--texto-secundario);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-pill:hover { background: #F1F5F9; color: #334155; }
.nav-pill.activo { background: var(--marca-sutil); color: #1D4ED8; font-weight: 600; }
.nav-pill.activo:hover { background: var(--marca-sutil); color: #1D4ED8; }
/* Pill de estado del turno (verde abierto / ámbar verificando / gris cerrado) */
.pill-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radio-pill);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.pill-estado-verde { background: var(--primario-sutil); color: #047857; }
.pill-estado-verde .punto { background: var(--primario); }
.pill-estado-ambar { background: var(--advertencia-sutil); color: #B45309; }
.pill-estado-ambar .punto { background: var(--advertencia); }
.pill-estado-neutra { background: #F1F5F9; color: #475569; }
.pill-estado-neutra .punto { background: var(--texto-deshabilitado); }
.sesion { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.sesion-nombre { font-weight: 500; color: #334155; white-space: nowrap; }
.avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radio-pill);
  background: var(--marca-sutil);
  color: #1D4ED8;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chip-rol { background: #F1F5F9; color: #475569; font-size: 11px; font-weight: 600; padding: 3px 10px; }
.forma-salir { margin: 0; }
.boton-salir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--texto-secundario);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.boton-salir:hover { background: #F1F5F9; color: #334155; }

/* --- Contenedor --- */
.contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 600; margin: 32px 0 12px; }
.subtitulo { color: var(--texto-secundario); font-size: 13px; margin: 0 0 24px; }

/* --- Tarjetas --- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  padding: 20px 24px;
  margin-bottom: 16px;
}

/* --- Chips de estado: lenguaje pill YaMarca (cápsula, fondo suave, sin borde) --- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radio-pill);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.chip-azul { background: var(--marca-sutil); color: var(--marca); }
.chip-ambar { background: var(--advertencia-sutil); color: #B45309; }
.chip-verde { background: var(--exito-sutil); color: #047857; }
.chip-rojo { background: var(--error-sutil); color: #B91C1C; }
.chip-neutro { background: var(--fondo); color: var(--texto-secundario); border: 1px solid var(--borde); }

/* --- Botones --- */
.boton {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  background: var(--primario);
  color: #fff;
}
.boton:hover { background: var(--primario-hover); }
.boton:disabled { background: var(--texto-deshabilitado); cursor: default; }
.boton-fantasma {
  background: transparent;
  color: var(--texto-secundario);
  border-color: var(--borde-marcado);
}
.boton-fantasma:hover { background: var(--fondo); color: var(--texto); }

/* --- Formularios --- */
label { display: block; font-size: 12px; font-weight: 500; color: var(--texto-secundario); margin-bottom: 4px; }
input[type="text"], input[type="password"], input[type="number"], select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--borde-marcado);
  border-radius: var(--radio);
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
}
input:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-sutil);
}
input::placeholder { color: var(--texto-deshabilitado); }
.ayuda { font-size: 12px; color: var(--texto-secundario); margin-top: 4px; }
.error-campo { font-size: 12px; color: var(--error); margin-top: 4px; }

/* --- Flashes --- */
.flash {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 10px 16px;
  border-radius: var(--radio);
  font-size: 13px;
  border: 1px solid;
}
.flash-exito { background: var(--exito-sutil); color: #047857; border-color: var(--primario-borde); }
.flash-error { background: var(--error-sutil); color: #B91C1C; border-color: #FECACA; }
.flash-alerta { background: var(--advertencia-sutil); color: #B45309; border-color: #FDE68A; }

/* --- Tablas --- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--texto-secundario);
  padding: 8px 12px;
  border-bottom: 1px solid var(--borde);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--borde); }
tr:last-child td { border-bottom: none; }
td.monto, th.monto { text-align: right; }

/* Login v2: vive en el bloque UI-4, al final del archivo */
.campo { margin-bottom: 16px; }

/* --- Recepción: tarjetas de aprobación --- */
.producto-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.codigo-producto { font-size: 12px; color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
.precios-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
.precio-sucursal { min-width: 220px; }
.precio-sucursal .fila-precio { display: flex; align-items: center; gap: 8px; }
.piso { font-size: 12px; color: var(--texto-secundario); margin-top: 4px; font-variant-numeric: tabular-nums; }
.costo { color: var(--texto-secundario); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Acción secundaria de la tarjeta: descartar con motivo (peso visual menor) */
.forma-descartar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}
.forma-descartar input { flex: 1; max-width: 320px; }

/* Acciones por fila de la tabla: aplicar (primaria) + archivar (secundaria) */
.acciones-doc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.forma-archivar { display: flex; gap: 6px; margin: 0; }
.forma-archivar input { width: 140px; padding: 4px 8px; font-size: 12px; }
.forma-archivar .boton { padding: 4px 10px; font-size: 12px; }

/* Qué bloquea un documento (detalle bajo los chips de estado) */
.detalle-bloqueo {
  margin-top: 4px;
  font-size: 12px;
  color: var(--texto-secundario);
}

/* Encabezado de sección con acción a la derecha */
.fila-seccion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.alterna-archivadas { font-size: 12px; }

/* --- Gestión de usuarios --- */
.rejilla-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 24px;
  margin-bottom: 8px;
}
.casillas { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 0; }
.casilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--texto);
  font-weight: 400;
  margin: 0;
}
a.boton { line-height: 1.5; }

/* --- Paginación --- */
.paginacion {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: center;
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--texto-secundario);
}

/* --- Turnos: piezas compartidas con POS/sobres/timeline --- */
.conteo-tabla { margin: 8px 0 4px; }
.conteo-tabla input.conteo-cantidad { width: 90px; text-align: right; }
.panel-turno {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dato-etiqueta { font-size: 12px; color: var(--texto-secundario); margin-bottom: 2px; }
.dato-valor { font-size: 14px; }
.arqueo { display: flex; gap: 48px; flex-wrap: wrap; margin-bottom: 12px; }
.arqueo-cifra { font-size: 26px; font-weight: 600; }
.arqueo-cuadrado { color: #047857; }
.arqueo-sobrante { color: #B45309; }
.arqueo-faltante { color: #B91C1C; }
.arqueo-nota { font-size: 13px; color: var(--texto-secundario); margin: 8px 0 0; }

/* --- Estado vacío --- */
.vacio {
  text-align: center;
  color: var(--texto-secundario);
  padding: 32px;
  background: var(--superficie);
  border: 1px dashed var(--borde-marcado);
  border-radius: var(--radio-grande);
}

/* --- POS de venta: UI-5 (capa v2) + UI-6 (maqueta v3 del dueño,
   docs/maquetas/v2/standalone/pos_venta) --- */
.pos-cuerpo { min-width: 1240px; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.pos-barra {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.pos-barra .marca-pos {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  color: var(--marca);
  letter-spacing: -0.01em;
}
.pos-barra .separador-vertical { width: 1px; height: 18px; background: var(--borde); }
.pos-ubicacion { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #475569; }
.pos-ubicacion .separador { color: var(--borde-marcado); }
.pos-pill-turno {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radio-pill);
  background: var(--exito-sutil);
  color: #047857;
  font-size: 12.5px;
  font-weight: 500;
}
.pos-pill-turno .punto { width: 7px; height: 7px; border-radius: 999px; background: var(--primario); }
.pos-conexion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: var(--radio-pill);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto-secundario);
}
.pos-conexion .punto { width: 7px; height: 7px; border-radius: 999px; background: var(--primario); }
.pos-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--marca-sutil);
  color: #1D4ED8;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* UI-6 (maqueta v3): hamburguesa del header y menú lateral colapsable */
.boton-menu {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radio);
  background: transparent;
  color: #475569;
  cursor: pointer;
}
.boton-menu:hover { background: #F1F5F9; color: var(--texto); }
.pos-menu {
  flex: none;
  width: 58px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 10px;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  transition: width 0.18s ease;
  overflow: hidden;
}
.pos-menu.abierto { width: 196px; }
.pos-menu .item {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radio);
  background: transparent;
  color: var(--texto-secundario);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.pos-menu .item svg { flex: none; }
.pos-menu .item:hover { background: #F1F5F9; color: #334155; }
.pos-menu .item.activo {
  background: var(--marca-sutil);
  color: #1D4ED8;
  font-weight: 600;
  cursor: default;
}
.pos-columnas { flex: 1; display: flex; min-height: 0; }
.pos-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px 18px 24px;
}

/* Canal + comisión */
.pos-fila-canal { flex: none; display: flex; align-items: center; gap: 8px; }
.etiqueta-canal { font-size: 12px; font-weight: 500; color: var(--texto-deshabilitado); margin-right: 2px; }
.chip-canal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: var(--radio-pill);
  background: var(--superficie);
  color: var(--texto-secundario);
  box-shadow: inset 0 0 0 1px var(--borde);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.chip-canal:hover { box-shadow: inset 0 0 0 1px var(--borde-marcado); color: #334155; }
.chip-canal.activo {
  background: var(--marca-sutil);
  color: #1D4ED8;
  box-shadow: inset 0 0 0 1px #BFDBFE;
  font-weight: 600;
}
.punto-canal { width: 7px; height: 7px; border-radius: 999px; }
.pos-comision { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.pos-comision .etiqueta { font-size: 12px; color: var(--texto-deshabilitado); }
.pos-comision .valor { font-size: 13px; font-weight: 600; color: #334155; }
.pos-comision .valor.oculto { color: var(--borde-marcado); letter-spacing: 0.08em; }
.ojo-comision {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--texto-deshabilitado);
  cursor: pointer;
}
.ojo-comision:hover { background: #F1F5F9; color: #475569; }

/* Buscador con scanner */
.pos-buscador { position: relative; flex: none; }
.pos-buscador > svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.pos-buscador input {
  width: 100%;
  height: 54px;
  padding: 0 130px 0 50px;
  font-size: 15.5px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  outline: none;
  box-shadow: var(--sombra);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.pos-buscador input:focus { border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE, var(--sombra); }
.pos-buscador .pista {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--borde-marcado);
  pointer-events: none;
}
.pos-resultados {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
  padding: 6px;
  max-height: 340px;
  overflow: auto;
}
.pos-resultado {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.pos-resultado > span:first-child { min-width: 0; flex: 1; }
.pos-resultado.seleccionado, .pos-resultado:hover { background: var(--fondo); }
.pos-resultado .nombre { font-size: 14px; font-weight: 500; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* PA-1: sub-etiqueta discreta con el principio activo (por qué matcheó) */
.pos-resultado .principio { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; color: var(--marca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-resultado .meta { font-size: 12px; color: var(--texto-deshabilitado); }
.pos-resultado .precio { flex: none; font-size: 13.5px; font-weight: 600; color: var(--texto); }
.pos-resultado.vencido { cursor: not-allowed; }
.pos-resultado.vencido .nombre { color: var(--texto-deshabilitado); }
.pos-resultado.vencido .precio { color: var(--borde-marcado); font-weight: 500; text-decoration: line-through; }
.chip-vencido { flex: none; padding: 2px 9px; border-radius: var(--radio-pill); background: var(--error-sutil); color: var(--error); font-size: 11px; font-weight: 600; white-space: nowrap; }
.chip-vence { flex: none; padding: 2px 9px; border-radius: var(--radio-pill); background: var(--advertencia-sutil); color: #B45309; font-size: 11px; font-weight: 500; white-space: nowrap; }
.chip-stock-bajo { flex: none; padding: 2px 9px; border-radius: var(--radio-pill); background: var(--advertencia-sutil); color: #B45309; font-size: 11px; font-weight: 500; white-space: nowrap; }
.chip-stock-neutro { flex: none; padding: 2px 9px; border-radius: var(--radio-pill); background: #F1F5F9; color: var(--texto-secundario); font-size: 11px; font-weight: 500; white-space: nowrap; }
.pos-atajos {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 12px 4px;
  border-top: 1px solid #F1F5F9;
  font-size: 11.5px;
  color: var(--texto-deshabilitado);
}
.pos-atajos kbd { padding: 1px 6px; border-radius: 5px; background: #F1F5F9; color: var(--texto-secundario); font-weight: 500; font-family: inherit; }

/* Ticket */
.pos-ticket {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.pos-banner-app {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px;
  background: var(--marca-sutil);
  border-bottom: 1px solid #BFDBFE;
}
.pos-banner-app .punto-app { width: 8px; height: 8px; border-radius: 999px; }
.pos-banner-app strong { font-size: 13px; font-weight: 600; color: #1D4ED8; }
.pos-banner-app .sufijo { font-size: 12.5px; color: #3B82F6; }
/* TRANSFIERE-2: bandeja de cobros por transferencia + modal de espera
   (la venta se consuma SOLO con pago confirmado) */
.punto-espera {
  width: 8px; height: 8px; border-radius: 999px; background: #F59E0B;
  flex: none;
  animation: pulso-espera 1.4s ease-in-out infinite;
}
@keyframes pulso-espera { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* TURNO-ALERTA: turno de fecha anterior — ventas bloqueadas */
.pos-banner-turno-viejo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #FEF2F2;
  border-bottom: 1px solid #FECACA;
  color: #B91C1C;
}
.pos-banner-turno-viejo strong { font-size: 13px; font-weight: 600; }
.pos-banner-turno-viejo .boton-cerrar-viejo {
  margin-left: auto;
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 12px; border-radius: 9px;
  background: #B91C1C; color: #fff;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.pos-banner-cobros {
  flex: none;
  display: flex;
  align-items: center;
  padding: 7px 20px;
  background: #FFFBEB;
  border-bottom: 1px solid #FDE68A;
}
.chip-bandeja {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border: 1px solid #A7F3D0; border-radius: 999px;
  background: #ECFDF5; color: #047857;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.chip-bandeja.espera { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
.modal-cobro-transfer { max-width: 460px; }
.modal-cobro-transfer .cuerpo-cobro {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.modal-cobro-transfer .monto-cobro {
  font-size: 44px; font-weight: 700; letter-spacing: -0.02em; color: #0F172A;
}
.modal-cobro-transfer .fila-espera { display: flex; align-items: center; gap: 9px; }
.modal-cobro-transfer .fila-espera strong { font-size: 13.5px; font-weight: 600; color: #92400E; }
.modal-cobro-transfer .aviso-cobro { font-size: 12.5px; color: #B45309; }
.modal-cobro-transfer .cuenta-cobro {
  font-size: 26px; font-weight: 600; color: #B45309;
  padding: 2px 14px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A;
}
.modal-cobro-transfer .nota-cobro { margin: 0; font-size: 12.5px; color: #64748B; }
.modal-cobro-transfer .acciones-cobro { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.modal-cobro-transfer .respaldo-cobro {
  height: 34px; padding: 0 14px; border-radius: 9px;
  border: 1px dashed #CBD5E1; background: #F8FAFC; color: #475569;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.modal-cobro-transfer .respaldo-cobro:hover { border-color: #94A3B8; }
.modal-cobro-transfer .ok-cobro { font-size: 15px; color: #047857; }
.modal-cobro-transfer .vencido-cobro { font-size: 15px; color: #B45309; }
.modal-cobro-transfer .circulo {
  width: 52px; height: 52px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #ECFDF5; color: #059669; font-size: 26px; font-weight: 700;
}
.modal-cobro-transfer .folio { font-size: 15px; font-weight: 700; color: #0F172A; }
.lista-bandeja { display: flex; flex-direction: column; gap: 6px; }
.titulo-bandeja {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #94A3B8;
}
.fila-bandeja {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border: 1px solid #F1F5F9; border-radius: 9px;
}
.fila-bandeja .hora-bandeja { font-size: 12px; color: #64748B; }
.fila-bandeja .empuje { flex: 1; }
.fila-bandeja .pos-accion { height: 28px; padding: 0 10px; font-size: 12px; }
.fila-bandeja .check-bandeja { color: #059669; font-weight: 700; }
.pos-ticket-cabecera {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #F1F5F9;
}
.pos-ticket-cabecera h2 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.pos-ticket-cabecera .resumen { font-size: 12.5px; color: var(--texto-deshabilitado); }
.pos-ticket-cabecera .documento { margin-left: auto; font-size: 12px; color: var(--borde-marcado); }
.pos-lineas { flex: 1; min-height: 0; overflow-y: auto; }
.pos-linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 100px 30px;
  gap: 14px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid #F1F5F9;
  transition: background 0.5s ease;
}
.pos-linea.destello { background: var(--marca-sutil); transition: none; }
.pos-linea .info { min-width: 0; }
.pos-linea .nombre { font-size: 14px; font-weight: 500; color: var(--texto); }
.pos-linea .unitario { font-size: 12px; color: var(--texto-secundario); margin-top: 3px; }
.pos-linea .chips { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.pos-linea .subtotal { font-size: 14.5px; font-weight: 600; text-align: right; }
.pos-stepper { display: flex; align-items: center; gap: 6px; }
.pos-stepper button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto-secundario);
  cursor: pointer;
}
.pos-stepper button:hover { background: var(--fondo); color: var(--texto); border-color: var(--borde-marcado); }
.pos-stepper .cantidad { min-width: 32px; text-align: center; font-size: 14px; font-weight: 600; }
.boton-quitar {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--borde-marcado);
  cursor: pointer;
}
.boton-quitar:hover { background: var(--error-sutil); color: var(--error); }
.pos-vacio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #334155;
}
.pos-vacio .sub { font-size: 13px; font-weight: 400; color: var(--texto-deshabilitado); margin-top: 4px; }

/* Aside de cobro */
.pos-aside {
  flex: none;
  width: 35%;
  min-width: 376px;
  max-width: 480px;
  display: flex;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
}
.pos-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 16px; overflow-y: auto; }
.pill-app {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radio-pill);
  background: var(--marca-sutil);
  color: #1D4ED8;
  font-size: 12.5px;
  font-weight: 600;
}
.dato-etiqueta { font-size: 13px; font-weight: 500; color: var(--texto-secundario); }
.pos-total { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; }
.pos-empuje { flex: 1; }
.pos-medios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-medio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: none;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
  color: #334155;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.pos-medio:hover { background: var(--fondo); box-shadow: inset 0 0 0 1px var(--borde-marcado); }
.pos-medio.activo {
  background: var(--marca-sutil);
  box-shadow: inset 0 0 0 1.5px var(--marca);
  color: #1D4ED8;
  font-weight: 600;
}
.pos-medio.doble { grid-column: span 2; }
.pos-medio .check { display: none; }
.pos-medio.activo .check { display: inline-flex; }
.pos-cobrar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 58px;
  border: none;
  border-radius: 10px;
  background: var(--primario);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  transition: background 0.12s;
}
.pos-cobrar:hover { background: var(--primario-hover); }
.pos-cobrar:active { transform: translateY(1px); }
.pos-cobrar:disabled { background: var(--borde); color: var(--texto-deshabilitado); cursor: not-allowed; transform: none; }
.pos-cobrar kbd {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: inherit;
}
.pos-cobrar:disabled kbd { background: rgba(15, 23, 42, 0.06); }
.pos-cobrar.app { background: var(--marca); }
.pos-cobrar.app:hover { background: var(--marca-hover); }
.pos-acciones-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-accion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.pos-accion:hover { background: var(--fondo); border-color: var(--borde-marcado); }
.pos-accion:disabled { color: var(--texto-deshabilitado); cursor: not-allowed; }
.pos-accion.peligro:hover { background: var(--error-sutil); border-color: #FECACA; color: var(--error); }
.pos-nota-app { margin: 0; text-align: center; font-size: 12px; color: var(--texto-deshabilitado); line-height: 1.5; }

/* Modal de cobro, éxito y toast */
.pos-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: #0F172A;
  color: #F8FAFC;
  border-radius: var(--radio-pill);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--sombra-elevada);
}
.pos-velo { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pos-modal {
  background: var(--superficie);
  border-radius: var(--radio-grande);
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 30px rgba(15, 23, 42, 0.12);
  width: 430px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pos-modal h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pos-modal .total-modal { font-size: 44px; font-weight: 700; text-align: center; letter-spacing: -0.02em; }
.pos-modal .fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.pos-modal .restante { background: var(--fondo); border-radius: var(--radio); padding: 10px 14px; display: flex; justify-content: space-between; font-weight: 600; }
.pos-vuelto { background: var(--primario-sutil); border-radius: var(--radio); padding: 12px 14px; display: flex; justify-content: space-between; align-items: baseline; }
.pos-vuelto strong { font-size: 28px; color: #047857; }
.pos-exito {
  background: var(--superficie);
  border-radius: var(--radio-grande);
  width: 400px;
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.pos-exito .circulo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primario-sutil);
  color: #047857;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pos-exito .folio { font-size: 22px; font-weight: 700; }
.pos-exito .salidas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 6px; }
a.pos-accion { text-decoration: none; }

/* --- POS: barra de RUT del cliente en el main (UI-6, maqueta v3 —
   VENTA-UX-1 la tenía en el panel; la funcionalidad es la misma) --- */
.pos-cliente {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--sombra);
}
.pos-cliente .titulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
}
.pos-cliente input.entrada-rut {
  width: 168px;
  height: 36px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.pos-cliente input.entrada-rut:hover { border-color: var(--borde-marcado); }
.pos-cliente input.entrada-rut:focus { border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE; }
.pos-cliente kbd {
  padding: 2px 7px;
  border-radius: 5px;
  background: #F1F5F9;
  color: var(--texto-secundario);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
}
.pos-cliente .estado {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--texto-secundario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-cliente .estado strong { color: #334155; }
.pos-cliente .estado.ok { color: #047857; font-weight: 500; }
.pos-cliente .estado.ok strong { color: #047857; }
.pos-cliente .estado.alerta-dv { color: #B45309; }
.pos-cliente .estado.error-campo { color: var(--error); }
.pos-cliente .estado.nuevo { color: #B45309; }
.pos-cliente .estado input.entrada-nombre {
  width: 180px;
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  outline: none;
}
.pos-cliente .estado input.entrada-nombre:focus { border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE; }
.pos-cliente .quitar-rut {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--borde-marcado);
  cursor: pointer;
}
.pos-cliente .quitar-rut:hover { background: #F1F5F9; color: var(--texto-secundario); }
/* La fila "Cliente … ✓" bajo el Total (refleja la captura del main) */
.pos-fila-cliente {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--texto-secundario);
}
.pos-fila-cliente .ok { color: #047857; font-weight: 500; }
.pos-ultima-venta {
  margin-left: 12px;
  font-size: 12px;
  color: var(--texto-secundario);
  text-decoration: none;
  white-space: nowrap;
}
.pos-ultima-venta:hover { color: var(--texto); text-decoration: underline; }


/* --- Panel del dueno: timeline forense (ADMIN-1) --- */
.linea-tiempo { display: flex; flex-direction: column; padding: 8px 0; }
.evento-fila {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid #F1F5F9;
}
.evento-fila:last-child { border-bottom: none; }
.evento-hora { color: var(--texto-secundario); font-size: 13px; min-width: 68px; }
.icono-evento {
  width: 26px; height: 26px; border-radius: 50%; background: #F1F5F9; color: #475569;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
  flex: none; align-self: center;
}
.evento-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evento-detalle { color: var(--texto-secundario); font-size: 13px; }
.evento-razon { color: #B45309; font-size: 13px; font-weight: 500; }
.evento-monto { min-width: 96px; text-align: right; font-weight: 600; }
.evento-sospechoso {
  border-left: 3px solid var(--advertencia); background: var(--advertencia-sutil);
}
.evento-sospechoso .icono-evento { background: #FEF3C7; color: #B45309; }
.seccion-revisar { border-color: #FDE68A; padding: 4px 0; }

/* --- ADMIN-2: dashboard del dueño --- */
.panel-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.selector-sucursal select { min-width: 180px; }
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi-tarjeta { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; }
.kpi-etiqueta {
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kpi-cifra { font-size: 28px; font-weight: 600; line-height: 1.2; }
.kpi-sub { font-size: 12px; color: var(--texto-secundario); }
.kpi-deltas { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.delta { font-size: 12px; font-variant-numeric: tabular-nums; }
.delta-sube { color: #047857; }
.delta-baja { color: #B91C1C; }
.delta-neutro { color: var(--texto-deshabilitado); }

.panel-rejilla {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .panel-rejilla { grid-template-columns: 1fr; } }
.panel-grafico h2, .panel-alertas h2 { font-size: 14px; margin: 0 0 16px; }

.enlace-discreto {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--texto-secundario);
}
.enlace-discreto:hover { color: var(--texto); }

/* Estados vacíos con clase (modo sombra: el panel elegante con ceros) */
.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 16px;
  text-align: center;
  color: var(--texto-secundario);
  font-size: 13px;
}
.estado-vacio p { margin: 0; }
.estado-vacio-icono {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fondo);
  border: 1px solid var(--borde);
  font-size: 16px;
  color: var(--texto-deshabilitado);
}
.estado-vacio-ok { background: var(--exito-sutil); border-color: var(--primario-borde); color: #047857; }
.estado-vacio-nota { font-size: 12px; color: var(--texto-deshabilitado); }

/* Vencimientos */
.vence-nota { font-size: 11px; color: var(--texto-deshabilitado); margin-left: 4px; }

/* --- INV-1: conteo por zonas --- */
.conteo-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.conteo-buscador { position: relative; margin: 0 0 16px; }
.conteo-buscador input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 1px solid var(--borde-marcado);
  border-radius: var(--radio);
}
.conteo-resultados {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-elevada);
  z-index: 10;
  overflow: hidden;
}
.conteo-resultado {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: none;
  font-size: 14px;
  cursor: pointer;
}
.conteo-resultado:hover, .conteo-resultado.activo { background: var(--fondo); }
.conteo-cantidad { width: 90px; text-align: right; }
.conteo-vacio { text-align: center; color: var(--texto-secundario); padding: 24px; }
.conteo-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.conteo-error { color: var(--error); font-size: 13px; margin-top: 8px; }
[x-cloak] { display: none !important; }

/* Inventario admin */
.forma-inline {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.forma-inline input[type="text"] { flex: 1; min-width: 180px; }
.campania-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.campania-fila + .campania-fila { border-top: 1px solid var(--borde); }
.ajustes-acciones {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.campania-cierre-acciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.confirmacion-lote {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--texto);
  font-weight: 500;
}
.confirmacion-lote input { width: auto; }

/* --- ADMIN-2b: fila discreta de vencimientos en cero --- */
.alerta-fila-ok { margin-top: 8px; border-top: 1px solid var(--borde); border-radius: 0; }

/* --- CRM-1: clientes --- */
.buscador-clientes { display: flex; gap: 8px; max-width: 480px; margin-bottom: 16px; }
.buscador-clientes input { flex: 1; }
.forma-nombre-cliente { display: flex; gap: 8px; align-items: flex-start; }
.forma-nombre-cliente input { min-width: 260px; }
.kpi-cifra-fecha { font-size: 18px; }
.nota-privacidad {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--texto-deshabilitado);
  border-top: 1px solid var(--borde);
  padding-top: 12px;
}

/* --- UI-1: módulo de turnos fiel a docs/maquetas/v2 ---
   Pantallas de APLICACIÓN: 100dvh sin scroll de página; bajo la barra el
   espacio se reparte entre main (la grilla, que absorbe el alto con
   filas flex: 1) y aside (resumen, aviso y LA acción junto al total).
   El REPARTO del espacio es fluido (flex/clamp); los controles tienen
   tamaño de control (px), como fijó UX-1d. El DOM conserva el orden
   canónico ($20.000 arriba → $10 abajo) y el ciego no se toca. */

/* Sin spinners: la entrada es por teclado; las flechitas son ruido */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.conteo-cantidad { -moz-appearance: textfield; appearance: textfield; }
input.conteo-cantidad::-webkit-inner-spin-button,
input.conteo-cantidad::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

body.pantalla-conteo {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pantalla-conteo .flash { margin: 8px auto 0; padding: 6px 14px; flex: none; }

/* --- NAV-1: navegación al lateral izquierdo ---
   El cuerpo autenticado es una fila [menú lateral | área principal];
   reemplaza la barra superior de pills, que se cortaba con los 16 ítems
   del admin y desbordaba en 390px. Va DESPUÉS de body.pantalla-conteo
   para que la fila gane sobre la columna cuando conviven ambas clases. */
body.con-lateral {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
.area-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
body.pantalla-conteo .area-principal { overflow: hidden; }

.menu-lateral {
  flex: none;
  width: 212px;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  transition: width 0.18s ease;
  overflow: hidden;
}
body.lateral-colapsado .menu-lateral { width: 60px; }
.menu-lateral-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 10px;
}
/* Ítem de 40px con ícono + texto (mismo lenguaje que el riel del POS):
   activo = fondo suave marca + color primario, hover sutil */
.menu-lateral .item {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 40px;
  padding: 0 11px;
  border-radius: var(--radio);
  color: var(--texto-secundario);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.menu-lateral .item-icono { flex: none; display: inline-flex; align-items: center; }
.menu-lateral .item-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-lateral .item:hover { background: #F1F5F9; color: #334155; }
.menu-lateral .item.activo { background: var(--marca-sutil); color: #1D4ED8; font-weight: 600; }
.menu-lateral .item.activo:hover { background: var(--marca-sutil); color: #1D4ED8; }
/* Colapsado (desktop): riel de solo íconos; el texto se oculta y el
   title del ítem hace de tooltip */
body.lateral-colapsado .menu-lateral .item-texto { display: none; }

/* La barra superior conserva marca, usuario/rol y Salir; la hamburguesa
   (.boton-menu, ya existente) abre/colapsa */
.barra .boton-menu { flex: none; }

/* Velo del panel móvil (bajo el lateral, sobre el contenido) */
.lateral-velo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 55;
}
@media (min-width: 769px) {
  /* En desktop el lateral es fijo en el flujo: jamás hay velo */
  .lateral-velo { display: none !important; }
}

/* Móvil (≤768px): el lateral parte oculto y abre como panel deslizante
   sobre el contenido; al navegar o tocar el velo se cierra. Cero
   desborde horizontal — este cambio cierra el hallazgo del arnés. */
@media (max-width: 768px) {
  .menu-lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 212px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--sombra-elevada);
  }
  body.lateral-movil-abierto .menu-lateral { transform: none; }
  /* En móvil el panel siempre abre completo (el riel colapsado no aplica) */
  body.lateral-colapsado .menu-lateral { width: 212px; }
  body.lateral-colapsado .menu-lateral .item-texto { display: inline; }
  /* El header se compacta: avatar + rol + íconos; se oculta el texto
     que no cabe en 390px */
  .barra .sesion-nombre { display: none; }
  .barra .chip-local { display: none; }
  .barra .boton-salir span { display: none; }
  .barra .pill-estado { display: none; }
}

/* El lienzo: main + aside llenan lo que queda bajo la barra */
.conteo-lienzo { flex: 1; display: flex; min-height: 0; margin: 0; }
.conteo-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 24px;
}
.conteo-aside {
  flex: none;
  width: clamp(376px, 35vw, 480px);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
  padding: 26px 26px 22px;
  overflow-y: auto;
}

/* Encabezado del main: título + subtítulo, acciones a la derecha */
.conteo-encabezado { flex: none; display: flex; align-items: center; gap: 16px; }
.conteo-titulos { flex: 1; min-width: 0; }
.pantalla-conteo h1 { font-size: 20px; margin: 0; }
.conteo-encabezado .subtitulo { margin: 2px 0 0; font-size: 13px; }
.conteo-encabezado-acciones { display: flex; align-items: center; gap: 8px; }
.etiqueta-selector { margin: 0; font-size: 12px; font-weight: 500; color: var(--texto-deshabilitado); }
.conteo-encabezado-acciones .selector { width: auto; }
.titulo-con-pill { display: flex; align-items: center; gap: 10px; }
.titulo-con-pill .chip { flex: none; }

/* La tarjeta de la grilla: cabecera, filas que se reparten el alto, pie */
.grilla-conteo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.grilla-cabecera, .conteo-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 150px;
  gap: 14px;
}
.grilla-cabecera {
  flex: none;
  padding: 11px 20px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-deshabilitado);
}
.centrado { text-align: center; }
.derecha { text-align: right; }
.conteo-filas { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.conteo-fila {
  flex: 1;
  min-height: 44px;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #F1F5F9;
}
.conteo-denominacion { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.conteo-celda-cantidad { display: flex; justify-content: center; }
.pantalla-conteo input.conteo-cantidad {
  width: 96px;
  height: 40px;
  padding: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.conteo-cantidad-fija { font-size: 15px; font-weight: 600; text-align: center; }
.conteo-subtotal { font-size: 14.5px; font-weight: 600; text-align: right; }
.en-cero { color: #CBD5E1; }
.separador-monedas { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 20px 6px; }
.separador-monedas span { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; color: var(--texto-deshabilitado); }
.separador-monedas::after { content: ""; flex: 1; height: 1px; background: #F1F5F9; }
.grilla-pie {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 20px;
  font-size: 11.5px;
  color: var(--texto-deshabilitado);
}
.grilla-pie kbd {
  padding: 1px 6px;
  border-radius: 5px;
  background: #F1F5F9;
  color: var(--texto-secundario);
  font-weight: 500;
  font-family: inherit;
}
.grilla-nota { flex: none; padding: 9px 20px; font-size: 11.5px; color: var(--texto-deshabilitado); }
.cabecera-tarjeta { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid #F1F5F9; }
.cabecera-tarjeta strong { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.cabecera-tarjeta .resumen { font-size: 12.5px; color: var(--texto-deshabilitado); font-weight: 400; }
.cabecera-tarjeta .empuje { flex: 1; }
.chip-codigo {
  padding: 3px 10px;
  border-radius: var(--radio-chico);
  background: #F1F5F9;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
/* El aside: resumen del momento, aviso, y el total con LA acción */
.aside-titulo { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.aside-filas { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.fila-dato { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.fila-dato > span:first-child { color: var(--texto-secundario); }
.fila-dato > span:last-child { color: #334155; font-weight: 500; text-align: right; }
.aviso-ciego {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
}
.aviso-ciego svg { flex: none; margin-top: 1px; }
.aviso-ciego strong { color: #334155; }
.aviso-ambar { background: var(--advertencia-sutil); border-color: #FDE68A; color: #78350F; }
.aviso-ambar strong { color: #78350F; }
.aside-empuje { flex: 1; }
.conteo-total-bloque { border-top: 1px solid var(--borde); padding-top: 18px; margin-top: 18px; }
.conteo-total-etiqueta { font-size: 13px; font-weight: 500; color: var(--texto-secundario); }
.conteo-total-fila { display: flex; align-items: flex-end; gap: 16px; margin-top: 4px; }
.conteo-total-principal { flex: 1; min-width: 0; }
.conteo-total-cifra { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.conteo-desglose { font-size: 12.5px; color: var(--texto-deshabilitado); margin-top: 6px; }
.aside-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.aside-nota { margin-top: 16px; font-size: 12px; color: var(--texto-deshabilitado); line-height: 1.5; }

/* La acción tiene ancho de botón (UX-1d): flex none, jamás barra */
.conteo-total-fila .boton {
  flex: none;
  width: auto;
}
.boton-grande {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: var(--sombra);
}
a.boton-grande { line-height: 1; }
.boton-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  color: #475569;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
}
.boton-secundario:hover { background: var(--fondo); border-color: var(--borde-marcado); }
.boton-hero { height: 44px; }

/* Pasos del cierre (1 conteo ciego → 2 sobre a oficina → 3 resultado) */
.pasos { display: flex; align-items: center; gap: 10px; flex: none; }
.paso { display: flex; align-items: center; gap: 8px; }
.paso-num {
  width: 22px;
  height: 22px;
  border-radius: var(--radio-pill);
  background: #F1F5F9;
  color: var(--texto-deshabilitado);
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.paso-etiqueta { font-size: 12.5px; font-weight: 500; color: var(--texto-deshabilitado); }
.paso.activo .paso-num { background: var(--marca-sutil); color: #1D4ED8; }
.paso.activo .paso-etiqueta { color: #334155; font-weight: 600; }
.paso-num.hecho { background: var(--exito-sutil); color: #047857; }
.paso-linea { width: 26px; height: 1px; background: var(--borde); }

/* Veredictos (resultado de apertura / arqueo del cierre) */
.veredicto { display: flex; flex-direction: column; gap: 12px; }
.veredicto-icono {
  width: 44px;
  height: 44px;
  border-radius: var(--radio-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.veredicto-verde { background: var(--exito-sutil); }
.veredicto-ambar { background: var(--advertencia-sutil); }
.veredicto-rojo { background: var(--error-sutil); }
.veredicto-neutro { background: #F1F5F9; }
.veredicto-titulo { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.veredicto-texto { font-size: 13px; color: var(--texto-secundario); line-height: 1.55; margin: 0; }
.veredicto-texto strong { color: #475569; }
.cifra-destacada { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; }
.cifra-media { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; }
.cifra-roja { color: var(--error); }
.dif-positiva { color: #B45309; font-weight: 700; }
.dif-negativa { color: var(--error); font-weight: 700; }
.dif-cero { color: #047857; font-weight: 700; }
.dos-cifras { display: flex; gap: 24px; }
.dos-cifras > div { flex: 1; min-width: 0; }
.dos-cifras > div:last-child { text-align: right; }
.nota-fondo { font-size: 11.5px; color: var(--texto-deshabilitado); margin-top: 3px; }

/* Turno abierto (A4): héroe + KPIs del turno */
.conteo-main-solo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 24px 22px; }
.turno-hero { flex: none; display: flex; align-items: center; gap: 20px; padding: 22px 24px; margin: 0; }
.hero-pulso {
  width: 46px;
  height: 46px;
  border-radius: var(--radio-pill);
  background: var(--exito-sutil);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hero-pulso span {
  width: 11px;
  height: 11px;
  border-radius: var(--radio-pill);
  background: var(--primario);
  animation: pulso-turno 2.4s ease-out infinite;
}
@keyframes pulso-turno {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.hero-cuerpo { flex: 1; min-width: 0; }
.hero-titulo { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.hero-sub { font-size: 13px; color: var(--texto-secundario); margin-top: 3px; }
.hero-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.hero-botones { display: flex; align-items: center; gap: 8px; }
.hero-nota { font-size: 11.5px; color: var(--texto-deshabilitado); }
.turno-kpis { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi-turno { display: flex; flex-direction: column; padding: 22px 24px; margin: 0; }
.kpi-relleno { flex: 1; }
.kpi-turno-etiqueta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-secundario);
}
/* VENTAS-1 item 0: el ojito de la comisión vive EN la fila del título
   (maqueta turno_abierto) — .boton-ojo nació absoluto para el campo de
   clave del login y aquí quedaba descolgado de la tarjeta */
.kpi-turno-etiqueta .boton-ojo { position: static; transform: none; width: 26px; height: 26px; flex: none; }
.kpi-turno-cifra { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.kpi-turno-cifra.oculta { letter-spacing: 0.06em; color: #CBD5E1; }
.kpi-turno-sub { font-size: 12.5px; color: var(--texto-deshabilitado); margin-top: 8px; }
.kpis-mini { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi-mini { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; margin: 0; }
.kpi-mini-etiqueta { font-size: 12.5px; font-weight: 500; color: var(--texto-secundario); }
.kpi-mini-cifra { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.kpi-mini-sub { font-size: 12px; color: var(--texto-deshabilitado); }

/* Sobre del cierre (paso 2): Denominación | Contado | Al sobre | Queda */
.grilla-sobre .grilla-cabecera, .conteo-fila-sobre {
  grid-template-columns: minmax(0, 1fr) 110px 130px 170px;
}
.sobre-contado { font-size: 14px; font-weight: 500; color: #475569; text-align: center; }
.sobre-queda { text-align: right; font-size: 14.5px; font-weight: 600; }
.sobre-queda .sub { font-size: 12px; font-weight: 400; color: var(--texto-deshabilitado); }
.sobre-no-editable { color: #CBD5E1; font-size: 14px; text-align: center; }
.pantalla-conteo .conteo-fila-sobre input.conteo-cantidad { width: 84px; height: 36px; font-size: 14.5px; }

/* Estados vacíos a pantalla (sin sucursales / sin cajas / sin sobre) */
.lienzo-centrado { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; min-height: 0; }
.vacio-pantalla { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 480px; text-align: center; }
.vacio-icono {
  width: 64px;
  height: 64px;
  border-radius: var(--radio-pill);
  background: var(--superficie);
  border: 1px solid var(--borde);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--texto-deshabilitado);
}
.vacio-titulo { font-size: 16px; font-weight: 600; color: #1E293B; letter-spacing: -0.01em; }
.vacio-texto { font-size: 13.5px; color: var(--texto-secundario); line-height: 1.55; margin: 0; }
.vacio-texto strong { color: #475569; }
.vacio-nota { font-size: 12px; color: var(--texto-deshabilitado); margin: 4px 0 0; }

/* Select del sistema (clase global "selector").
   CERRADO (todos los navegadores): appearance none + chevron propio,
   borde/radio/focus de la familia de los inputs.
   ABIERTO (Chromium/Edge 132+): API de select personalizable —
   appearance: base-select en el select Y en ::picker(select) — para
   que la lista desplegada sea de la misma familia visual. Firefox y
   Safari (sin soporte, feature "limited availability") degradan limpio
   al popup nativo con el cerrado ya modernizado. */
select.selector {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--borde-marcado);
  border-radius: var(--radio);
  padding: 8px 34px 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--texto);
  background-color: var(--superficie);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
select.selector:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-sutil);
}

@supports (appearance: base-select) {
  select.selector,
  select.selector::picker(select) {
    appearance: base-select;
  }
  select.selector { background-image: none; }
  select.selector::picker-icon {
    color: var(--texto-secundario);
    transition: 0.15s rotate;
  }
  select.selector:open::picker-icon { rotate: 180deg; }
  select.selector::picker(select) {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-elevada);
    padding: 4px;
    margin-top: 4px;
  }
  select.selector option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radio-chico);
    font-size: 14px;
    cursor: pointer;
  }
  select.selector option:hover,
  select.selector option:focus {
    background: var(--marca-sutil);
    color: var(--marca-hover);
  }
  select.selector option:checked { font-weight: 600; }
  select.selector option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--marca);
  }
}

/* --- UI-2: conteo, recepción y devolución fieles a docs/maquetas/v2 ---
   Reutiliza la capa UI-1 (barra, aside, grilla-conteo, botones, pills);
   acá viven las piezas nuevas: tarjetas de zona, scanner con resultados,
   steppers, modales, tabs y la tabla-grilla de recepción. */

/* A6 — tarjetas de zona */
.zonas-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  grid-auto-rows: minmax(150px, auto);
  gap: 14px;
}
.zona-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  padding: 18px 20px 16px;
  background: var(--superficie);
  border: none;
  border-radius: var(--radio-grande);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--texto);
  transition: box-shadow 0.12s;
}
.zona-tarjeta:hover { box-shadow: inset 0 0 0 1px var(--borde-marcado), var(--sombra-elevada); color: var(--texto); }
.zona-tarjeta.contando { box-shadow: inset 0 0 0 1.5px var(--marca), var(--sombra); }
.zona-tarjeta.contando:hover { box-shadow: inset 0 0 0 1.5px var(--marca), var(--sombra-elevada); }
.zona-tarjeta.ocupada { cursor: default; }
.zona-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.zona-nombre { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.chip-contando {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  background: var(--marca-sutil);
  color: #1D4ED8;
  font-size: 11px;
  font-weight: 600;
}
.punto-pulso { animation: pulso-zona 2.2s ease-out infinite; }
.chip-contando .punto-pulso {
  width: 6px;
  height: 6px;
  border-radius: var(--radio-pill);
  background: var(--marca);
}
@keyframes pulso-zona {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); }
  70% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.zona-meta { font-size: 12.5px; color: var(--texto-secundario); line-height: 1.5; }
.zona-empuje { flex: 1; }
.zona-accion {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
}
.zona-accion.azul { color: #1D4ED8; }

/* A7 — scanner con resultados y líneas con stepper */
.buscador-scanner { position: relative; flex: none; }
.buscador-scanner > svg {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--texto-deshabilitado);
}
.buscador-scanner input {
  width: 100%;
  height: 54px;
  padding: 0 130px 0 50px;
  font-size: 15.5px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  outline: none;
  box-shadow: var(--sombra);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.buscador-scanner input:focus {
  border-color: var(--marca-borde);
  box-shadow: 0 0 0 3px var(--marca-sutil), var(--sombra);
}
.buscador-scanner .pista {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  font-weight: 500;
  color: #CBD5E1;
  pointer-events: none;
}
.desplegable {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
  padding: 6px;
  max-height: 340px;
  overflow: auto;
}
.desplegable-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.desplegable-item:hover, .desplegable-item.activo { background: var(--fondo); }
.desplegable-item .nombre {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-ya-contado {
  flex: none;
  padding: 2px 9px;
  border-radius: var(--radio-pill);
  background: #F1F5F9;
  color: var(--texto-secundario);
  font-size: 11px;
  font-weight: 500;
}
.desplegable-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 12px 4px;
  border-top: 1px solid #F1F5F9;
  font-size: 11.5px;
  color: var(--texto-deshabilitado);
}
.desplegable-pie kbd {
  padding: 1px 6px;
  border-radius: 5px;
  background: #F1F5F9;
  color: var(--texto-secundario);
  font-weight: 500;
  font-family: inherit;
}
.linea-conteo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #F1F5F9;
}
.linea-conteo .nombre { font-size: 14px; font-weight: 500; min-width: 0; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto-secundario);
  cursor: pointer;
  font: inherit;
}
.stepper button:hover { background: var(--fondo); color: var(--texto); border-color: var(--borde-marcado); }
.stepper input, .pantalla-conteo .stepper input.conteo-cantidad {
  width: 56px;
  height: 32px;
  padding: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}
.stepper .cantidad-fija { min-width: 30px; text-align: center; font-size: 14px; font-weight: 600; }
.stepper .tope { font-size: 11.5px; color: var(--texto-deshabilitado); }
.boton-quitar-linea {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radio-chico);
  background: transparent;
  color: #CBD5E1;
  cursor: pointer;
}
.boton-quitar-linea:hover { background: var(--error-sutil); color: var(--error); }
.acciones-partidas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.accion-terciaria {
  margin-top: 10px;
  border: none;
  background: transparent;
  color: var(--texto-deshabilitado);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: right;
}
.accion-terciaria:hover { color: var(--error); }

/* Modales (cierre de sesión, archivar, confirmar devolución) */
.velo {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal {
  width: 450px;
  max-width: 100%;
  background: var(--superficie);
  border-radius: var(--radio-grande);
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 30px rgba(15, 23, 42, 0.12);
  padding: 24px;
  animation: modal-entra 0.16s ease-out;
}
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-titulo { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.modal-texto { font-size: 13px; color: var(--texto-secundario); line-height: 1.55; margin: 8px 0 0; }
.modal-texto strong { color: #334155; }
.modal-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 20px; }
.modal .boton-secundario, .modal .boton-chico { height: 40px; }
.boton-chico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radio);
  background: var(--primario);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.boton-chico:hover { background: var(--primario-hover); }
.boton-chico:disabled { background: var(--borde); color: var(--texto-deshabilitado); cursor: not-allowed; }
.boton-chico.peligro { background: var(--error); }
.boton-chico.peligro:hover { background: #B91C1C; }
.boton-chico.oscuro { background: var(--texto); }
.boton-chico.oscuro:hover { background: #1E293B; }

/* A8 — recepción: tarjetas de aprobación, tabs y tabla-grilla */
.tarjetas-aprobar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 14px;
}
.tarjeta-aprobar { display: flex; flex-direction: column; gap: 11px; padding: 16px 18px; margin: 0; }
.fila-chips { display: flex; align-items: center; gap: 8px; }
.chip-codigo-suave {
  padding: 2px 8px;
  border-radius: 5px;
  background: #F1F5F9;
  color: var(--texto-secundario);
  font-size: 11.5px;
  font-weight: 500;
}
.etiqueta-campo { font-size: 11.5px; font-weight: 500; color: var(--texto-deshabilitado); }
.fila-precio-sucursal { display: flex; align-items: center; gap: 9px; }
.fila-precio-sucursal .sucursal { width: 86px; flex: none; font-size: 12.5px; font-weight: 500; color: #334155; }
.fila-precio-sucursal .signo { font-size: 13px; color: var(--texto-deshabilitado); }
.fila-precio-sucursal input {
  width: 84px;
  height: 32px;
  padding: 0 8px;
  text-align: right;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--borde);
  border-radius: 7px;
}
.fila-precio-sucursal .piso-texto { flex: none; margin-left: auto; font-size: 11.5px; color: var(--texto-deshabilitado); }
.linea-divisoria { height: 1px; background: #F1F5F9; }
.seccion-encabezado { display: flex; align-items: baseline; gap: 9px; }
.seccion-encabezado strong { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.seccion-encabezado .conteo-pill {
  padding: 2px 9px;
  border-radius: var(--radio-pill);
  background: var(--advertencia-sutil);
  color: #B45309;
  font-size: 11.5px;
  font-weight: 600;
}
.seccion-encabezado .nota { font-size: 12px; color: var(--texto-deshabilitado); }
.acciones-tarjeta { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; }
.fila-motivo { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.fila-motivo input { flex: 1; height: 36px; padding: 0 11px; font-size: 12.5px; border: 1px solid var(--borde); border-radius: var(--radio); }
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #F1F5F9;
  border-radius: var(--radio-pill);
}
.tab {
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--texto-secundario);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.tab:hover { color: #334155; }
.tab.activo {
  background: var(--superficie);
  color: var(--texto);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  cursor: default;
}
.interruptor { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--texto-secundario); }
.interruptor .pista-interruptor {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: var(--radio-pill);
  background: var(--borde-marcado);
  transition: background 0.15s;
}
.interruptor.activo .pista-interruptor { background: var(--marca); }
.interruptor .perilla {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radio-pill);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  transition: left 0.15s;
}
.interruptor.activo .perilla { left: 16px; }
.tabla-grilla { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tabla-grilla-cabecera, .tabla-grilla-fila { display: grid; gap: 12px; align-items: center; padding: 10px 20px; }
.tabla-grilla-cabecera {
  flex: none;
  border-bottom: 1px solid #F1F5F9;
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-deshabilitado);
}
.tabla-grilla-filas { flex: 1; min-height: 0; overflow-y: auto; }
.tabla-grilla-fila { padding: 11px 20px; border-bottom: 1px solid #F1F5F9; }
.grilla-recepciones .tabla-grilla-cabecera, .grilla-recepciones .tabla-grilla-fila {
  grid-template-columns: 88px 84px minmax(0, 1fr) 118px 110px 56px minmax(180px, 250px) minmax(150px, 210px);
}
.grilla-ncs .tabla-grilla-cabecera, .grilla-ncs .tabla-grilla-fila {
  grid-template-columns: 88px 84px minmax(0, 1fr) 118px 116px 120px;
}
.celda-folio { font-size: 13.5px; font-weight: 600; }
.celda-fecha, .celda-num { font-size: 13px; color: var(--texto-secundario); }
.celda-emisor { font-size: 13.5px; font-weight: 500; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.celda-estado { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.celda-estado .sub { font-size: 11.5px; color: var(--texto-deshabilitado); line-height: 1.4; }
.celda-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.boton-icono {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto-deshabilitado);
  cursor: pointer;
}
.boton-icono:hover { background: var(--fondo); color: #475569; border-color: var(--borde-marcado); }
.pie-tabla {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-top: 1px solid #F1F5F9;
  font-size: 12.5px;
  color: var(--texto-secundario);
}
.pie-tabla .empuje { flex: 1; }
.boton-pagina {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto-secundario);
}
.boton-pagina:hover { background: var(--fondo); color: var(--texto); }
.boton-pagina.apagado { color: #CBD5E1; pointer-events: none; }

/* A9 — devolución */
.fila-devolucion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px minmax(200px, 290px) 100px;
  gap: 14px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid #F1F5F9;
}
.fila-devolucion .nombre { font-size: 14px; font-weight: 500; }
.fila-devolucion .meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--texto-secundario); }
.pill-destino {
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radio-pill);
  background: var(--superficie);
  color: var(--texto-secundario);
  box-shadow: inset 0 0 0 1px var(--borde);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.pill-destino:hover { box-shadow: inset 0 0 0 1px var(--borde-marcado); color: #334155; }
.pill-destino.reingreso-activo { background: var(--marca-sutil); color: #1D4ED8; box-shadow: inset 0 0 0 1.5px var(--marca); font-weight: 600; cursor: default; }
.pill-destino.merma-activa { background: var(--advertencia-sutil); color: #B45309; box-shadow: inset 0 0 0 1.5px var(--advertencia); font-weight: 600; cursor: default; }
.input-motivo-merma { width: 100%; height: 30px; padding: 0 10px; font-size: 12px; border: 1px solid var(--borde); border-radius: 7px; }
.fila-venta-reciente {
  display: grid;
  grid-template-columns: 60px 100px minmax(0, 1fr) 120px 24px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-bottom: 1px solid #F1F5F9;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.fila-venta-reciente:hover { background: var(--fondo); }
.pill-agotada {
  padding: 3px 11px;
  border-radius: var(--radio-pill);
  background: #F1F5F9;
  color: var(--texto-deshabilitado);
  font-size: 11.5px;
  font-weight: 500;
}
.cifra-apagada { color: #CBD5E1; }

/* Recepción: si las tarjetas crecen, el main se desplaza y la tabla
   conserva un alto útil (la paginación limita a 20 filas igual) */
.conteo-main-solo.main-desplazable { overflow-y: auto; }
.main-desplazable .tabla-grilla { flex: 1 0 auto; min-height: 420px; }

/* --- UI-3: panel del dueño fiel a docs/maquetas/v2 ---
   Panel, turnos del día, timeline, sobres, vencimientos, ajustes,
   campañas y zonas. Reutiliza UI-1/UI-2 (tabla-grilla, modal, tabs,
   interruptor, kpi-mini, chips); acá viven el control segmentado, las
   alertas v2, el gráfico, el feed forense y la barra de selección. */

/* Control segmentado (sucursal / consolidado) — links, no JS */
.segmentado {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #F1F5F9;
  border-radius: var(--radio-pill);
}
.segmentado a, .segmentado button {
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--texto-secundario);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.segmentado a:hover, .segmentado button:hover { color: #334155; }
.segmentado .activo, .segmentado .activo:hover {
  background: var(--superficie);
  color: var(--texto);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  cursor: default;
}

/* KPIs del panel (5 tarjetas con delta pill) */
.kpis-panel { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.kpi-panel { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; margin: 0; }
.kpi-panel .kpi-etiqueta { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.kpi-panel-cifra { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.kpi-panel-pie { display: flex; align-items: center; gap: 8px; min-width: 0; }
.delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radio-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.delta-pill.sube { background: var(--exito-sutil); color: #047857; }
.delta-pill.baja { background: var(--error-sutil); color: var(--error); }
.delta-pill.neutra { background: #F1F5F9; color: var(--texto-deshabilitado); }
.kpi-panel-sub {
  font-size: 11.5px;
  color: var(--texto-deshabilitado);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gráfico de 14 días (CSS puro; el día actual en azul, monto al hover) */
.panel-rejilla-v2 { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.1fr); gap: 14px; }
.grafico-barras { flex: 1; min-height: 160px; display: flex; align-items: stretch; gap: 6px; padding: 14px 20px 8px; }
.barra-dia { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; }
.barra-pista { flex: 1; display: flex; align-items: flex-end; }
.barra-relleno {
  width: 100%;
  min-height: 3px;
  background: var(--marca-borde);
  border-radius: 5px 5px 2px 2px;
  transition: background 0.12s ease;
}
.barra-hoy { background: var(--marca); }
.barra-dia:hover .barra-relleno { background: var(--marca-hover); }
.barra-etiqueta { flex: none; text-align: center; font-size: 10.5px; color: var(--texto-deshabilitado); }
.barra-hoy-etiqueta { color: #1D4ED8; font-weight: 600; }
.barra-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--texto);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radio-chico);
  white-space: nowrap;
  z-index: 5;
}
.barra-dia:hover .barra-tooltip { display: block; }

/* Alertas v2: pill de severidad + título + conteo + chevron */
.alerta-fila {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #F1F5F9;
  color: var(--texto);
}
.alerta-fila:hover { background: var(--fondo); color: var(--texto); }
.pill-sev {
  flex: none;
  width: 74px;
  text-align: center;
  padding: 3px 0;
  border-radius: var(--radio-pill);
  font-size: 11px;
  font-weight: 600;
}
.pill-sev-alta { background: var(--error-sutil); color: var(--error); }
.pill-sev-media { background: var(--advertencia-sutil); color: #B45309; }
.pill-sev-info { background: var(--marca-sutil); color: #1D4ED8; }
.alerta-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alerta-texto strong { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.alerta-detalle { font-size: 12px; color: var(--texto-secundario); line-height: 1.4; }
.alerta-conteo { flex: none; font-size: 16px; font-weight: 700; }
.fila-limpia { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid #F1F5F9; }
.fila-limpia .check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radio-pill);
  background: var(--exito-sutil);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fila-limpia span:last-child { font-size: 13px; font-weight: 500; color: #047857; }

/* Timeline forense: tarjetas Revisar + feed con línea vertical */
.flags-grid { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.flag-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--superficie);
  border: none;
  border-radius: var(--radio-grande);
  box-shadow: inset 0 0 0 1px var(--borde), var(--sombra);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--texto);
  transition: box-shadow 0.12s;
}
.flag-tarjeta:hover { box-shadow: inset 0 0 0 1.5px var(--marca-borde), var(--sombra-elevada); color: var(--texto); }
.flag-cabecera { display: flex; align-items: center; gap: 8px; }
.flag-hora { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.flag-punto { width: 8px; height: 8px; border-radius: var(--radio-pill); background: var(--error); }
.flag-titulo { font-size: 13px; font-weight: 600; line-height: 1.35; }
.flag-sub { font-size: 11.5px; color: var(--texto-secundario); line-height: 1.45; }
.feed-fila {
  display: grid;
  grid-template-columns: 88px 40px minmax(0, 1fr) auto 120px;
  gap: 12px;
  align-items: center;
  padding: 0 20px;
}
.feed-fila.sospechoso { background: var(--advertencia-sutil); }
.feed-fila:target { background: var(--marca-sutil); }
.feed-hora { font-size: 13px; font-weight: 600; color: #334155; }
.feed-carril { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.feed-carril .linea { flex: 1; width: 1.5px; background: var(--borde); }
.feed-icono {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radio-pill);
  background: #F1F5F9;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 3px 0;
}
.feed-fila.sospechoso .feed-icono { background: #FEF3C7; color: #B45309; }
.feed-cuerpo { min-width: 0; padding: 12px 0; }
.feed-titulo { font-size: 13.5px; font-weight: 500; }
.feed-sub { font-size: 12px; color: var(--texto-secundario); margin-top: 2px; line-height: 1.4; }
.feed-razon { font-size: 12px; color: #B45309; font-weight: 500; margin-top: 2px; }
.feed-monto { font-size: 13.5px; font-weight: 600; text-align: right; }

/* Sobres: tiles y fila expandible con el detalle por denominación */
.tiles { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; margin: 0; }
.tile-etiqueta { font-size: 12.5px; font-weight: 500; color: var(--texto-secundario); }
.tile-cifra { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.tile-sub { font-size: 11.5px; color: var(--texto-deshabilitado); }
.fila-sobre {
  display: grid;
  grid-template-columns: 180px 150px 120px minmax(0, 1fr) 130px 180px 30px;
  gap: 12px;
  align-items: center;
  padding: 13px 20px;
  cursor: pointer;
}
.fila-sobre:hover { background: var(--fondo); }
.sobre-icono {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radio);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sobre-detalle {
  margin: 4px 20px 16px 59px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 16px;
  max-width: 520px;
}
.sobre-detalle-titulo { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--texto-deshabilitado); margin-bottom: 8px; }
.sobre-detalle-fila {
  display: grid;
  grid-template-columns: 1fr 90px 110px;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #F1F5F9;
  font-size: 13px;
}
.chevron-expandible { transition: transform 0.16s ease; color: var(--texto-deshabilitado); }
.chevron-expandible.abierto { transform: rotate(180deg); }

/* Sub-nav de Inventario (Vencimientos | Ajustes | Campañas | Zonas) */
.subnav { flex: none; display: flex; align-items: center; gap: 8px; }
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radio-pill);
  background: var(--superficie);
  color: var(--texto-secundario);
  box-shadow: inset 0 0 0 1px var(--borde);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.subnav a:hover { box-shadow: inset 0 0 0 1px var(--borde-marcado); color: #334155; }
.subnav a.activo, .subnav a.activo:hover {
  background: var(--marca-sutil);
  color: #1D4ED8;
  box-shadow: inset 0 0 0 1px #BFDBFE;
  font-weight: 600;
}
.subnav .badge {
  padding: 1px 8px;
  border-radius: var(--radio-pill);
  background: var(--advertencia-sutil);
  color: #B45309;
  font-size: 11px;
  font-weight: 600;
}

/* Ajustes: checkbox, selección y barra flotante de lote */
.cuadro-sel {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--borde-marcado);
  border-radius: 5px;
  background: var(--superficie);
  cursor: pointer;
  padding: 0;
}
.cuadro-sel.marcado { background: var(--marca); border-color: var(--marca); }
.dif-grande { font-size: 14px; font-weight: 700; text-align: right; }
.barra-seleccion {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  background: var(--texto);
  border-radius: var(--radio-grande);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.28);
}
.barra-seleccion .resumen { font-size: 13px; font-weight: 500; color: #F8FAFC; }
.barra-seleccion .divisor { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.18); }
.boton-oscuro-borde {
  height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radio);
  background: transparent;
  color: #E2E8F0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.boton-oscuro-borde:hover { background: rgba(255, 255, 255, 0.08); }

/* Campañas: tarjeta activa con barra de avance */
.progreso { height: 7px; border-radius: var(--radio-pill); background: #F1F5F9; overflow: hidden; }
.progreso > div { height: 100%; border-radius: var(--radio-pill); background: var(--marca); transition: width 0.3s ease; }
.chip-activa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  background: var(--exito-sutil);
  color: #047857;
  font-size: 11.5px;
  font-weight: 600;
}
.chip-activa .punto { width: 6px; height: 6px; }
.stat-campania { display: flex; flex-direction: column; gap: 2px; }
.stat-campania .etiqueta { font-size: 12.5px; font-weight: 500; color: var(--texto-secundario); }
.stat-campania .cifra { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.tarjeta-punteada {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--superficie);
  border: 1px dashed var(--borde-marcado);
  border-radius: var(--radio-grande);
}

/* Filtros con conteo (vencimientos) */
.filtros-conteo { display: flex; align-items: center; gap: 8px; }
.filtro-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: var(--radio-pill);
  background: var(--superficie);
  color: var(--texto-secundario);
  box-shadow: inset 0 0 0 1px var(--borde);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.filtro-pill:hover { box-shadow: inset 0 0 0 1px var(--borde-marcado); color: #334155; }
.filtro-pill.activo { background: var(--marca-sutil); color: #1D4ED8; box-shadow: inset 0 0 0 1px #BFDBFE; font-weight: 600; }
.filtro-pill strong { font-weight: 700; }

/* Zonas: edición inline */
.fila-editar { display: flex; align-items: center; gap: 8px; }
.fila-editar input {
  flex: 1;
  max-width: 380px;
  height: 34px;
  padding: 0 11px;
  font-size: 13px;
  border: 1px solid var(--marca-borde);
  border-radius: var(--radio);
  box-shadow: 0 0 0 3px var(--marca-sutil);
}

/* Columnas de las tablas-grilla del panel del dueño (UI-3) */
.grilla-turnos .tabla-grilla-cabecera, .grilla-turnos .tabla-grilla-fila {
  grid-template-columns: 130px minmax(0, 1fr) 150px 120px 64px 70px 110px 110px 24px;
}
.fila-clicable { color: var(--texto); cursor: pointer; }
.fila-clicable:hover { background: var(--fondo); color: var(--texto); }
.grilla-vencimientos .tabla-grilla-cabecera, .grilla-vencimientos .tabla-grilla-fila {
  grid-template-columns: minmax(0, 1fr) 110px 150px 130px 80px 120px;
}
.grilla-ajustes .tabla-grilla-cabecera, .grilla-ajustes .tabla-grilla-fila {
  grid-template-columns: 36px minmax(0, 1fr) 200px 76px 76px 100px 170px 180px;
}
.grilla-campanias .tabla-grilla-cabecera, .grilla-campanias .tabla-grilla-fila {
  grid-template-columns: minmax(0, 1fr) 140px 150px 90px 100px 110px;
}
.grilla-zonas .tabla-grilla-cabecera, .grilla-zonas .tabla-grilla-fila {
  grid-template-columns: 70px minmax(0, 1fr) 160px 150px 60px;
}

/* --- UI-4: login, usuarios, canales y clientes (docs/maquetas/v2) --- */

/* C1 — Login: página completa centrada (la tarjeta 380px de la maqueta) */
body.pantalla-login {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-v2-marca { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.login-v2-marca .marca-cubo-grande {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--marca);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.login-v2-marca .nombre { font-size: 23px; font-weight: 600; color: var(--marca); letter-spacing: -0.01em; }
.login-v2-marca .chip-local { padding: 4px 10px; font-size: 11px; }
.login-v2-tarjeta {
  width: 380px;
  max-width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 26px 26px 24px;
}
.login-v2-titulo { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-align: center; }
.login-error {
  display: flex;
  gap: 9px;
  margin-top: 16px;
  padding: 11px 13px;
  background: var(--error-sutil);
  border: 1px solid #FECACA;
  border-radius: 10px;
}
.login-error svg { flex: none; margin-top: 1px; }
.login-error p { margin: 0; font-size: 12.5px; color: #991B1B; line-height: 1.5; }
.login-etiqueta { font-size: 12px; font-weight: 500; color: var(--texto-secundario); margin-top: 18px; }
.login-etiqueta + .login-etiqueta { margin-top: 14px; }
input.entrada-login {
  width: 100%;
  height: 42px;
  margin-top: 6px;
  padding: 0 13px;
  font-size: 14px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input.entrada-login:focus { border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE; }
input.entrada-login.con-error { border-color: #FECACA; }
.campo-clave { position: relative; margin-top: 6px; }
.campo-clave input { margin-top: 0; padding-right: 44px; }
.boton-ojo {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--texto-deshabilitado);
  cursor: pointer;
}
.boton-ojo:hover { background: #F1F5F9; color: #475569; }
.boton-entrar {
  width: 100%;
  height: 46px;
  margin-top: 20px;
  border: none;
  border-radius: 10px;
  background: var(--primario);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  transition: background 0.12s;
}
.boton-entrar:hover { background: var(--primario-hover); }
.boton-entrar:active { transform: translateY(1px); }
.boton-entrar:disabled { background: var(--primario-hover); cursor: default; }
.login-ayuda { font-size: 12px; color: var(--texto-deshabilitado); line-height: 1.5; margin-top: 16px; text-align: center; }
.login-pie { margin-top: 22px; font-size: 11.5px; color: #CBD5E1; }

/* C2–C4 — columnas de las tablas-grilla */
.grilla-usuarios .tabla-grilla-cabecera, .grilla-usuarios .tabla-grilla-fila {
  grid-template-columns: minmax(0, 1fr) 150px 180px 230px 130px 60px;
}
.grilla-canales .tabla-grilla-cabecera, .grilla-canales .tabla-grilla-fila {
  grid-template-columns: 80px minmax(0, 0.9fr) minmax(0, 1.3fr) 130px 170px 150px 60px;
}
.grilla-clientes .tabla-grilla-cabecera, .grilla-clientes .tabla-grilla-fila {
  grid-template-columns: minmax(0, 1fr) 110px 160px 190px 24px;
}
/* --- DEVOLUCION-2: el cambio (la NC como abono de una venta nueva) --- */
.franja-abono {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--advertencia-sutil);
  border: 1px solid #FDE68A;
  border-radius: 10px;
  color: #92400E;
  font-size: 13px;
  font-weight: 500;
}
.franja-abono .ref { margin-left: auto; color: #B45309; font-size: 12px; }
.bloque-rut-cambio { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bloque-rut-cambio label { font-size: 12.5px; font-weight: 500; color: var(--texto-secundario); }
.bloque-rut-cambio input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font: inherit;
  font-size: 13.5px;
  outline: none;
}
.bloque-rut-cambio input:focus { border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE; }
.bloque-rut-cambio .nota { margin: 0; font-size: 12px; }
.bloque-rut-cambio .nota.alerta { color: #B45309; }
.bloque-rut-cambio .nota.ok { color: #047857; }

/* --- VENTAS-1: historial del día (documentos / por producto) --- */
.fila-filtros-ventas, .fila-tabs-ventas {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.franja-ventas { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); }
.chips-medios { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-apagado { background: var(--fondo); color: #CBD5E1; border: 1px solid var(--borde); }
.monto-negativo { color: var(--error); }
.selector-filtro, .entrada-folio {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font: inherit;
  font-size: 13px;
  color: #334155;
}
.entrada-folio { width: 150px; }
.entrada-folio:focus, .selector-filtro:focus { outline: none; border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE; }
.grilla-ventas-docs .tabla-grilla-cabecera, .grilla-ventas-docs .tabla-grilla-fila {
  grid-template-columns: 48px 76px minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 0.9fr) 56px minmax(0, 1.3fr) 104px 18px;
}
.grilla-ventas-prod .tabla-grilla-cabecera, .grilla-ventas-prod .tabla-grilla-fila {
  grid-template-columns: 48px minmax(0, 2fr) 88px 110px 110px 110px minmax(0, 1fr);
}

.grilla-historial-cliente .tabla-grilla-cabecera, .grilla-historial-cliente .tabla-grilla-fila {
  grid-template-columns: 100px minmax(0, 1fr) 120px 100px 120px;
}
.grilla-historial-cliente .tabla-grilla-fila { padding-top: 10px; padding-bottom: 10px; }

/* Personas y estados en filas */
.avatar-fila {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--marca-sutil);
  color: #1D4ED8;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar-fila.apagado { background: #F1F5F9; color: var(--texto-deshabilitado); }
.celda-persona { display: flex; align-items: center; gap: 10px; min-width: 0; }
.celda-persona .nombre {
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-activo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--exito-sutil);
  color: #047857;
  font-size: 11.5px;
  font-weight: 600;
}
.chip-activo .punto-verde { width: 6px; height: 6px; border-radius: 999px; background: var(--primario); }
.chips-fila { display: flex; flex-wrap: wrap; gap: 5px; }

/* Chips seleccionables (rol, sucursales, documento, caja): el input real
   viaja en el POST — radio o checkbox oculto dentro del label */
.chips-eleccion { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-eleccion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto-secundario);
  cursor: pointer;
  user-select: none;
}
.chip-eleccion input { position: absolute; opacity: 0; pointer-events: none; }
.chip-eleccion svg { display: none; }
.chip-eleccion:has(input:checked) {
  background: var(--marca-sutil);
  color: #1D4ED8;
  box-shadow: inset 0 0 0 1.5px var(--marca);
  font-weight: 600;
}
.chip-eleccion:has(input:checked) svg { display: block; }
.chip-eleccion:has(input:focus-visible) { outline: 2px solid #93C5FD; outline-offset: 1px; }

/* C3 — orden con flechas */
.celda-orden { display: flex; align-items: center; gap: 8px; }
.celda-orden .num { width: 16px; font-size: 13px; font-weight: 600; }
.flechas-orden { display: flex; flex-direction: column; gap: 2px; }
.flechas-orden button {
  width: 20px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--superficie);
  color: #64748B;
  cursor: pointer;
  padding: 0;
}
.flechas-orden button:hover { background: var(--fondo); }
.flechas-orden button:disabled { color: var(--borde); cursor: default; background: var(--superficie); }

/* C4 — buscador grande de clientes */
.buscador-grande { position: relative; flex: none; }
.buscador-grande > svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.buscador-grande input {
  width: 100%;
  height: 48px;
  padding: 0 20px 0 48px;
  font-size: 15px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  outline: none;
  box-shadow: var(--sombra);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.buscador-grande input:focus { border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE, var(--sombra); }

/* C4 — ficha del cliente */
.ficha-encabezado { flex: none; display: flex; align-items: center; gap: 14px; }
.ficha-encabezado h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.avatar-ficha {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--marca-sutil);
  color: #1D4ED8;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ficha-titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.chip-rut {
  padding: 3px 10px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
}
.ficha-titulo input[name="nombre"] {
  width: 340px;
  height: 38px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
  border: 1px solid #93C5FD;
  border-radius: 8px;
  outline: none;
  box-shadow: 0 0 0 3px #DBEAFE;
}
.kpis-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ficha-rejilla {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 14px;
}
.fila-top { display: flex; align-items: center; gap: 12px; padding: 9px 20px; border-bottom: 1px solid #F1F5F9; }
.fila-top .num { flex: none; width: 22px; font-size: 12.5px; font-weight: 700; color: #CBD5E1; }
.fila-top .num.destacado { color: #1D4ED8; }
.fila-top .nombre {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila-top .unidades { flex: none; font-size: 12px; color: var(--texto-secundario); }

/* Formularios de modal (C2/C3) */
.campos-dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
input.entrada-modal {
  width: 100%;
  height: 38px;
  margin-top: 5px;
  padding: 0 11px;
  font-size: 13px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input.entrada-modal:focus { border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE; }
input.entrada-modal[readonly] { background: var(--fondo); color: var(--texto-secundario); }
.divisor-modal { height: 1px; background: #F1F5F9; margin-top: 18px; }
.zona-riesgo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.zona-riesgo p { flex: 1; min-width: 0; margin: 0; font-size: 12px; color: var(--texto-secundario); line-height: 1.45; }
.boton-riesgo {
  flex: none;
  height: 32px;
  padding: 0 13px;
  border: 1px solid #FECACA;
  border-radius: 8px;
  background: var(--superficie);
  color: var(--error);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.boton-riesgo:hover { background: var(--error-sutil); }
.boton-riesgo.reactivar { border-color: #A7F3D0; color: #047857; }
.boton-riesgo.reactivar:hover { background: var(--exito-sutil); }
.nota-verificacion { font-size: 11.5px; font-weight: 600; margin-top: 7px; }
.nota-verificacion.pendiente { color: #B45309; }
.nota-verificacion.coincide { color: #047857; }
.ayuda-doc { font-size: 11.5px; color: var(--texto-deshabilitado); line-height: 1.5; margin-top: 7px; }

/* ---- IMPRESION-1: impresión térmica de 80mm (capa navegador) ----
   La operación imprime vía Chrome en la ONE 480NX-II con preset de
   papel 80 × 210 mm. El comprobante imprimible es un <pre> con la MISMA
   composición de 42 columnas del agente (payload_a_lineas): cabe en UNA
   página. Runbook del diálogo de Chrome en agente/README.md. */
.solo-impresion { display: none; }
@media print {
  body.imprime-termico { background: #fff; }
  body.imprime-termico .barra,
  body.imprime-termico .flash,
  body.imprime-termico .conteo-lienzo { display: none !important; }
  body.imprime-termico .solo-impresion {
    display: block;
    width: 72mm;
    margin: 0;
    padding: 2mm 0 0 2mm;
    font: 10px/1.4 "Consolas", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    white-space: pre;
    color: #000;
  }
}

/* --- CLIENTES-1: correccion de nombre verificada en el meson --- */
.corregir-nombre {
  border: none;
  background: transparent;
  padding: 0 2px;
  margin-left: 4px;
  font: inherit;
  font-size: 11.5px;
  color: var(--texto-deshabilitado);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.corregir-nombre:hover { color: var(--texto-secundario); }
.editando-nombre { display: flex; align-items: center; gap: 8px; }
.pista-corregir { font-size: 11.5px; color: var(--texto-deshabilitado); white-space: nowrap; }
.guardar-nombre {
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--borde-marcado);
  border-radius: var(--radio-chico);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-secundario);
  cursor: pointer;
}
.guardar-nombre:hover:not(:disabled) { border-color: #93C5FD; color: #1D4ED8; }
.guardar-nombre:disabled { opacity: 0.5; cursor: not-allowed; }
.pos-cliente .estado.editando-nombre { color: var(--texto-secundario); }
.bloque-rut-cambio .editando-nombre { flex-wrap: wrap; }
.bloque-rut-cambio .editando-nombre input { flex: 1; min-width: 120px; height: 32px; font-size: 12.5px; }

/* --- TIMELINE-FIX: Revisar enlaza al feed con resalte que se desvanece --- */
.feed-fila { transition: background-color 0.9s ease; }
.feed-fila.fila-resaltada,
.feed-fila.sospechoso.fila-resaltada { background-color: #FDE68A; transition: background-color 0.1s ease; }

/* --- VENTAS-RANGO: selector de rango propio y fecha estilo de la casa --- */
.selector-rango { position: relative; }
.boton-rango {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
}
.boton-rango:hover { border-color: var(--borde-marcado); }
.panel-rango {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.preset-lista { display: flex; flex-direction: column; }
.preset-lista .preset {
  padding: 7px 10px;
  border-radius: var(--radio-chico);
  font-size: 13px;
  color: var(--texto-secundario);
  text-decoration: none;
}
.preset-lista .preset:hover { background: #F1F5F9; }
.preset-lista .preset.activo { background: var(--marca-sutil); color: #1D4ED8; font-weight: 600; }
.rango-libre {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
}
.rango-libre .titulo-rango {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-deshabilitado);
}
.rango-libre .campos { display: flex; align-items: center; gap: 6px; }
.rango-libre input {
  width: 92px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.rango-libre input:focus { border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE; }
.aplicar-rango {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--borde-marcado);
  border-radius: var(--radio-chico);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-secundario);
  cursor: pointer;
}
.aplicar-rango:hover { border-color: #93C5FD; color: #1D4ED8; }
.rango-libre .nota-error { font-size: 11.5px; color: var(--error); }
.fecha-periodo {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}
.boton-hoy {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-secundario);
  text-decoration: none;
}
.boton-hoy:hover { border-color: #93C5FD; color: #1D4ED8; }

/* --- RANKING-1: dashboard de vendedores --- */
.grilla-ranking .tabla-grilla-cabecera, .grilla-ranking .tabla-grilla-fila {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 70px 80px 110px 100px 70px 64px 110px;
  gap: 10px;
  align-items: center;
}
.grilla-ranking .derecha { text-align: right; }
.fila-ranking { padding: 10px 20px; }
.nombre-ranking { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nombre-ranking .nombre { font-weight: 600; }
.barra-contribucion {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: #F1F5F9;
  overflow: hidden;
  max-width: 180px;
}
.barra-contribucion > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: #93C5FD;
}
.comision-destacada { font-weight: 700; color: #1D4ED8; }
.fila-totales-equipo {
  padding: 12px 20px;
  background: #F8FAFC;
  border-top: 2px solid var(--borde-marcado);
}


/* ============ CONCILIA-1 D: cuadre de tarjetas en el cierre ============ */
.cuadre-tarjetas {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
}
.cuadre-titulo { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.cuadre-ok { color: #047857; }
.cuadre-alerta { color: #B45309; }
.cuadre-neutro { color: var(--texto-secundario); }
.cuadre-texto { margin: 6px 0 0; font-size: 12.5px; color: var(--texto-secundario); line-height: 1.45; }
.incidencia-registrada {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #F8FAFC;
  font-size: 12.5px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.incidencia-hora { flex: none; color: var(--texto-secundario); font-size: 11.5px; }
.incidencia-texto-guardado { color: #334155; }
.boton-incidencia { margin-top: 10px; width: 100%; }
.incidencia-campo {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
  resize: vertical;
}
.incidencia-campo:focus { outline: none; border-color: var(--borde-marcado); }


/* ============ CONCILIA-1 E: panel de resolucion + scorecard ============ */
.contadores-cola { display: flex; gap: 8px; align-items: center; }
.chip-rojo { background: #FEE2E2; color: #B91C1C; font-weight: 700; }
.chip-neutro { background: #F1F5F9; color: var(--texto-secundario); }
.filtros-cola { flex-wrap: wrap; gap: 10px; }
.filtro-tipo { display: flex; gap: 8px; align-items: center; }
.filtro-tipo select {
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
  background: #fff;
  max-width: 280px;
}
.lista-excepciones { display: flex; flex-direction: column; gap: 8px; }
.fila-excepcion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  flex-wrap: wrap;
}
.fila-excepcion:hover { border-color: var(--borde-marcado); }
.fila-excepcion.fila-roja { border-color: #FECACA; background: #FFF7F7; }
.excepcion-principal { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.excepcion-tipo { font-weight: 600; font-size: 13.5px; }
.excepcion-monto { font-weight: 700; }
.excepcion-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--texto-secundario);
  flex-wrap: wrap;
}
.evidencia-lado-a-lado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.tarjeta-evidencia {
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
}
.evidencia-titulo { font-weight: 700; font-size: 12.5px; margin-bottom: 8px; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 0.04em; }
.evidencia-fila { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
.evidencia-fila > span:first-child { color: var(--texto-secundario); }
.evidencia-monto { font-weight: 700; font-size: 14px; }
.evidencia-vacio { margin: 4px 0; font-size: 13px; color: #B45309; font-weight: 600; }
.evidencia-notas { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.evidencia-detalle { font-size: 12.5px; color: var(--texto-secundario); }
.incidencias-contexto { margin-bottom: 12px; }
.acciones-excepcion { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tarjeta-accion {
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.tarjeta-accion-roja { border-color: #FECACA; }
.accion-titulo { font-weight: 700; font-size: 13.5px; }
.accion-subtitulo { font-weight: 600; font-size: 12px; color: var(--texto-secundario); margin-top: 4px; }
.accion-texto { margin: 0; font-size: 12.5px; color: var(--texto-secundario); line-height: 1.45; }
.campo-nota {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
}
.opcion-candidata {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
}
.opcion-candidata:hover { border-color: var(--borde-marcado); }
.opcion-candidata .tabular { margin-left: auto; font-weight: 600; }
.boton-rojo {
  padding: 8px 14px;
  border: 1px solid #FCA5A5;
  border-radius: 8px;
  background: #FEF2F2;
  color: #B91C1C;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.boton-rojo:hover { background: #FEE2E2; }
.resolucion-final { max-width: 560px; }
.grilla-scorecard .tabla-grilla-cabecera,
.grilla-scorecard .tabla-grilla-fila {
  display: grid;
  grid-template-columns: minmax(200px, 2.4fr) repeat(5, minmax(70px, 1fr));
  gap: 10px;
  align-items: center;
}
.detalle-tipos { display: block; font-size: 11px; color: var(--texto-deshabilitado); margin-top: 2px; }
.rojas-destacadas { color: #B91C1C; font-weight: 700; }
.tendencia-mensual { margin-top: 14px; }
.tendencia-barras {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  padding: 18px 20px 14px;
}
.tendencia-mes { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.tendencia-valor { font-size: 11.5px; color: var(--texto-secundario); }
.tendencia-barra {
  width: 100%;
  max-width: 46px;
  height: 90px;
  border-radius: 6px;
  background: #F1F5F9;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.tendencia-relleno {
  width: 100%;
  background: #93C5FD;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.tendencia-rojas { width: 100%; background: #FCA5A5; }
.tendencia-etiqueta { font-size: 11px; color: var(--texto-deshabilitado); }

/* Mobile (el admin resuelve desde el celular) */
@media (max-width: 720px) {
  .evidencia-lado-a-lado { grid-template-columns: 1fr; }
  .acciones-excepcion { grid-template-columns: 1fr; }
  .grilla-scorecard .tabla-grilla-cabecera,
  .grilla-scorecard .tabla-grilla-fila {
    grid-template-columns: minmax(120px, 2fr) repeat(5, minmax(44px, 1fr));
    gap: 6px;
  }
  .fila-excepcion { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* MICRO-FIX UI — /canales: la tarjeta mide lo que mide su contenido.
   El piso de .main-desplazable .tabla-grilla (420px) está pensado para
   tablas largas y paginadas (recepción, ranking, presentaciones,
   facturación, conciliación), donde ESE es el comportamiento deseado.
   Con 3 canales el contenido mide menos que el piso y el sobrante lo
   absorbía el área de filas (flex: 1), que empujaba el pie al fondo:
   ~127px de blanco entre la última fila y el pie.
   Se corrige SOLO acá, por la clase propia de esta pantalla y sin tocar
   las compartidas. La primera regla va al FINAL del archivo a propósito:
   empata en especificidad (0,2,0) con la regla del piso, así que gana
   por orden. `flex: none` además le saca el crecimiento — si no, en una
   pantalla alta donde la página no alcanza a desbordar, la tarjeta
   volvería a inflarse con el espacio libre del main. El alto lo define
   el contenido: 3 canales miden 3 filas, 6 miden 6, y cuando pasan del
   viewport se desplaza la PÁGINA, que es el principio de
   main-desplazable.

   El overflow de .tabla-grilla-filas NO se toca (hallazgo de la revisión
   adversarial, medido en el navegador): `overflow-y: auto` computa
   `overflow-x: auto` (CSS Overflow: un eje visible junto a otro que no
   lo es pasa a auto), y esa es la ÚNICA forma de alcanzar las dos
   últimas columnas de esta tabla cuando la ventana es angosta — sus
   columnas fijas suman ~700px que no encogen. Apagarlo dejaba el
   interruptor Activo/Inactivo y el lápiz de editar recortados para
   siempre por el overflow:hidden de la tarjeta: a 900px con el lateral
   abierto y en cualquier celular. Ese scroll no es vestigial. */
.main-desplazable .grilla-canales { flex: none; min-height: 0; }
.main-desplazable .grilla-canales .tabla-grilla-filas { flex: none; }

/* ==== IMPRESION-2 — el comprobante impreso (boleta, factura y NC) ====
   El diseño llega con TODO inline; acá vive como clases. Reglas propias
   del papel, a propósito distintas del resto del sistema:
   - Helvetica/Arial y NO Inter: es la tipografía del diseño, elegida
     para el rollo térmico (decisión del dueño, no se cambia).
   - milímetros y no px en lo estructural: el papel es de 80 mm reales y
     el área imprimible de 72 mm; el px acá no significa nada.
   - negro puro (#000) y no los tokens: la térmica quema o no quema, y un
     gris del sistema de diseño sale sucio o directamente no sale.
   El @page NO vive acá sino en la plantilla (patrón documentado en
   turno_resultado.html: @page no se puede scopar por clase de body y
   desde app.css secuestraría la impresión del resto del sistema). */

.comprobante-lienzo { background: var(--fondo); padding: 24px 0; }
.comprobante {
  width: 80mm;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 5mm 4mm 9mm;
  background: #FFFFFF;
  color: #000000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* EL RESETEO QUE EL PAPEL NECESITA (hallazgo de la revisión adversarial,
   medido pixel a pixel): app.css trae reglas de ELEMENTO para table/td/th
   que el resto del sistema usa (border-bottom #E2E8F0 y color slate en
   los th). Sin resetearlas se cuelan al comprobante y, como #E2E8F0 es
   91% blanco, la térmica NO las quema: las líneas del bloque de totales
   y del de pagos desaparecían, cada fila de datos salía con un rayado
   gris que no está en el diseño, y los rótulos DETALLE/TOTAL se
   imprimían lavados.
   Va ANTES de las clases del comprobante porque empata en especificidad
   con ellas (0,1,1) y ahí gana el orden. Y se resetea SOLO borde y
   color: el padding de cada celda es del diseño — aplastarlo cambiaría
   la maqueta (el reseteo obvio, con padding incluido, achicaba el papel
   32mm de puro romper el diseño). */
.comprobante td,
.comprobante th { border-bottom: 0; color: #000000; }

.comprobante-marca { text-align: center; margin-bottom: 3.6mm; }
.comprobante-logo { display: block; width: 26mm; height: auto; margin: 0 auto; }

/* El recuadro fiscal: RUT del emisor, tipo de documento y folio */
.comprobante-recuadro { border: 2px solid #000000; padding: 2mm 2mm 2.2mm; text-align: center; }
.comprobante-recuadro-rut { font-size: 11px; font-weight: 700; letter-spacing: .03em; }
/* line-height apretado porque los nombres largos del SII ocupan dos
   líneas ("BOLETA NO AFECTA O EXENTA ELECTRÓNICA") */
.comprobante-recuadro-tipo {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  line-height: 1.25; margin-top: .6mm;
}
.comprobante-recuadro-linea { border-top: 1px solid #000000; margin: 1.8mm 0 1.4mm; }
.comprobante-recuadro-folio {
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}

.comprobante-emisor { text-align: center; margin-top: 3.2mm; }
.comprobante-emisor-nombre { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.comprobante-emisor-giro { font-size: 10px; line-height: 1.3; margin-top: .8mm; }
.comprobante-domicilio { font-size: 10px; line-height: 1.35; margin-top: 2.4mm; }
.comprobante-rotulo { font-weight: 700; }
.comprobante-corte { border-top: 1px dashed #000000; margin: 2.6mm 0; }

/* Bloques de dos columnas (metadatos, receptor de factura, referencia
   de la NC): rótulo en versalitas a la izquierda, dato a la derecha */
.comprobante-datos { width: 100%; border-collapse: collapse; font-size: 10px; }
.comprobante-datos td { padding: .3mm 0; vertical-align: top; }
.comprobante-datos-rotulo { font-size: 9px; font-weight: 700; letter-spacing: .12em; padding-right: 3mm; }
.comprobante-datos-numero { font-variant-numeric: tabular-nums; }
.comprobante-titulo-bloque {
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  margin: 2.6mm 0 .8mm;
}

/* El detalle: nombre en su propia fila (ancho completo) y debajo el
   cálculo a la izquierda con el total a la derecha — así un nombre largo
   jamás empuja la columna del dinero */
.comprobante-detalle { width: 100%; border-collapse: collapse; margin-top: 3mm; }
.comprobante-detalle th {
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-align: left; padding: 0 0 1.2mm; border-bottom: 1px solid #000000;
}
.comprobante-detalle th.comprobante-columna-monto { text-align: right; }
.comprobante-item-nombre {
  font-size: 12px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.005em; padding: 2.6mm 0 0;
}
.comprobante-detalle tbody tr:first-child .comprobante-item-nombre { padding-top: 2mm; }
.comprobante-item-calculo {
  font-size: 10px; line-height: 1.3; vertical-align: top; padding: .4mm 3mm 0 0;
}
.comprobante-item-total {
  font-size: 12px; font-weight: 700; text-align: right; vertical-align: top;
  white-space: nowrap; font-variant-numeric: tabular-nums; padding: .4mm 0 0;
}
.comprobante-nowrap { white-space: nowrap; }

.comprobante-suma-rotulo { font-size: 10px; letter-spacing: .1em; padding: .3mm 3mm .3mm 0; }
.comprobante-suma-valor {
  font-size: 11px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; padding: .3mm 0;
}
.comprobante-suma-primera .comprobante-suma-rotulo,
.comprobante-suma-primera .comprobante-suma-valor {
  padding-top: 2.6mm; border-top: 1px solid #000000;
}
.comprobante-total-rotulo {
  font-size: 15px; font-weight: 700; letter-spacing: .1em; vertical-align: middle;
  padding: 1.6mm 3mm 1.8mm 0; border-top: 2px solid #000000;
}
.comprobante-total-valor {
  font-size: 27px; font-weight: 700; line-height: 1.05; text-align: right;
  vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums;
  padding: 1.4mm 0 1.8mm; border-top: 2px solid #000000;
}
.comprobante-pago-titulo {
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  padding: 2.6mm 0 .6mm; border-top: 1px dashed #000000;
}
.comprobante-pago-medio { font-size: 11px; padding: 0 3mm 0 0; }
/* padding propio y no el del td global: era la única celda de plata sin
   uno, y heredaba 12px de la derecha — el monto del medio de pago
   quedaba 3mm corrido de la columna donde se alinean TOTAL, NETO, IVA y
   los totales de línea, y cada fila engordaba 5mm de rollo */
.comprobante-pago-monto {
  font-size: 11px; font-weight: 700; text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0;
}

.comprobante-verificacion {
  border-top: 1px dashed #000000; margin-top: 3mm; padding-top: 2.2mm; text-align: center;
}
.comprobante-verificacion-texto { font-size: 10px; }
.comprobante-verificacion-url { font-size: 12px; font-weight: 700; letter-spacing: .02em; margin-top: .6mm; }
.comprobante-leyenda {
  margin-top: 3mm; padding: 1.6mm 2mm; border: 1px solid #000000;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  line-height: 1.3; text-align: center;
}

/* El timbre: 50 mm de ancho — el mínimo del SII para la muestra impresa
   es 2×5 cm, y este ancho NO es decorativo: con menos, el símbolo queda
   bajo el mínimo legal. El alto va libre (sale ~31 mm) porque apretarlo
   a los 20 mm de la maqueta deformaría las barras.
   SIN image-rendering: pixelated (medido en la revisión adversarial): el
   PNG nativo (~890 px) se REDUCE a 50 mm, y forzar vecino-más-cercano en
   una reducción de factor 0,45 cuantiza las barras de 1 y 2 módulos al
   mismo ancho en puntos. Se deja que el driver haga la conversión a
   puntos, que es el mismo criterio del logo. */
/* IMPRESION-3 — el manual de muestras impresas del SII pide conservar
   MARGEN BLANCO alrededor del timbre (la zona tranquila que el lector
   necesita para encuadrar el PDF417) y letra 6 o superior en el pie. Los
   3mm de abajo son los que faltaban: el timbre quedaba pegado a la
   leyenda. Los 9px de la glosa son 6,75 pt (1px CSS = 1/96", 1pt =
   1/72"), o sea sobre el piso normativo — bajarlos rechaza la muestra. */
.comprobante-timbre {
  margin-top: 3mm; margin-bottom: 3mm; text-align: center;
}
.comprobante-timbre-imagen {
  display: block; width: 50mm; height: auto; margin: 0 auto 2mm;
}
.comprobante-timbre-glosa { font-size: 9px; line-height: 1.3; }
.comprobante-timbre-glosa:first-of-type { margin-top: 1.2mm; }

@media print {
  /* El papel es el documento: nada de fondo, sombra ni márgenes de
     pantalla (el @page de la plantilla ya fija 80mm sin margen) */
  .comprobante-lienzo { background: #FFFFFF; padding: 0; }
  .comprobante { box-shadow: none; margin: 0; }
}

/* La representación impresa de la factura en carta vive en su HOJA
   PROPIA: static/css/factura_carta.css, que es la única que carga
   templates/factura_carta.html. Se fue de acá porque la hoja global se
   le metió cuatro veces (th pizarra, tr:last-child, fondos que la
   impresión descarta) — ver la cabecera de esa hoja. */

/* --- UI-FACTURACION: /facturacion en el lienzo de dos columnas -------
   La pantalla venía de otra época: secciones sueltas con .tarjeta-conteo
   —una clase que NO existe en esta hoja—, campos estirados de borde a
   borde y el total flotando al lado de un título. Ahora usa el lenguaje
   que ya hablan el conteo y el POS: lienzo de dos columnas, tarjetas con
   cabecera, tabla-grilla para las filas y el aside con el total y LA
   acción. Todo va scopeado en .pantalla-facturacion para no mover ni un
   pixel de las otras pantallas. */

/* La tarjeta: mismo tratamiento visual que .grilla-conteo (superficie,
   borde, radio grande, sombra) pero SIN overflow oculto, porque los
   desplegables de los buscadores cuelgan de la cabecera y ese recorte
   se los comería. */
.pantalla-facturacion .tarjeta-facturacion {
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}
.pantalla-facturacion .facturacion-columna {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* La lista de líneas absorbe el alto sobrante y es la ÚNICA que
   scrollea: con 20 líneas se mueve la lista, no la página. */
.pantalla-facturacion .facturacion-lineas { flex: 1; min-height: 0; }
.pantalla-facturacion .facturacion-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px;
}
.pantalla-facturacion .facturacion-ayuda {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--texto-deshabilitado);
}
.pantalla-facturacion .facturacion-acciones { display: flex; gap: 8px; margin-top: 6px; }
/* Emitida: sin el panel al lado la tarjeta se iría a lo ancho de la
   pantalla para mostrar cuatro datos */
.pantalla-facturacion .facturacion-emitida { max-width: 560px; }

/* Los buscadores viven en la cabecera de su tarjeta, con ancho propio */
.pantalla-facturacion .facturacion-buscador { position: relative; flex: none; width: 300px; }
.pantalla-facturacion .facturacion-buscador input { height: 32px; padding: 0 11px; font-size: 13px; }
/* El desplegable se estira hacia la izquierda: 300px no alcanzan para el
   nombre de un producto con su precio de mesón al lado */
.pantalla-facturacion .facturacion-buscador .pos-resultados { left: -240px; }
/* La acción de la cabecera se alinea con el buscador: los 46px del botón
   grande le suben 15px a la tarjeta y esos 15px son la cuarta línea */
.pantalla-facturacion .cabecera-tarjeta .boton-secundario { height: 32px; padding: 0 13px; }

/* Receptor en grilla de 12 columnas: RUT angosto, razón social y
   dirección anchas — no cinco campos estirados a todo el ancho. */
.pantalla-facturacion .facturacion-campos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px 12px;
}
.pantalla-facturacion .campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 14px;
}
.pantalla-facturacion .campo > span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--texto-deshabilitado);
}
.pantalla-facturacion .campo input { height: 32px; padding: 0 11px; font-size: 13.5px; }
.pantalla-facturacion .campo-rut { grid-column: span 3; }
.pantalla-facturacion .campo-razon { grid-column: span 9; }
.pantalla-facturacion .campo-giro { grid-column: span 4; }
.pantalla-facturacion .campo-direccion { grid-column: span 5; }
.pantalla-facturacion .campo-comuna { grid-column: span 3; }

/* Líneas: la misma tabla del resto del sistema (tabla-grilla) */
.pantalla-facturacion .grilla-lineas-factura .tabla-grilla-cabecera,
.pantalla-facturacion .grilla-lineas-factura .tabla-grilla-fila {
  grid-template-columns: minmax(0, 1fr) 92px 132px 108px 32px;
}
.pantalla-facturacion .grilla-lineas-factura .tabla-grilla-fila { padding: 5px 20px; }
.pantalla-facturacion .grilla-lineas-factura .tabla-grilla-fila:last-child { border-bottom: none; }
.pantalla-facturacion .grilla-lineas-factura input { height: 32px; padding: 0 10px; font-size: 13.5px; }
.pantalla-facturacion .grilla-lineas-factura input.centrado { text-align: center; }
.pantalla-facturacion .grilla-lineas-factura input.derecha { text-align: right; }
.pantalla-facturacion .celda-subtotal { font-size: 13.5px; font-weight: 600; text-align: right; }
.pantalla-facturacion .boton-quitar { font: inherit; font-size: 13px; }
/* El vacío ocupa lo que necesita y ni un pixel más */
.pantalla-facturacion .facturacion-vacio {
  margin: 0;
  padding: 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--texto-deshabilitado);
}

/* El panel de emisión: angosto, fijo y siempre a la vista */
.pantalla-facturacion .facturacion-panel { width: clamp(318px, 26vw, 384px); }
.pantalla-facturacion .facturacion-medio { margin-top: 18px; }
/* align-self: el .campo es una columna flex y sin esto el select se
   estira a todo el ancho del panel aunque diga width auto */
.pantalla-facturacion .facturacion-medio select {
  width: auto;
  min-width: 176px;
  align-self: flex-start;
}
.pantalla-facturacion .facturacion-error {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: var(--radio);
  background: var(--error-sutil);
  color: #B91C1C;
  font-size: 12.5px;
  line-height: 1.45;
}
/* La acción tiene ancho de botón, jamás barra (UX-1d) */
.pantalla-facturacion .facturacion-emitir { margin-top: 14px; }
/* Por qué no se puede emitir todavía: al lado del botón apagado */
.pantalla-facturacion .facturacion-pendientes {
  margin: 10px 0 0;
  padding-left: 16px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--texto-deshabilitado);
}


/* --- UI-DTE: registro de la facturación B2B --------------------------
   La misma tabla del resto del sistema (tabla-grilla). Las notas de
   crédito van como filas hijas de su factura, con fondo suave: la NC
   suelta no dice nada — importa de cuál factura cuelga. */
.pantalla-registro-b2b .grilla-registro-b2b .tabla-grilla-cabecera,
.pantalla-registro-b2b .grilla-registro-b2b .tabla-grilla-fila {
  grid-template-columns: 210px 100px minmax(0, 1fr) 110px 120px 176px;
}
.pantalla-registro-b2b .fila-nota-credito { background: var(--fondo); }
.pantalla-registro-b2b .fila-nota-credito .celda-folio {
  font-weight: 500;
  color: var(--texto-secundario);
}
.pantalla-registro-b2b .registro-rut {
  display: block;
  font-size: 11.5px;
  color: var(--texto-deshabilitado);
}
/* La glosa del SII ocupa su propia línea: es texto largo y es lo que hay
   que leer para corregir */
.pantalla-registro-b2b .registro-glosa {
  padding: 0 20px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--error);
  border-bottom: 1px solid #F1F5F9;
}
.pantalla-registro-b2b .boton-registro {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radio);
  font-size: 12.5px;
  font-weight: 500;
}

/* --- UI-DTE-2: la acción destructiva del listado ----------------------
   Se llamaba "NC total" y se veía como un recuadro suelto al lado de tres
   enlaces planos (XML, Sobre, Impresa). Ahora es un botón —lenguaje de
   ACCIÓN, distinto de los que solo consultan— y en rojo apagado, que es
   lo que ya usa el resto del ERP para lo que no se deshace. */
.forma-anular { margin: 0; }
.boton-anular {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  color: #B91C1C;
  border-color: #FECACA;
}
.boton-anular:hover {
  background: var(--error-sutil);
  border-color: #FCA5A5;
  color: #991B1B;
}


/* --- UI-DTE-3: la pantalla del Motor DTE, ordenada --------------------
   /dte creció por acumulación —cinco secciones puestas en días
   distintos— y ninguna seguía el lenguaje del resto del ERP. La causa de
   fondo: las "tarjetas" eran .tarjeta-conteo, una clase que se usa en
   cinco plantillas y NUNCA se definió en app.css, así que no pintaba
   nada; todo lo visual salía de estilos inline puestos fila por fila. De
   ahí que los textos no calzaran entre sí — no había columnas, había
   flex-wrap, y cada fila decidía sus anchos por su cuenta.

   Acá no se inventa lenguaje: la pantalla pasa a usar el que ya existe
   —.grilla-conteo para la tarjeta, .cabecera-tarjeta para el título,
   .grilla-nota para la aclaración, .tabla-grilla para la lista— igual
   que /facturacion/registro. Lo único que se agrega es lo que ninguna
   otra pantalla necesitaba: los anchos de columna de estas tres listas y
   que las secciones midan lo que mide su contenido.

   Todo va scopeado a .pantalla-dte para no mover las otras cuatro
   pantallas que siguen usando .tarjeta-conteo. Definirla globalmente
   cambiaría /canales, /reversas y los dos paneles de una sola vez, y esa
   es decisión del dueño, no de este encargo. */

/* LA SECCIÓN. .grilla-conteo trae la tarjeta (fondo, borde, radio,
   sombra) pero está pensada para UNA lista que llena la pantalla:
   flex:1, y .main-desplazable le pone 420px de alto mínimo a toda
   .tabla-grilla. Con cinco secciones en una página que se desplaza, eso
   estira cada una a pantalla completa. Acá cada sección mide lo que mide
   su contenido y quien se desplaza es la página. */
.pantalla-dte .seccion-dte { flex: none; }
.pantalla-dte .main-desplazable .tabla-grilla { flex: none; min-height: 0; }
.pantalla-dte .tabla-grilla-filas { flex: none; overflow: visible; }

/* El título va en <h2> y no en el <strong> que usa .cabecera-tarjeta:
   son cinco secciones, y los encabezados de sección son navegación para
   quien usa lector de pantalla. El tamaño y el peso son los mismos, así
   que a la vista es idéntico. */
.pantalla-dte .cabecera-tarjeta h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pantalla-dte .cabecera-tarjeta form { margin: 0; }
/* La aclaración de una sección son varias líneas de texto, no el rótulo
   corto para el que se pensó .grilla-nota */
.pantalla-dte .grilla-nota { line-height: 1.5; }

/* LA COMPUERTA: el estado en el lenguaje de chips del ERP (verde lo que
   está bien, ámbar lo que pide atención) en vez de un recuadro con
   colores propios, con el tamaño subido porque es LA palanca de la
   pantalla. */
.pantalla-dte .fila-compuerta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
}
.pantalla-dte .chip-compuerta { font-size: 13px; font-weight: 600; padding: 4px 12px; }
.pantalla-dte .fila-compuerta form { margin: 0 0 0 auto; }

/* LAS COLUMNAS, una definición por lista — la convención de
   .grilla-registro-b2b y .grilla-recepciones: el par cabecera+fila con
   el MISMO grid-template-columns, que es lo que hace que calcen.

   UI-DTE-4 — LA PRIMERA COLUMNA MIDE LO MISMO EN LAS TRES LISTAS QUE
   NOMBRAN UN DOCUMENTO (236px): las dos de folios y la de documentos
   emitidos arrancan y terminan en la misma x, así que la pantalla se lee
   como una y no como tres tablas ajenas. La del RCOF no entra en esa
   cuenta: su primera columna es una fecha, no un documento. */
.pantalla-dte .grilla-folios-dte .tabla-grilla-cabecera,
.pantalla-dte .grilla-folios-dte .tabla-grilla-fila {
  /* Las DOS listas de folios enseñan lo mismo —qué documento y qué
     tramo— y comparten esta grilla al pie de la letra. La tercera
     columna son 104px porque ahí va una FECHA en cifras tabulares
     ("01-08-2026"): con 84 no cabía, se partía en dos líneas y estiraba
     la fila entera. Es el mismo ancho que la columna "Día" del RCOF, que
     muestra ese mismo dato. */
  grid-template-columns: 236px 156px 104px minmax(0, 1fr);
}
.pantalla-dte .grilla-rcof .tabla-grilla-cabecera,
.pantalla-dte .grilla-rcof .tabla-grilla-fila {
  grid-template-columns: 104px 52px 62px 116px 186px minmax(0, 1fr);
}
/* La de documentos es la más apretada: siete columnas y hasta cuatro
   controles en la última. La suma TIENE que caber en el ancho útil
   (1366 menos el menú y el padding del main ≈ 1106px), porque la
   tarjeta recorta —overflow: hidden— y lo que no cabe no se desplaza:
   desaparece. Acá suman 904 + 72 de separación + 90 mínimos = 1066.
   Los anchos no son al ojo: "Factura electrónica (33) N° 1052" y
   "31-07-2026" son los textos más largos de sus columnas, y una columna
   corta no los recorta sola — los parte en dos líneas y descuadra la
   fila entera. La última columna se dimensiona por la fila MÁS ANCHA:
   la factura enviada, que lleva los cuatro controles (XML, Sobre,
   Impresa y Anular factura) — con tres cabía y con los cuatro no.
   El receptor lleva 104 de mínimo: es lo que mide "consumidor final",
   el valor más largo de esa columna. */
.pantalla-dte .grilla-documentos-dte .tabla-grilla-cabecera,
.pantalla-dte .grilla-documentos-dte .tabla-grilla-fila {
  grid-template-columns: 236px 92px minmax(112px, 1fr) 96px 88px 88px 276px;
}

/* Las celdas propias de esta pantalla; las demás salen de la familia
   .celda-* que ya existe. */
.pantalla-dte .celda-sub { font-weight: 400; color: var(--texto-secundario); }
/* La fecha y el tramo de folios NO se parten ni se derraman sobre la
   columna de al lado: si algún día no caben, se recortan y el arnés lo
   caza (mide que estas columnas muestren su valor completo). Lo mismo
   vale para toda cifra alineada a la derecha —un monto, un conteo, una
   fecha—: partir un número en dos líneas lo vuelve ilegible y estira la
   fila, que es como se desalineó la tabla de tramos retirados. */
.pantalla-dte .celda-fecha,
.pantalla-dte .tabla-grilla-fila .derecha {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pantalla-dte .celda-track {
  font-size: 12px;
  color: var(--texto-deshabilitado);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El motivo del retiro es texto libre de hasta 200 caracteres: en una
   sola línea, y si no cabe se recorta. Partirlo en dos estira la fila y
   desalinea la tabla entera — el motivo completo queda en el title. */
.pantalla-dte .celda-motivo {
  font-size: 12.5px;
  color: var(--texto-secundario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* nowrap para que el tipo y su folio no se partan, con puntos
   suspensivos de red: sin el overflow, un rótulo más largo se derramaría
   ENCIMA de la columna siguiente en vez de recortarse. */
.pantalla-dte .celda-folio {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La glosa del SII ocupa su propia línea, debajo de su fila: es texto
   largo y es lo que hay que leer para corregir. Mismo tratamiento que en
   /facturacion/registro. */
.pantalla-dte .fila-glosa {
  margin: 0;
  padding: 0 20px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--error);
  border-bottom: 1px solid #F1F5F9;
}

/* Los controles de fila, todos a la misma altura: tres que solo
   consultan y uno que actúa (.boton-anular, que trae su propio rojo). */
.pantalla-dte .celda-acciones { gap: 6px; flex-wrap: wrap; }
.pantalla-dte .celda-acciones form { margin: 0; }
.pantalla-dte .boton-fila,
.pantalla-dte .celda-acciones .boton-secundario {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}