/* ===========================================================================
   POS - Hoja de estilos
   ---------------------------------------------------------------------------
   Criterios de diseño, pensados para una caja registradora táctil y NO para
   una página web común:

   1. TÁCTIL: todo lo que se toca mide al menos 48 px. Un cajero opera con el
      dedo, de afán y a veces con guantes.
   2. CONTRASTE: los mostradores tienen luz fuerte encima. Los grises claros
      de moda no se ven; aquí el texto va oscuro sobre fondo claro.
   3. NÚMEROS TABULARES: los precios se alinean por columna. Con fuente
      proporcional, "1.111" y "9.999" tienen anchos distintos y las columnas
      de plata bailan.
   4. BARATO DE PINTAR: en un Celeron J1900 cada efecto cuesta. Las
      transiciones duran 120-180 ms y solo tocan color, opacidad y transform
      (nunca ancho, alto ni posición, que obligan a recalcular el layout).
      Nada de `backdrop-filter`, que es de lo más caro que hay.
   5. FUENTES DEL SISTEMA: cero descargas, arranque instantáneo y funciona sin
      internet. En Ubuntu cae en Ubuntu/DejaVu, en Windows en Segoe UI.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   TOKENS
   Todo el diseño sale de estas variables. Cambiar el color de acento o el
   redondeo aquí lo cambia en toda la aplicación de forma coherente.
   --------------------------------------------------------------------------- */
:root {
  /* --- Superficies ---
     Los grises llevan un tinte violeta apenas perceptible (1-2 %) para que
     armonicen con el color de acento. Un gris puramente neutro junto a un
     acento saturado se ve sucio; este truco es la diferencia entre una
     interfaz "correcta" y una que se ve cuidada. */
  --fondo:          #f6f5fa;
  --superficie:     #ffffff;
  --superficie-2:   #faf9fc;
  --superficie-3:   #f1eff7;
  --superficie-4:   #e7e4f0;

  --borde:          #e6e3ef;
  --borde-fuerte:   #cdc8dc;

  /* --- Texto --- */
  --texto:          #0d1526;
  --texto-medio:    #4a5568;
  --texto-suave:    #7c8698;

  /* --- Acento ---
     El color se elige desde Ajustes; estos son los valores del tema por
     defecto. Ver el bloque "TEMAS DE COLOR" mas abajo. */
  --primario:       #6d28d9;
  --primario-vivo:  #8b5cf6;

  /* Azul noche de CajaPOS.co. Fijo: no lo cambia el tema de acento. */
  --marca-noche:    #16263F;
  --primario-hover: #5b21b6;
  --primario-suave: #f3eefe;
  --primario-borde: #d6c6fb;

  /* --- Semánticos --- */
  --exito:          #047857;
  --exito-hover:    #036249;
  --exito-suave:    #e9faf3;
  --exito-borde:    #a7e8cd;

  --peligro:        #c2382b;
  --peligro-hover:  #a32e23;
  --peligro-suave:  #fdf1f0;
  --peligro-borde:  #f4c4bf;

  --aviso:          #b45309;
  --aviso-suave:    #fdf7ec;
  --aviso-borde:    #f2d9ae;

  /* --- Sombras en capas: una de contacto y una de difusión --- */
  --sombra-1: 0 1px 2px rgba(13, 21, 38, .05),
              0 1px 1px rgba(13, 21, 38, .04);
  --sombra-2: 0 2px 4px rgba(13, 21, 38, .05),
              0 4px 10px -2px rgba(13, 21, 38, .07);
  --sombra-3: 0 4px 8px rgba(13, 21, 38, .06),
              0 16px 32px -8px rgba(13, 21, 38, .14);
  --sombra-elevada: 0 6px 12px -2px rgba(13, 21, 38, .08),
                    0 20px 40px -8px rgba(13, 21, 38, .16);

  /* --- Colores del salon: saturados a proposito. Se leen a cuatro metros y
     no compiten con el color de acento que elija el negocio. --- */
  --salon-verde: #0B7C45;   /* verde oscuro: blanco encima llega a 4.9:1 */
  --salon-ambar: #E8890C;
  --salon-rojo:  #DC2626;
  --salon-azul:  #1D4ED8;
  --salon-verde-suave: #E8F7EF;
  --salon-ambar-suave: #FEF3E2;
  --salon-rojo-suave:  #FDECEC;
  --salon-azul-suave:  #E9F0FE;

  /* --- Geometría --- */
  --radio-xs: 6px;
  --radio-sm: 8px;
  --radio:    11px;
  --radio-lg: 16px;

  /* --- Movimiento --- */
  --curva: cubic-bezier(.32, .72, .35, 1);
  --rapido: .12s var(--curva);
  --medio:  .18s var(--curva);

  --fuente: system-ui, -apple-system, "Segoe UI", Ubuntu, Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono",
          monospace;
}

/* Tema oscuro: locales nocturnos y con luz baja. */
[data-tema="oscuro"] {
  /* En oscuro los colores del salon suben de luminosidad para no apagarse, y
     los tintes bajan casi a negro para que el texto claro siga legible. */
  --salon-verde: #22C55E;
  --salon-ambar: #F59E0B;
  --salon-rojo:  #F05252;
  --salon-azul:  #60A5FA;
  --salon-verde-suave: #10241A;
  --salon-ambar-suave: #2A1F0C;
  --salon-rojo-suave:  #2C1416;
  --salon-azul-suave:  #131E33;
  --fondo:          #0c0a14;
  --superficie:     #16131f;
  --superficie-2:   #1c1828;
  --superficie-3:   #251f33;
  --superficie-4:   #302943;

  --borde:          #2a2438;
  --borde-fuerte:   #423a55;

  --texto:          #eaeff8;
  --texto-medio:    #a6b2c6;
  --texto-suave:    #78849a;

  --primario:       #a78bfa;
  --primario-vivo:  #c4b5fd;
  --primario-hover: #c4b5fd;
  --primario-suave: #241a3d;
  --primario-borde: #4c3a7a;

  --exito:          #10b981;
  --exito-hover:    #34d399;
  --exito-suave:    #0c2a22;
  --exito-borde:    #1d5c48;

  --peligro:        #f05252;
  --peligro-hover:  #f87171;
  --peligro-suave:  #2a1517;
  --peligro-borde:  #5f2529;

  --aviso:          #f59e0b;
  --aviso-suave:    #2a2010;
  --aviso-borde:    #5c4318;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .30);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, .38);
  --sombra-3: 0 12px 28px rgba(0, 0, 0, .50);
  --sombra-elevada: 0 16px 40px rgba(0, 0, 0, .58);
}

/* ---------------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #raiz { height: 100%; }

body {
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
  overflow: hidden;                 /* la caja no hace scroll: es una app */
  -webkit-font-smoothing: antialiased;
  /* El cajero no debe seleccionar texto por accidente al tocar. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea, select { -webkit-user-select: text; user-select: text; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* Foco visible SOLO al navegar con teclado. Con el dedo estorbaría. */
:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

/* Los importes usan cifras de ancho fijo para alinear las columnas. */
.plata { font-variant-numeric: tabular-nums; letter-spacing: -.012em; }

/* ---------------------------------------------------------------------------
   PANTALLA DE CARGA
   --------------------------------------------------------------------------- */
.cargando {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: var(--fondo);
}
.cargando__marca {
  font-size: 34px; font-weight: 800; letter-spacing: -.01em;
  color: var(--primario);
}
.cargando__texto { color: var(--texto-suave); font-size: 14px; }

/* ===========================================================================
   ESTRUCTURA
   =========================================================================== */
.app { height: 100%; display: flex; }

/* --- Barra lateral -------------------------------------------------------- */
.lateral {
  width: 92px;
  flex-shrink: 0;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 14px 10px;
  gap: 4px;
  z-index: 20;
}

.lateral__marca {
  width: 54px; height: 54px;
  border-radius: var(--radio);
  background: var(--marca-noche);
  display: grid; place-items: center;
  margin-bottom: 14px;
  flex-shrink: 0;
  box-shadow: var(--sombra-2);
}

.nav-boton {
  position: relative;
  width: 100%;
  min-height: 62px;
  border-radius: var(--radio-sm);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  color: var(--texto-suave);
  transition: background var(--rapido), color var(--rapido);
}
.nav-boton:hover { background: var(--superficie-3); color: var(--texto-medio); }
.nav-boton--activo { background: var(--primario-suave); color: var(--primario); }
.nav-boton--activo:hover { background: var(--primario-suave); color: var(--primario); }

/* Barrita en el borde izquierdo del item activo: se lee de un vistazo cuál
   pantalla está abierta, incluso de reojo. */
.nav-boton--activo::before {
  content: "";
  position: absolute; left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 26px;
  border-radius: 0 3px 3px 0;
  background: var(--primario);
}

.nav-boton__texto { font-size: 10.5px; font-weight: 650; letter-spacing: .1px; }

.lateral__espaciador { flex: 1; }

/* --- Zona principal -------------------------------------------------------- */
.principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* --- Barra superior -------------------------------------------------------- */
.barra {
  height: 60px; flex-shrink: 0;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center;
  padding: 0 18px; gap: 12px;
}
.barra__titulo { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.barra__negocio {
  font-size: 12.5px; color: var(--texto-suave);
  padding-left: 14px;
  border-left: 1px solid var(--borde);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px;
}
.barra__espaciador { flex: 1; }

.indicador {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  font-size: 12.5px; font-weight: 600;
  color: var(--texto-medio);
  white-space: nowrap;
  transition: background var(--rapido), border-color var(--rapido);
}
button.indicador:hover { background: var(--superficie-3); }

.indicador__punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--texto-suave); flex-shrink: 0;
}
.indicador--ok    { border-color: var(--exito-borde); color: var(--exito);
                    background: var(--exito-suave); }
.indicador--ok    .indicador__punto { background: var(--exito); }
.indicador--error { border-color: var(--peligro-borde); color: var(--peligro);
                    background: var(--peligro-suave); }
.indicador--error .indicador__punto { background: var(--peligro); }
.indicador--aviso { border-color: var(--aviso-borde); color: var(--aviso);
                    background: var(--aviso-suave); }
.indicador--aviso .indicador__punto { background: var(--aviso); }

/* Cinta de pruebas: tiene que ser imposible de ignorar. Vender en pruebas
   creyendo que es producción no genera documentos válidos. */
.cinta-pruebas {
  background: repeating-linear-gradient(
    -45deg, #b45309, #b45309 14px, #93420a 14px, #93420a 28px);
  color: #fff;
  text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  padding: 4px;
  flex-shrink: 0;
}

.contenido { flex: 1; overflow: hidden; display: flex; min-height: 0; }

/* ===========================================================================
   PANTALLA DE VENTA
   =========================================================================== */
.venta { flex: 1; display: flex; min-width: 0; }

/* --- Catálogo ------------------------------------------------------------- */
.catalogo {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: 16px; gap: 14px;
}

.buscador { position: relative; flex-shrink: 0; }
.buscador__campo {
  width: 100%;
  height: 58px;
  padding: 0 116px 0 50px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: 16px;
  box-shadow: var(--sombra-1);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.buscador__campo:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 4px var(--primario-suave);
}
.buscador__campo::placeholder { color: var(--texto-suave); }
.buscador__icono {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  color: var(--texto-suave); pointer-events: none;
}
.buscador__ayuda {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--texto-suave);
  pointer-events: none;
}
.tecla-ayuda {
  display: inline-block;
  background: var(--superficie-3);
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  padding: 2px 6px; border-radius: 5px;
  font-family: var(--mono); font-size: 10.5px;
}

.rejilla {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 11px;
  align-content: start;
  padding: 2px 4px 4px 2px;
}

.producto {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 13px;
  min-height: 112px;
  display: flex; flex-direction: column;
  justify-content: space-between; gap: 8px;
  text-align: left;
  box-shadow: var(--sombra-1);
  transition: border-color var(--rapido), box-shadow var(--rapido),
              transform var(--rapido);
}
.producto:hover {
  border-color: var(--primario-borde);
  box-shadow: var(--sombra-2);
  transform: translateY(-1px);
}
.producto:active { transform: scale(.975); box-shadow: var(--sombra-1); }

.producto__nombre {
  font-weight: 620; font-size: 13.5px; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.producto__pie {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 6px;
}
.producto__precio {
  font-size: 17.5px; font-weight: 750; color: var(--texto);
  letter-spacing: -.02em;
}
.producto__stock {
  font-size: 11px; font-weight: 600; color: var(--texto-suave);
  text-align: right; white-space: nowrap;
}
.producto__stock--bajo { color: var(--aviso); }
.producto__stock--agotado { color: var(--peligro); }
.producto--agotado { opacity: .5; }

.etiqueta-iva {
  display: inline-block;
  font-size: 9.5px; font-weight: 750; letter-spacing: .4px;
  padding: 2px 6px; border-radius: 4px;
  background: var(--superficie-3); color: var(--texto-suave);
  margin-top: 5px;
}

/* --- Ticket ---------------------------------------------------------------- */
.ticket {
  width: 412px; flex-shrink: 0;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
  display: flex; flex-direction: column;
}

.ticket__cabecera {
  padding: 15px 18px;
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.ticket__titulo { font-size: 15px; font-weight: 700; }
.ticket__contador {
  font-size: 12px; font-weight: 600; color: var(--texto-suave);
  background: var(--superficie-3);
  padding: 4px 10px; border-radius: 999px;
}

.ticket__lineas { flex: 1; overflow-y: auto; padding: 10px; }

.ticket__vacio {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  color: var(--texto-suave); text-align: center; padding: 24px;
}
.ticket__vacio-icono { color: var(--borde-fuerte); }
.ticket__vacio-texto { font-size: 13.5px; max-width: 240px; line-height: 1.55; }

.linea {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 11px;
  margin-bottom: 8px;
  transition: border-color var(--rapido);
}
.linea:hover { border-color: var(--borde-fuerte); }
.linea__fila1 {
  display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px;
}
.linea__nombre { font-size: 13.5px; font-weight: 620; line-height: 1.3; }
.linea__unitario {
  font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; font-weight: 550;
}
.linea__total {
  font-size: 15.5px; font-weight: 750; white-space: nowrap;
  letter-spacing: -.02em;
}
.linea__fila2 { display: flex; align-items: center; gap: 8px; }

.contador {
  display: flex; align-items: center; gap: 3px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 2px;
}
.contador__boton {
  width: 36px; height: 36px;
  border-radius: var(--radio-xs);
  color: var(--texto-medio);
  display: grid; place-items: center;
  transition: background var(--rapido), color var(--rapido);
}
.contador__boton:hover { background: var(--primario); color: #fff; }
.contador__valor {
  min-width: 46px; height: 36px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.contador__valor--editable {
  background: var(--superficie-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xs);
  text-align: center;
  width: 60px;
}

.linea__espaciador { flex: 1; }

.linea__quitar {
  width: 36px; height: 36px;
  border-radius: var(--radio-xs);
  color: var(--texto-suave);
  display: grid; place-items: center;
  transition: background var(--rapido), color var(--rapido);
}
.linea__quitar:hover { background: var(--peligro-suave); color: var(--peligro); }

/* --- Totales --------------------------------------------------------------- */
.totales {
  border-top: 1px solid var(--borde);
  padding: 14px 18px 12px;
  flex-shrink: 0;
  background: var(--superficie-2);
}
.totales__fila {
  display: flex; justify-content: space-between;
  font-size: 13.5px; color: var(--texto-medio);
  padding: 3px 0;
}
.totales__fila--descuento { color: var(--exito); font-weight: 620; }
.totales__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 12px;
  border-top: 1.5px dashed var(--borde-fuerte);
}
.totales__total-etiqueta {
  font-size: 12px; font-weight: 750; letter-spacing: 1px;
  text-transform: uppercase; color: var(--texto-medio);
}
.totales__total-valor {
  font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}

.acciones { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 9px; }
.acciones__fila { display: flex; gap: 9px; }

/* ===========================================================================
   BOTONES
   =========================================================================== */
.boton {
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--radio-sm);
  font-size: 14.5px; font-weight: 620;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--superficie-3);
  color: var(--texto-medio);
  border: 1px solid transparent;
  transition: background var(--rapido), color var(--rapido),
              border-color var(--rapido), transform var(--rapido),
              box-shadow var(--rapido);
  white-space: nowrap;
}
.boton:hover:not(:disabled) { background: var(--superficie-4); }
.boton:active:not(:disabled) { transform: scale(.98); }
.boton:disabled { opacity: .42; cursor: not-allowed; }

.boton--primario { background: var(--primario); color: #fff; box-shadow: var(--sombra-1); }
.boton--primario:hover:not(:disabled) { background: var(--primario-hover); }

.boton--exito { background: var(--exito); color: #fff; box-shadow: var(--sombra-1); }
.boton--exito:hover:not(:disabled) { background: var(--exito-hover); }

.boton--peligro { background: var(--peligro); color: #fff; }
.boton--peligro:hover:not(:disabled) { background: var(--peligro-hover); }

.boton--contorno {
  background: var(--superficie); border-color: var(--borde-fuerte);
  color: var(--texto-medio);
}
.boton--contorno:hover:not(:disabled) { background: var(--superficie-3); }

.boton--bloque { width: 100%; }
.boton--pequeno { min-height: 36px; padding: 0 11px; font-size: 12.5px; gap: 5px; }

/* El botón de cobrar es el más importante de la pantalla y se diseña como
   tal: alto, verde, con el total impreso encima y sombra propia. */
.boton--cobrar {
  min-height: 76px;
  font-size: 21px; font-weight: 800;
  letter-spacing: -.02em;
  flex-direction: column; gap: 2px;
  box-shadow: 0 2px 4px rgba(4, 120, 87, .18),
              0 8px 20px -6px rgba(4, 120, 87, .38);
}
.boton--cobrar:hover:not(:disabled) {
  box-shadow: 0 4px 8px rgba(4, 120, 87, .22),
              0 12px 28px -6px rgba(4, 120, 87, .45);
}
.boton--cobrar small {
  font-size: 11.5px; font-weight: 600; opacity: .82; letter-spacing: .4px;
}

/* ===========================================================================
   MODALES
   =========================================================================== */
.velo {
  position: fixed; inset: 0;
  /* Sin backdrop-filter: en un J1900 el desenfoque de pantalla completa se
     nota como tirones al abrir cada modal. */
  background: rgba(9, 14, 24, .58);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 100;
  animation: aparecer .14s var(--curva);
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }

.modal {
  background: var(--superficie);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-elevada);
  width: 100%; max-width: 570px;
  max-height: 94vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: subir .18s var(--curva);
}
@keyframes subir {
  from { opacity: 0; transform: translateY(10px) scale(.985) }
  to   { opacity: 1; transform: none }
}
.modal--ancho { max-width: 880px; }
.modal--angosto { max-width: 428px; }

.modal__cabecera {
  padding: 17px 20px;
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal__titulo { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.modal__cerrar {
  width: 38px; height: 38px; border-radius: var(--radio-xs);
  color: var(--texto-suave);
  display: grid; place-items: center;
  transition: background var(--rapido), color var(--rapido);
}
.modal__cerrar:hover { background: var(--superficie-3); color: var(--texto); }

.modal__cuerpo { padding: 20px; overflow-y: auto; flex: 1; }
.modal__pie {
  padding: 15px 20px;
  border-top: 1px solid var(--borde);
  display: flex; gap: 10px; justify-content: flex-end;
  flex-shrink: 0;
  background: var(--superficie-2);
}

/* ===========================================================================
   COBRO
   =========================================================================== */
.cobro__total {
  text-align: center;
  padding: 18px;
  background: var(--primario-suave);
  border: 1px solid var(--primario-borde);
  border-radius: var(--radio);
  margin-bottom: 16px;
}
.cobro__total-etiqueta {
  font-size: 11px; font-weight: 750; letter-spacing: 1.3px;
  color: var(--texto-medio); text-transform: uppercase;
}
.cobro__total-valor {
  font-size: 42px; font-weight: 800; color: var(--primario);
  letter-spacing: -.035em; line-height: 1.12;
}

.medios {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 9px; margin-bottom: 16px;
}
.medio {
  min-height: 56px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14px; font-weight: 620;
  color: var(--texto-medio);
  transition: border-color var(--rapido), background var(--rapido),
              color var(--rapido);
}
.medio:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.medio--activo {
  border-color: var(--primario);
  background: var(--primario-suave);
  color: var(--primario);
}

.campo-monto {
  width: 100%;
  height: 66px;
  text-align: right;
  padding: 0 18px;
  font-size: 32px; font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie-2);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.campo-monto:focus {
  outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 4px var(--primario-suave);
}

.sugerencias { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.sugerencia {
  min-height: 42px; padding: 0 15px;
  border-radius: var(--radio-xs);
  background: var(--superficie-3);
  border: 1px solid transparent;
  font-size: 14px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--texto-medio);
  transition: background var(--rapido), color var(--rapido);
}
.sugerencia:hover { background: var(--primario); color: #fff; }

/* Teclado numérico: el terminal puede no tener teclado físico. */
.teclado {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 13px;
}
.tecla {
  min-height: 58px;
  border-radius: var(--radio-sm);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  font-size: 21px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  display: grid; place-items: center;
  transition: background var(--rapido), color var(--rapido),
              transform var(--rapido), border-color var(--rapido);
}
.tecla:hover:not(:disabled) {
  background: var(--superficie-3); border-color: var(--borde-fuerte);
}
.tecla:active:not(:disabled) {
  transform: scale(.94); background: var(--primario);
  color: #fff; border-color: var(--primario);
}
.tecla:disabled { opacity: .4; cursor: not-allowed; }
.tecla--accion { background: var(--superficie-3); }

.cambio {
  margin-top: 15px; padding: 15px 18px;
  border-radius: var(--radio);
  background: var(--exito-suave);
  border: 1px solid var(--exito-borde);
  display: flex; justify-content: space-between; align-items: center;
}
.cambio__etiqueta {
  font-size: 11.5px; font-weight: 750; color: var(--exito);
  letter-spacing: 1px; text-transform: uppercase;
}
.cambio__valor {
  font-size: 29px; font-weight: 800; color: var(--exito); letter-spacing: -.03em;
}
.cambio--falta { background: var(--peligro-suave); border-color: var(--peligro-borde); }
.cambio--falta .cambio__etiqueta,
.cambio--falta .cambio__valor { color: var(--peligro); }

/* ===========================================================================
   FORMULARIOS
   =========================================================================== */
.campo { margin-bottom: 15px; }
.campo__etiqueta {
  display: block;
  font-size: 12.5px; font-weight: 650;
  color: var(--texto-medio);
  margin-bottom: 6px;
}
.campo__control {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  font-size: 15px;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.campo__control:focus {
  outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-suave);
}
.campo__control:disabled { background: var(--superficie-3); opacity: .7; }
.campo__control--numero { text-align: right; font-variant-numeric: tabular-nums; }
select.campo__control { cursor: pointer; }
.campo__ayuda {
  font-size: 11.5px; color: var(--texto-suave);
  margin-top: 5px; line-height: 1.45;
}

.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fila-campos--3 { grid-template-columns: 1fr 1fr 1fr; }

.interruptor {
  display: flex; align-items: flex-start; gap: 11px;
  min-height: 48px; padding: 6px 0;
}
.interruptor input {
  width: 20px; height: 20px; margin-top: 2px;
  cursor: pointer; accent-color: var(--primario); flex-shrink: 0;
}
.interruptor label { font-size: 14px; cursor: pointer; line-height: 1.45; }

/* ===========================================================================
   TABLAS
   =========================================================================== */
.tabla-caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-1);
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.tabla-desplaza { overflow: auto; flex: 1; }

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  position: sticky; top: 0; z-index: 2;
  background: var(--superficie-2);
  text-align: left;
  padding: 12px 14px;
  font-size: 11px; font-weight: 750;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.tabla td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr { transition: background var(--rapido); }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla .der { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .cen { text-align: center; }
.tabla__acciones { display: flex; gap: 6px; justify-content: flex-end; }

.pildora {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: var(--superficie-3); color: var(--texto-medio);
}
.pildora--ok      { background: var(--exito-suave);   color: var(--exito); }
.pildora--aviso   { background: var(--aviso-suave);   color: var(--aviso); }
.pildora--peligro { background: var(--peligro-suave); color: var(--peligro); }

/* ===========================================================================
   PANTALLAS SECUNDARIAS
   =========================================================================== */
.pantalla {
  flex: 1; display: flex; flex-direction: column;
  padding: 18px; gap: 14px; min-width: 0; overflow: hidden;
}
.pantalla__cabecera {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap; flex-shrink: 0;
}
.pantalla__titulo { font-size: 21px; font-weight: 750; letter-spacing: -.02em; }
.pantalla__espaciador { flex: 1; }
.pantalla__cuerpo { flex: 1; overflow: auto; min-height: 0; }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 13px;
}
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  box-shadow: var(--sombra-1);
}
.tarjeta__etiqueta {
  font-size: 11px; font-weight: 750; letter-spacing: .6px;
  text-transform: uppercase; color: var(--texto-suave);
  margin-bottom: 7px;
}
.tarjeta__valor {
  font-size: 27px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.15;
}
.tarjeta__detalle { font-size: 12.5px; color: var(--texto-suave); margin-top: 4px; }
.tarjeta--acento .tarjeta__valor { color: var(--primario); }
.tarjeta--exito  .tarjeta__valor { color: var(--exito); }
.tarjeta--peligro { border-color: var(--peligro-borde);
                    background: var(--peligro-suave); }
.tarjeta--peligro .tarjeta__valor { color: var(--peligro); }
.tarjeta--aviso  .tarjeta__valor { color: var(--aviso); }

.seccion { margin-bottom: 22px; }
.seccion__titulo {
  font-size: 12px; font-weight: 750;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-suave);
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borde);
}

.vacio {
  padding: 48px 20px; text-align: center; color: var(--texto-suave);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.vacio__icono { color: var(--borde-fuerte); margin-bottom: 6px; }
.vacio__titulo { font-weight: 700; font-size: 15.5px; color: var(--texto-medio); }
.vacio__texto { font-size: 13.5px; max-width: 400px; line-height: 1.55; }

/* Vista previa de tirilla: monoespaciada para respetar la alineación por
   columnas que calculó el backend. */
.tirilla-previa {
  font-family: var(--mono);
  font-size: 12px; line-height: 1.4;
  white-space: pre;
  background: #fff; color: #16181d;
  padding: 18px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  overflow-x: auto;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06);
}

/* ===========================================================================
   AVISOS FLOTANTES
   =========================================================================== */
.avisos {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column-reverse; gap: 10px;
  z-index: 200; max-width: 410px;
}
.aviso {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--texto-suave);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-3);
  padding: 14px 15px;
  display: flex; align-items: flex-start; gap: 11px;
  animation: entrar .18s var(--curva);
}
@keyframes entrar {
  from { opacity: 0; transform: translateX(20px) }
  to   { opacity: 1; transform: none }
}
.aviso--ok     { border-left-color: var(--exito); }
.aviso--error  { border-left-color: var(--peligro); }
.aviso--alerta { border-left-color: var(--aviso); }
.aviso__icono { flex-shrink: 0; margin-top: 1px; }
.aviso--ok     .aviso__icono { color: var(--exito); }
.aviso--error  .aviso__icono { color: var(--peligro); }
.aviso--alerta .aviso__icono { color: var(--aviso); }
.aviso--info   .aviso__icono { color: var(--texto-suave); }
.aviso__texto { font-size: 13.5px; line-height: 1.5; flex: 1; }
.aviso__titulo { font-weight: 700; margin-bottom: 2px; }
.aviso__cerrar {
  color: var(--texto-suave); padding: 2px; border-radius: 4px;
  display: grid; place-items: center;
}
.aviso__cerrar:hover { background: var(--superficie-3); color: var(--texto); }

/* ===========================================================================
   PANTALLA DE ACCESO
   ---------------------------------------------------------------------------
   Ocupa la pantalla completa: mientras nadie se identifique no debe verse ni
   un dato del negocio detrás. Es también la pantalla que queda visible cuando
   la caja está sola.
   =========================================================================== */
.acceso {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--fondo);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -5%,
                    var(--primario-suave), transparent 70%);
  overflow-y: auto;
}

.acceso__caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-elevada);
  padding: 34px;
  width: 100%; max-width: 470px;
  text-align: center;
  position: relative;
  animation: subir .22s var(--curva);
}

.acceso__marca {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: var(--radio);
  background: var(--marca-noche);
  display: grid; place-items: center;
  box-shadow: var(--sombra-2);
}
.acceso__negocio {
  font-size: 13.5px; font-weight: 620; color: var(--texto-medio);
  margin-bottom: 4px;
}
.acceso__titulo {
  font-size: 19px; font-weight: 700; letter-spacing: -.015em;
  margin: 18px 0 20px;
}
.acceso__nombre { font-size: 21px; font-weight: 750; margin: 14px 0 2px; }

.acceso__volver {
  position: absolute; top: 15px; left: 15px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 620;
  color: var(--texto-suave);
  padding: 8px 11px; border-radius: var(--radio-xs);
  transition: background var(--rapido), color var(--rapido);
}
.acceso__volver:hover { background: var(--superficie-3); color: var(--texto); }

.acceso__cargando { color: var(--texto-suave); font-size: 14px; padding: 20px; }

.acceso__error {
  background: var(--peligro-suave);
  border: 1px solid var(--peligro-borde);
  color: var(--peligro);
  border-radius: var(--radio-sm);
  padding: 12px 14px;
  font-size: 13.5px; font-weight: 620;
  margin: 15px 0;
  line-height: 1.45;
  display: flex; align-items: flex-start; gap: 9px;
  text-align: left;
}

.acceso__aviso {
  background: var(--aviso-suave);
  border: 1px solid var(--aviso-borde);
  color: var(--aviso);
  border-radius: var(--radio-sm);
  padding: 13px 15px;
  font-size: 13px; line-height: 1.6;
  margin-bottom: 18px;
  text-align: left;
}
.acceso__aviso code {
  font-family: var(--mono);
  background: var(--superficie);
  padding: 1px 5px; border-radius: 4px; font-size: 12px;
}

.acceso__formulario { text-align: left; margin-top: 18px; }

/* --- Rejilla de cajeros ---------------------------------------------------- */
.acceso__cajeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 11px;
}

.tarjeta-cajero {
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  padding: 17px 11px;
  min-height: 128px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  transition: border-color var(--rapido), transform var(--rapido),
              background var(--rapido), box-shadow var(--rapido);
}
.tarjeta-cajero:hover:not(:disabled) {
  border-color: var(--primario);
  background: var(--superficie);
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}
.tarjeta-cajero:active:not(:disabled) { transform: scale(.97); }
.tarjeta-cajero:disabled { opacity: .45; cursor: not-allowed; }

.tarjeta-cajero__nombre {
  font-size: 13px; font-weight: 650; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-cajero__estado {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--peligro);
}

.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 750; font-size: 16px;
  letter-spacing: .5px;
  flex-shrink: 0;
  box-shadow: var(--sombra-1);
}
.avatar--grande { width: 76px; height: 76px; font-size: 26px; margin: 0 auto; }
.avatar--chico { width: 30px; height: 30px; font-size: 11px; }

/* --- Puntos del PIN -------------------------------------------------------- */
/* Puntos y no dígitos: en un mostrador siempre hay alguien mirando por encima
   del hombro. */
.puntos-pin { display: flex; justify-content: center; gap: 15px; margin: 24px 0; }
.punto {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--borde-fuerte);
  background: transparent;
  transition: background var(--rapido), border-color var(--rapido),
              transform var(--rapido);
}
.punto--lleno {
  background: var(--primario); border-color: var(--primario); transform: scale(1.18);
}
.puntos-pin--error .punto { border-color: var(--peligro); }
.puntos-pin--error .punto--lleno { background: var(--peligro); }

.teclado--acceso { max-width: 300px; margin: 6px auto 0; }
.teclado--acceso .tecla { min-height: 64px; font-size: 23px; }

/* ===========================================================================
   CAJA Y TURNOS
   =========================================================================== */
.caja-cerrada {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 40px; text-align: center;
}
.caja-cerrada__icono { color: var(--borde-fuerte); }
.caja-cerrada__titulo { font-size: 23px; font-weight: 750; letter-spacing: -.02em; }
.caja-cerrada__texto {
  font-size: 14.5px; color: var(--texto-medio);
  max-width: 430px; line-height: 1.62;
}

.arqueo {
  margin: 4px 0 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  overflow: hidden;
}
.arqueo__fila {
  display: flex; justify-content: space-between;
  padding: 11px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}
.arqueo__fila:last-child { border-bottom: none; }
.arqueo__fila--total { background: var(--superficie-3); font-weight: 750; font-size: 15px; }
.arqueo__etiqueta { color: var(--texto-medio); }
.arqueo__fila--total .arqueo__etiqueta { color: var(--texto); }

.diferencia {
  padding: 17px;
  border-radius: var(--radio);
  text-align: center;
  margin-top: 15px;
}
.diferencia__etiqueta {
  font-size: 11.5px; font-weight: 750; letter-spacing: 1.1px; text-transform: uppercase;
}
.diferencia__valor {
  font-size: 31px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.2;
}
.diferencia--cuadrada { background: var(--exito-suave); border: 1px solid var(--exito-borde); }
.diferencia--cuadrada .diferencia__etiqueta,
.diferencia--cuadrada .diferencia__valor { color: var(--exito); }
.diferencia--faltante { background: var(--peligro-suave); border: 1px solid var(--peligro-borde); }
.diferencia--faltante .diferencia__etiqueta,
.diferencia--faltante .diferencia__valor { color: var(--peligro); }
.diferencia--sobrante { background: var(--aviso-suave); border: 1px solid var(--aviso-borde); }
.diferencia--sobrante .diferencia__etiqueta,
.diferencia--sobrante .diferencia__valor { color: var(--aviso); }

.pin-generado {
  background: var(--primario-suave);
  border: 2px dashed var(--primario-borde);
  border-radius: var(--radio);
  padding: 22px;
  text-align: center;
  margin: 15px 0;
}
.pin-generado__valor {
  font-size: 42px; font-weight: 800;
  letter-spacing: 12px; text-indent: 12px;
  color: var(--primario);
  font-variant-numeric: tabular-nums;
  margin: 10px 0;
}

.indicador--cajero { padding-left: 8px; }


/* ===========================================================================
   TEMAS DE COLOR
   ---------------------------------------------------------------------------
   El color de acento se elige desde Ajustes y se guarda en la base de datos,
   no en el navegador: así todos los terminales del negocio se ven igual y la
   elección sobrevive a un borrado de datos del navegador.

   Cada tema redefine SOLO las cinco variables del acento. Todo lo demás
   (botones, indicadores, gráficos, la marca de la barra lateral) las hereda,
   así que un tema nuevo son cinco líneas y no un rediseño.
   =========================================================================== */
[data-color="azul"] {
  --primario:       #1d4ed8;
  --primario-vivo:  #3b82f6;
  --primario-hover: #1e40af;
  --primario-suave: #eaf1fe;
  --primario-borde: #bfd6fb;
}
[data-color="esmeralda"] {
  --primario:       #047857;
  --primario-vivo:  #10b981;
  --primario-hover: #065f46;
  --primario-suave: #e7faf2;
  --primario-borde: #a7e8cd;
}
[data-color="ambar"] {
  --primario:       #b45309;
  --primario-vivo:  #f59e0b;
  --primario-hover: #92400e;
  --primario-suave: #fdf5e7;
  --primario-borde: #f5d9a3;
}
[data-color="carmin"] {
  --primario:       #be123c;
  --primario-vivo:  #f43f5e;
  --primario-hover: #9f1239;
  --primario-suave: #fdeef2;
  --primario-borde: #f8c4d1;
}
[data-color="grafito"] {
  --primario:       #334155;
  --primario-vivo:  #64748b;
  --primario-hover: #1e293b;
  --primario-suave: #eef1f5;
  --primario-borde: #cbd5e1;
}

/* En tema oscuro los acentos se aclaran: un violeta oscuro sobre fondo oscuro
   no tiene contraste suficiente para leerse. */
[data-tema="oscuro"][data-color="azul"] {
  --primario: #60a5fa; --primario-vivo: #93c5fd; --primario-hover: #93c5fd;
  --primario-suave: #14243f; --primario-borde: #2c4b7c;
}
[data-tema="oscuro"][data-color="esmeralda"] {
  --primario: #34d399; --primario-vivo: #6ee7b7; --primario-hover: #6ee7b7;
  --primario-suave: #0d2b23; --primario-borde: #1d5c48;
}
[data-tema="oscuro"][data-color="ambar"] {
  --primario: #fbbf24; --primario-vivo: #fcd34d; --primario-hover: #fcd34d;
  --primario-suave: #2e2410; --primario-borde: #5f4a19;
}
[data-tema="oscuro"][data-color="carmin"] {
  --primario: #fb7185; --primario-vivo: #fda4af; --primario-hover: #fda4af;
  --primario-suave: #2f151c; --primario-borde: #6b2839;
}
[data-tema="oscuro"][data-color="grafito"] {
  --primario: #94a3b8; --primario-vivo: #cbd5e1; --primario-hover: #cbd5e1;
  --primario-suave: #1e2530; --primario-borde: #3c4756;
}

/* Muestras de color en Ajustes */
.muestras-color { display: flex; flex-wrap: wrap; gap: 10px; }
.muestra-color {
  width: 62px; height: 62px;
  border-radius: var(--radio);
  border: 3px solid transparent;
  display: grid; place-items: center;
  transition: transform var(--rapido), border-color var(--rapido);
  position: relative;
}
.muestra-color:hover { transform: scale(1.06); }
.muestra-color--activa { border-color: var(--texto); }
.muestra-color__punto {
  width: 100%; height: 100%;
  border-radius: 7px;
}
.muestra-color__nombre {
  font-size: 10.5px; font-weight: 650; color: var(--texto-suave);
  text-align: center; margin-top: 5px;
}

/* ===========================================================================
   IMÁGENES DE PRODUCTO
   =========================================================================== */

/* Con imagen, la tarjeta cambia de forma: la foto arriba y el texto abajo.
   Reconocer un producto por su foto es mucho más rápido que leer su nombre,
   que es justo lo que se necesita en hora pico. */
.producto--con-imagen { padding: 0; overflow: hidden; min-height: 176px; }

.producto__imagen {
  width: 100%;
  height: 104px;
  object-fit: cover;               /* recorta en vez de deformar el producto */
  background: var(--superficie-3);
  display: block;
  flex-shrink: 0;
}
.producto--con-imagen .producto__cuerpo {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column;
  justify-content: space-between; gap: 7px; flex: 1;
}

/* Franja de color de la categoría en el borde superior de la tarjeta. Es una
   pista visual que se lee de reojo, sin ocupar espacio de texto. */
.producto__franja {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radio) var(--radio) 0 0;
}
.producto--con-imagen .producto__franja { border-radius: 0; z-index: 1; }

/* Marcador cuando el producto no tiene foto */
.producto__sin-imagen {
  width: 100%; height: 104px;
  background: var(--superficie-3);
  display: grid; place-items: center;
  color: var(--borde-fuerte);
  flex-shrink: 0;
}

/* Miniatura en tablas y en el ticket */
.miniatura {
  width: 42px; height: 42px;
  border-radius: var(--radio-xs);
  object-fit: cover;
  background: var(--superficie-3);
  flex-shrink: 0;
}
.miniatura--chica { width: 34px; height: 34px; }
.miniatura--vacia { display: grid; place-items: center; color: var(--borde-fuerte); }

/* Zona de carga de imagen en el formulario de producto */
.carga-imagen {
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.carga-imagen:hover { border-color: var(--primario); background: var(--primario-suave); }
.carga-imagen--con-imagen { padding: 12px; border-style: solid; }
.carga-imagen__previa {
  width: 128px; height: 128px;
  object-fit: cover;
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-1);
}
.carga-imagen__texto { font-size: 13px; color: var(--texto-suave); line-height: 1.5; }

/* ===========================================================================
   CATEGORÍAS
   =========================================================================== */
.filtro-categorias {
  display: flex; gap: 7px;
  overflow-x: auto;
  padding-bottom: 3px;
  flex-shrink: 0;
  /* La barra de desplazamiento horizontal se oculta: en táctil se arrastra */
  scrollbar-width: none;
}
.filtro-categorias::-webkit-scrollbar { display: none; }

.chip-categoria {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 14px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  font-size: 13.5px; font-weight: 620;
  color: var(--texto-medio);
  white-space: nowrap; flex-shrink: 0;
  transition: border-color var(--rapido), background var(--rapido),
              color var(--rapido);
}
.chip-categoria:hover { border-color: var(--borde-fuerte); }
.chip-categoria--activo {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
}
.chip-categoria__punto {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.chip-categoria__cuenta {
  font-size: 11px; font-weight: 700;
  background: var(--superficie-3);
  padding: 1px 6px; border-radius: 999px;
  color: var(--texto-suave);
}
.chip-categoria--activo .chip-categoria__cuenta {
  background: rgba(255, 255, 255, .22); color: #fff;
}

.etiqueta-categoria {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650;
  color: var(--texto-suave);
}
.etiqueta-categoria__punto {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}

/* ===========================================================================
   TICKETS EN ESPERA
   =========================================================================== */
.espera-lista { display: flex; flex-direction: column; gap: 9px; }

.espera-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--rapido), background var(--rapido);
  text-align: left; width: 100%;
}
.espera-item:hover { border-color: var(--primario); background: var(--superficie); }
.espera-item__datos { flex: 1; min-width: 0; }
.espera-item__nombre { font-size: 15px; font-weight: 700; }
.espera-item__detalle { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.espera-item__total {
  font-size: 17px; font-weight: 750; white-space: nowrap;
  letter-spacing: -.02em;
}
.espera-item__quitar {
  width: 38px; height: 38px; border-radius: var(--radio-xs);
  color: var(--texto-suave);
  display: grid; place-items: center;
  transition: background var(--rapido), color var(--rapido);
  flex-shrink: 0;
}
.espera-item__quitar:hover { background: var(--peligro-suave); color: var(--peligro); }

/* Contador de tickets en espera, en el botón de la pantalla de venta */
.insignia {
  position: absolute; top: -6px; right: -6px;
  min-width: 21px; height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--peligro);
  color: #fff;
  font-size: 11.5px; font-weight: 750;
  display: grid; place-items: center;
  border: 2px solid var(--superficie);
}
.con-insignia { position: relative; }

/* ===========================================================================
   MOVIMIENTOS DE CAJA
   =========================================================================== */
.movimiento {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
}
.movimiento:last-child { border-bottom: none; }
.movimiento__icono {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
}
.movimiento__icono--entrada { background: var(--exito-suave); color: var(--exito); }
.movimiento__icono--salida  { background: var(--peligro-suave); color: var(--peligro); }
.movimiento__datos { flex: 1; min-width: 0; }
.movimiento__motivo { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.movimiento__meta { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.movimiento__monto {
  font-size: 15px; font-weight: 750; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.movimiento__monto--entrada { color: var(--exito); }
.movimiento__monto--salida  { color: var(--peligro); }

/* ===========================================================================
   GRÁFICOS DE INFORMES
   ---------------------------------------------------------------------------
   Barras hechas con divs y CSS, sin librería de gráficos. Una librería como
   Chart.js son ~200 KB y un canvas que repintar; para barras horizontales y
   una columna por hora, el CSS basta y no cuesta nada en el J1900.
   =========================================================================== */
.barras { display: flex; flex-direction: column; gap: 9px; }

.barra-fila { display: flex; align-items: center; gap: 12px; }
.barra-fila__etiqueta {
  width: 168px; flex-shrink: 0;
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-fila__pista {
  flex: 1;
  height: 26px;
  background: var(--superficie-3);
  border-radius: var(--radio-xs);
  overflow: hidden;
  position: relative;
}
.barra-fila__relleno {
  height: 100%;
  border-radius: var(--radio-xs);
  background: var(--primario);
  transition: width var(--medio);
  min-width: 3px;
}
.barra-fila__valor {
  width: 108px; flex-shrink: 0; text-align: right;
  font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.barra-fila__extra {
  width: 74px; flex-shrink: 0; text-align: right;
  font-size: 12px; color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Gráfico de columnas por hora */
.columnas {
  display: flex; align-items: flex-end; gap: 3px;
  height: 168px;
  padding: 12px 0 0;
}
.columna {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  height: 100%; gap: 5px;
  position: relative;
}
.columna__barra {
  width: 100%;
  background: var(--primario);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: background var(--rapido);
}
.columna:hover .columna__barra { background: var(--primario-vivo); }
.columna--pico .columna__barra { background: var(--exito); }
.columna__hora {
  font-size: 9.5px; color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.columna__valor {
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%);
  background: var(--texto); color: var(--superficie);
  font-size: 11px; font-weight: 650;
  padding: 3px 7px; border-radius: 5px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--rapido);
}
.columna:hover .columna__valor { opacity: 1; }

/* Pestañas dentro de una pantalla */
.pestanias {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanias::-webkit-scrollbar { display: none; }
.pestania {
  padding: 11px 16px;
  font-size: 14px; font-weight: 620;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--rapido), border-color var(--rapido);
  display: inline-flex; align-items: center; gap: 7px;
}
.pestania:hover { color: var(--texto-medio); }
.pestania--activa { color: var(--primario); border-bottom-color: var(--primario); }

/* Rango de fechas con atajos */
.atajos-fecha { display: flex; gap: 6px; flex-wrap: wrap; }
.atajo-fecha {
  height: 36px; padding: 0 12px;
  border-radius: var(--radio-xs);
  background: var(--superficie-3);
  font-size: 13px; font-weight: 620;
  color: var(--texto-medio);
  transition: background var(--rapido), color var(--rapido);
}
.atajo-fecha:hover { background: var(--superficie-4); }
.atajo-fecha--activo { background: var(--primario); color: #fff; }

/* ===========================================================================
   PANTALLAS PEQUEÑAS
   Muchos terminales POS son de 1024x768.
   =========================================================================== */
@media (max-width: 1200px) {
  .ticket { width: 350px; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .totales__total-valor { font-size: 27px; }
  .barra__negocio { max-width: 150px; }
}

@media (max-width: 920px) {
  .lateral { width: 70px; }
  .nav-boton__texto { display: none; }
  .nav-boton { min-height: 54px; }
  .ticket { width: 306px; }
  .barra__negocio { display: none; }
  .boton--cobrar { min-height: 66px; font-size: 18px; }
}

/* --- Barras de desplazamiento discretas ------------------------------------ */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: 6px;
  border: 3.5px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--texto-suave); background-clip: content-box;
}

/* ===========================================================================
   ACCESO POR HUELLA
   =========================================================================== */

/* Separador «o» entre el PIN y la huella */
.acceso__separador {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 16px;
  color: var(--texto-suave);
  font-size: 12.5px; font-weight: 600;
}
.acceso__separador::before,
.acceso__separador::after {
  content: ""; flex: 1; height: 1px; background: var(--borde);
}

.boton-huella {
  width: 100%;
  min-height: 96px;
  border-radius: var(--radio);
  border: 2px dashed var(--primario-borde);
  background: var(--primario-suave);
  color: var(--primario);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 650;
  transition: border-color var(--rapido), background var(--rapido),
              transform var(--rapido);
}
.boton-huella:hover:not(:disabled) {
  border-color: var(--primario);
  border-style: solid;
}
.boton-huella:active:not(:disabled) { transform: scale(.98); }

/* Mientras espera el dedo, el icono late despacio: comunica «estoy
   esperando» sin necesidad de leer, que es lo que hace falta cuando uno tiene
   el dedo sobre el lector mirando el aparato y no la pantalla. */
.boton-huella:disabled {
  cursor: wait; opacity: 1;
  border-style: solid; border-color: var(--primario);
}
.boton-huella:disabled svg { animation: latido 1.4s ease-in-out infinite; }

@keyframes latido {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.08); }
}

/* Lista de dedos registrados de un cajero */
.dedo {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
}
.dedo:last-child { border-bottom: none; }
.dedo__icono {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primario-suave); color: var(--primario);
  display: grid; place-items: center; flex-shrink: 0;
}
.dedo__datos { flex: 1; min-width: 0; }
.dedo__nombre { font-size: 14px; font-weight: 650; }
.dedo__meta { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }


/* ===========================================================================
   MARCA CajaPOS.co
   =========================================================================== */

.marca-pos { color: var(--primario-vivo); }

/* El ".co" no compite con el nombre: mismo peso, la mitad de presencia. */
.marca-co {
  color: var(--primario-vivo);
  opacity: .62;
  font-size: .82em;
  letter-spacing: 0;
}

/* ===========================================================================
   EL SALON (modo restaurante / bar)

   El color dice QUE NECESITA ACCION, no si hay alguien sentado: en un salon
   lleno "ocupada" no informa nada. Cada tarjeta lleva una franja de color
   SOLIDA arriba -lo unico que de verdad se lee a cuatro metros- y el cuerpo
   tenido del mismo tono.

     verde  libre - ambar en cocina - rojo demorada - azul servida
   =========================================================================== */

.mesas {
  height: 100%; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.mesas__pie { flex-shrink: 0; margin-top: auto; padding-top: 4px; }

/* --- Resumen del salon --- */
.salon-resumen {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
  flex-shrink: 0;
}
.salon-resumen__espaciador { flex: 1; min-width: 0; }

.salon-contador {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 11px;
  color: var(--sobre, #fff); font-weight: 700;
}
.salon-contador--libre     { --sobre: #fff; }
.salon-contador--esperando { --sobre: #3A2100; }
.salon-contador--demorada  { --sobre: #fff; }
.salon-contador--servida   { --sobre: #fff; }
[data-tema="oscuro"] .salon-contador { --sobre: #10121A; }
.salon-contador__n { font-size: 21px; font-weight: 850; line-height: 1; }
.salon-contador__texto { font-size: 12.5px; opacity: .92; }
.salon-contador--libre     { background: var(--salon-verde); }
.salon-contador--esperando { background: var(--salon-ambar); }
.salon-contador--demorada  { background: var(--salon-rojo); }
.salon-contador--servida   { background: var(--salon-azul); }

.salon-kpi {
  display: flex; flex-direction: column; justify-content: center;
  padding: 7px 15px; border-radius: 11px;
  background: var(--superficie); border: 1px solid var(--borde);
}
.salon-kpi__etiqueta {
  font-size: 10.5px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-suave);
}
.salon-kpi__valor { font-size: 19px; font-weight: 800; line-height: 1.15; }
.salon-kpi__valor--mal { color: var(--salon-rojo); }
.salon-kpi__nota { font-size: 11px; color: var(--texto-suave); }

/* --- Plano --- */
.salon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 13px; align-content: start;
}

.mesa {
  --color: var(--salon-verde);
  --tinte: var(--superficie);
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: var(--tinte);
  border: 1.5px solid var(--borde);
  transition: box-shadow .12s ease, transform .06s ease, border-color .12s ease;
}
/* `--sobre` es el color del texto ENCIMA de la franja. El ambar es
   demasiado luminoso para llevar texto blanco (queda en 2.6:1, ilegible a
   tres metros que es justo la distancia a la que hay que leerlo), asi que
   lleva tinta oscura. Los demas si contrastan con blanco. */
.mesa--libre     { --color: var(--salon-verde); --tinte: var(--superficie);
                   --sobre: #fff; }
.mesa--esperando { --color: var(--salon-ambar); --tinte: var(--salon-ambar-suave);
                   --sobre: #3A2100; }
.mesa--demorada  { --color: var(--salon-rojo);  --tinte: var(--salon-rojo-suave);
                   --sobre: #fff; }
.mesa--servida   { --color: var(--salon-azul);  --tinte: var(--salon-azul-suave);
                   --sobre: #fff; }

/* En tema oscuro los colores del salon suben de luminosidad para no
   apagarse, y ahi el blanco deja de contrastar: la tinta pasa a oscura en
   TODOS los estados. */
[data-tema="oscuro"] .mesa { --sobre: #10121A; }
.mesa--mia       { border-color: var(--color); }
.mesa--abriendo  { opacity: .55; }

@media (hover: hover) and (pointer: fine) {
  .mesa:hover { border-color: var(--color); box-shadow: var(--sombra-2);
                transform: translateY(-2px); }
}

/* Franja de estado: color pleno, texto blanco. La senal de largo alcance. */
.mesa__franja {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 12px; background: var(--color); color: var(--sobre, #fff);
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase;
}
.mesa__reloj {
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  font-size: 12px; font-weight: 800; opacity: .95;
}
/* La mesa demorada late despacio: sin eso se pierde entre las demas. */
.mesa--demorada .mesa__franja { animation: latido-mesa 2s ease-in-out infinite; }
@keyframes latido-mesa { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .mesa--demorada .mesa__franja { animation: none; }
}

.mesa__cuerpo {
  flex: 1; display: grid; grid-template-rows: 32px 22px 16px auto; gap: 3px;
  padding: 11px 13px 9px; min-height: 116px;
  background: none; border: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.mesa__cuerpo:active { transform: scale(.985); }

.mesa__cabecera { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mesa__kicker {
  font-size: 10px; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-suave); flex: none;
}
.mesa__numero {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 30px; line-height: 1; font-weight: 850; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.mesa__numero--nombre { font-size: 18px; font-weight: 780; }

.mesa__invitacion {
  grid-row: 2 / 5; display: flex; flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
  color: var(--salon-verde); font-size: 12.5px; font-weight: 650;
}

.mesa__mesero { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mesa__avatar {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 850;
  background: var(--superficie-3); color: var(--texto-medio);
}
.mesa--mia .mesa__avatar { background: var(--color); color: var(--sobre, #fff); }
.mesa__mesero-nombre {
  font-size: 12.5px; font-weight: 680; color: var(--texto-medio);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mesa__insignia {
  margin-left: auto; flex: none;
  font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: var(--salon-rojo); color: #fff;
  font-variant-numeric: tabular-nums;
}

.mesa__items {
  font-size: 11.5px; color: var(--texto-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
.mesa__total {
  align-self: end; font-size: 19px; font-weight: 800; letter-spacing: -.015em;
}

/* Acciones: FUERA del boton de la mesa (un control dentro de otro queda
   inoperable por teclado, y liberar borra un pedido). */
.mesa__acciones {
  display: flex; align-items: stretch; gap: 1px;
  border-top: 1px solid var(--borde); background: var(--borde);
}
.mesa__accion {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 6px; min-height: 38px;
  border: none; background: var(--superficie); color: var(--texto-medio);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.mesa__accion--servir { color: var(--salon-verde); }
.mesa__accion--servir:hover { background: var(--exito-suave); }
.mesa__accion--liberar { flex: 0 0 46px; color: var(--texto-suave); }
.mesa__accion--liberar:hover { background: var(--peligro-suave); color: var(--peligro); }
.mesa__accion--nota {
  color: var(--texto-suave); font-weight: 620; font-size: 11.5px; cursor: default;
}

/* Selector de mesa dentro del modal de venta: solo numero y total */
.mesas-grid--modal { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.mesas-grid--modal .mesa-card {
  display: grid; gap: 3px; padding: 11px 13px; min-height: 84px;
  border: 1.5px solid var(--borde); border-radius: 12px;
  background: var(--superficie); color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.mesas-grid--modal .mesa-card--ocupada {
  border-color: var(--salon-azul); background: var(--salon-azul-suave);
}
.mesas-grid--modal .mesa-card__numero {
  font-size: 22px; font-weight: 850; font-variant-numeric: tabular-nums;
}
.mesas-grid--modal .mesa-card__kicker {
  font-size: 10px; font-weight: 750; text-transform: uppercase;
  color: var(--texto-suave);
}
.mesas-grid--modal .mesa-card__cabecera {
  display: flex; gap: 5px; align-items: baseline;
}
.mesas-grid--modal .mesa-card__total { font-size: 13.5px; font-weight: 700; }
.mesas-grid--modal .mesa-card__punto { display: none; }

/* ===========================================================================
   ANÁLISIS CON IA (chat)
   =========================================================================== */

.analisis {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; max-width: 860px; margin: 0 auto; width: 100%;
}

.analisis__apagado {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; text-align: center;
  padding: 24px;
}
.analisis__apagado-icono { color: var(--primario); }
.analisis__apagado-titulo { font-size: 21px; font-weight: 750; }
.analisis__apagado-texto {
  max-width: 460px; color: var(--texto-medio);
  font-size: 14px; line-height: 1.6;
}

.analisis__mensajes {
  flex: 1; overflow-y: auto; padding: 18px 18px 6px;
  display: flex; flex-direction: column; gap: 10px;
}

.analisis__inicio {
  margin: auto; text-align: center; padding: 12px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.analisis__inicio-icono { color: var(--primario); }
.analisis__inicio-titulo { font-size: 18px; font-weight: 700; }
.analisis__sugerencias {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 620px;
}
.analisis__sugerencia {
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto-medio); border-radius: 999px;
  padding: 9px 14px; font-size: 13px; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.analisis__sugerencia:hover { border-color: var(--primario); color: var(--primario); }

.burbuja {
  display: flex; gap: 9px; align-items: flex-start;
  max-width: 85%; align-self: flex-start;
}
.burbuja__icono {
  color: var(--primario); flex: none; margin-top: 9px;
}
.burbuja__texto {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: break-word; min-width: 0;
}
.burbuja--mia { align-self: flex-end; }
.burbuja--mia .burbuja__texto {
  background: var(--primario); color: #fff; border-color: var(--primario);
  border-radius: 14px 14px 4px 14px;
}
.burbuja--error .burbuja__texto {
  background: var(--peligro-suave); border-color: var(--peligro-borde);
  color: var(--peligro);
}
.burbuja__texto--pensando { color: var(--texto-suave); font-style: italic; }

.analisis__entrada {
  display: flex; gap: 9px; padding: 10px 18px; flex-shrink: 0;
}
.analisis__campo {
  flex: 1; min-width: 0; border: 1.5px solid var(--borde);
  border-radius: 12px; background: var(--superficie);
  color: var(--texto); padding: 0 15px; min-height: 46px; font-size: 14px;
}
.analisis__campo:focus {
  outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-suave);
}
.analisis__nota {
  padding: 0 18px 12px; font-size: 11.5px; color: var(--texto-suave);
  line-height: 1.5; flex-shrink: 0;
}

/* ===========================================================================
   BIENVENIDA (primer arranque)
   =========================================================================== */

.bienvenida {
  position: fixed; inset: 0; z-index: 90;
  background: var(--fondo);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; overflow-y: auto;
}
.bienvenida__tarjeta {
  width: 100%; max-width: 620px; text-align: center;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 20px; box-shadow: var(--sombra-3);
  padding: 34px 30px; margin: auto;
}
.bienvenida__marca {
  font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 18px;
}
.bienvenida__titulo { font-size: 21px; font-weight: 750; margin-bottom: 8px; }
.bienvenida__texto {
  color: var(--texto-medio); font-size: 14px; line-height: 1.6;
  margin-bottom: 20px;
}
.bienvenida__acciones {
  display: flex; gap: 10px; justify-content: center; margin-top: 22px;
}

.bienvenida__tipos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.tipo-negocio {
  display: flex; flex-direction: column; gap: 7px; text-align: left;
  border: 1.5px solid var(--borde); border-radius: 14px;
  background: var(--superficie); color: inherit; font: inherit;
  padding: 16px; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.tipo-negocio:hover { border-color: var(--primario); }
.tipo-negocio--activo {
  border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-suave);
  background: var(--primario-suave);
}
.tipo-negocio__icono { color: var(--primario); }
.tipo-negocio__titulo { font-weight: 750; font-size: 15.5px; }
.tipo-negocio__detalle { font-size: 12.5px; line-height: 1.5; color: var(--texto-medio); }
.tipo-negocio__ejemplos { font-size: 11.5px; color: var(--texto-suave); font-style: italic; }

/* ===========================================================================
   MÓVIL Y TABLETA VERTICAL (≤ 768 px)
   La barra lateral pasa a la parte de abajo (patrón de app móvil), el ticket
   se vuelve un panel inferior y los modales ocupan toda la pantalla.
   =========================================================================== */
@media (max-width: 768px) {
  .app { flex-direction: column-reverse; }

  .lateral {
    width: 100%; flex-direction: row;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px));
    border-right: none; border-top: 1px solid var(--borde);
    overflow-x: auto; gap: 2px;
  }
  .lateral::-webkit-scrollbar { display: none; }
  .lateral__marca { display: none; }
  .lateral__espaciador { flex: 0 0 6px; }
  /* width:auto anula el width:100% de la regla base: en fila, cada boton
     mide su contenido, no la barra entera. */
  .nav-boton { width: auto; min-height: 48px; min-width: 56px; flex: 1 0 auto; padding: 4px 6px; }
  .nav-boton--activo::before { display: none; }

  .barra {
    overflow-x: auto; flex-wrap: nowrap; gap: 7px;
    scrollbar-width: none;
  }
  .barra::-webkit-scrollbar { display: none; }
  .barra > * { flex-shrink: 0; }

  .venta { flex-direction: column; }
  .catalogo { padding: 10px; gap: 10px; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
  .ticket {
    width: 100%; max-height: 46vh;
    border-left: none; border-top: 1.5px solid var(--borde);
  }
  /* Con el carrito vacío el panel no roba media pantalla (mejora progresiva:
     los navegadores sin :has() simplemente conservan el alto normal). */
  .ticket:has(.ticket__vacio) { max-height: 150px; }
  .ticket__vacio { padding: 10px; gap: 8px; }
  .ticket__vacio-icono { display: none; }
  .buscador__ayuda { display: none; }

  .velo { padding: 0; }
  .modal {
    max-width: 100%; width: 100%; height: 100%;
    max-height: 100%; border-radius: 0;
  }

  .pantalla { padding: 12px; }
  .pantalla__titulo { font-size: 18px; }
  .mesas { padding: 12px; }
  .salon-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
  .mesa__cuerpo { min-height: 106px; grid-template-rows: 28px 20px 15px auto; }
  .mesa__numero { font-size: 25px; }
  .salon-contador { padding: 7px 12px; }
  .salon-kpi { padding: 6px 12px; }
  .bienvenida__tipos { grid-template-columns: 1fr; }
  .bienvenida__tarjeta { padding: 24px 18px; }
  .analisis__mensajes { padding: 12px 12px 4px; }
  .analisis__entrada { padding: 8px 12px; }
  .analisis__nota { padding: 0 12px 10px; }
  .burbuja { max-width: 94%; }
  /* .fila-campos es GRID (no flex): para apilar se cambia la plantilla de
     columnas. El margen propio de .campo separa las filas. */
  .fila-campos { grid-template-columns: 1fr; gap: 0; }
}

/* Táctil: los objetivos crecen y los hover no se quedan pegados */
@media (pointer: coarse) {
  .boton { min-height: 46px; }
  .contador__boton { width: 40px; height: 40px; }
  .linea__quitar { width: 40px; height: 40px; }
  /* Liberar una mesa borra un pedido: en pantalla táctil necesita un blanco
     grande y separado, o se toca por accidente al agarrar la tableta. */
  /* Liberar una mesa borra un pedido: en tactil necesita blanco grande. */
  .mesa__accion { min-height: 46px; }
  .mesa__accion--liberar { flex: 0 0 52px; }
  .mesa:hover { transform: none; }
}


/* ===========================================================================
   CADENA DE SUCURSALES
   =========================================================================== */

.aviso-fuerte {
  padding: 13px 15px; margin-bottom: 16px;
  background: var(--aviso-suave); border: 1px solid var(--aviso-borde);
  border-radius: 11px; font-size: 13px; line-height: 1.55;
}

.cadena-total {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: flex-start; justify-content: space-between;
  padding: 20px 22px; margin-bottom: 18px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 16px;
}
.cadena-total__etiqueta {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: 4px;
}
.cadena-total__valor {
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
}
.cadena-total__detalle {
  font-size: 13px; color: var(--texto-medio); margin-top: 5px;
}
.cadena-total__caja { text-align: right; }
.cadena-total__caja .cadena-total__valor { font-size: 21px; }

.cadena-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.sede {
  --sede-color: var(--exito);
  position: relative; overflow: hidden;
  padding: 16px 18px 14px 20px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.sede::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--sede-color);
}
.sede--al_dia       { --sede-color: var(--exito); }
.sede--retrasada    { --sede-color: var(--aviso); }
/* Sin contacto se apaga, no se alarma: el dato que muestra es viejo, no malo */
.sede--sin_contacto { --sede-color: var(--borde-fuerte); }
.sede--sin_contacto .sede__cifra { color: var(--texto-suave); }

.sede__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.sede__nombre { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.sede__codigo {
  font-family: ui-monospace, monospace; font-size: 11.5px;
  color: var(--texto-suave);
}
.sede__estado {
  font-size: 10.5px; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  flex: none; white-space: nowrap;
}
.sede__estado--al_dia       { background: var(--exito-suave);   color: var(--exito); }
.sede__estado--retrasada    { background: var(--aviso-suave);   color: var(--aviso); }
.sede__estado--sin_contacto { background: var(--superficie-3);  color: var(--texto-suave); }

.sede__cifra { font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.sede__detalle { font-size: 12.5px; color: var(--texto-suave); margin-top: -4px; }
.sede__fila {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12.5px; color: var(--texto-medio);
  padding-top: 6px; border-top: 1px dashed var(--borde);
}
.sede__fila--alerta { color: var(--aviso); font-weight: 620; }
.sede__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 8px;
  font-size: 11.5px; color: var(--texto-suave);
}
.sede__accion {
  border: none; background: none; color: var(--primario);
  font: inherit; font-weight: 650; cursor: pointer; padding: 2px 0;
}
.sede__accion:hover { text-decoration: underline; }

.token-caja {
  padding: 14px 16px; border-radius: 11px;
  background: var(--superficie-2); border: 1px dashed var(--borde-fuerte);
  font-family: ui-monospace, monospace; font-size: 13px;
  word-break: break-all; line-height: 1.6; user-select: all;
}

@media (max-width: 768px) {
  .cadena-grid { grid-template-columns: 1fr; }
  .cadena-total { padding: 16px; }
  .cadena-total__caja { text-align: left; }
}


/* --- Historial del salón --------------------------------------------------
   El motivo de una mesa liberada solo sirve si alguien puede leerlo. */
.salon-barra { display: flex; gap: 8px; flex-shrink: 0; }

.historial { display: flex; flex-direction: column; gap: 7px; }
.historial__fila {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 13px; border-radius: 11px;
  background: var(--superficie-2); border: 1px solid transparent;
}
.historial__fila--alerta {
  background: var(--peligro-suave); border-color: var(--peligro-borde);
}
.historial__icono { color: var(--texto-suave); flex: none; margin-top: 1px; }
.historial__fila--alerta .historial__icono { color: var(--peligro); }
.historial__datos { flex: 1; min-width: 0; }
.historial__titulo { font-size: 13.5px; font-weight: 650; }
.historial__motivo {
  font-size: 13px; color: var(--peligro); font-style: italic; margin-top: 2px;
}
.historial__pie { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.historial__monto { font-size: 13.5px; font-weight: 750; flex: none; }


/* Columnas de cifras: a la derecha y con digitos de ancho fijo, para poder
   comparar montos de un vistazo sin que bailen las comas. */
/* `.tabla th` y `.tabla td` alinean a la izquierda con MAS especificidad
   (0,0,1,1) que una clase suelta, asi que la regla se escribe con el mismo
   peso o no se aplicaria nunca. */
.tabla th.tabla__num, .tabla td.tabla__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Conteo por rol en la cabecera de Personal */
.pantalla__contador { display: flex; gap: 6px; flex-wrap: wrap; }