/* ------------------------------------------------------------------
   mostrador.css — componentes del catálogo, la venta y el personal
   PRY-BDL-0001 · SES-CMR-525

   Vive SEPARADO de bordalink.css a propósito: aquel lo genera
   generar-tokens.py desde la ficha de marca y regenerarlo no debe
   arrastrar estos componentes. Aquí NO hay un solo color escrito a
   mano (M-05): todo sale de los tokens con var() y color-mix().
   ------------------------------------------------------------------ */

/* ====================================================================
   REFUERZO de `.oculto-visual` — SES-CMR-533
   El original vive en bordalink.css, que lo GENERA generar-tokens.py; se
   refuerza aquí para que una regeneración no se lleve la corrección.

   EL DEFECTO QUE REPARA
     `clip: rect(0 0 0 0)` está obsoleto y **no recorta el scroll**: un
     elemento con `display: table` conserva el ancho de su contenido y
     empuja la página a lo ancho. Medido en el tablero: 392 px de scroll
     en una pantalla de 360 — el teléfono se arrastraba de lado por unas
     tablas que nadie ve. La misma causa desbordaba el encabezado de la
     tabla de próximos trabajos del operador.

     `clip-path: inset(50%)` sí recorta, y `max-width` remata el caso de
     los elementos de tabla, que ignoran el `width: 1px`.
   ==================================================================== */
.oculto-visual {
  display: block !important;      /* `table` ignora max-width; `block` no */
  clip-path: inset(50%) !important;
  max-width: 1px !important;
  max-height: 1px !important;
  overflow: hidden !important;
}

/* --- Navegación entre módulos, en la barra --- */
.bdl-nav {
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  margin-left: var(--sp-2);
}
.bdl-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--sp-3);
  border-radius: var(--r-full); text-decoration: none;
  color: var(--texto-suave); font: 600 var(--t--1)/1 var(--f-cuerpo);
  border: 1px solid transparent;
}
.bdl-nav a:hover { color: var(--texto); border-color: var(--borde); }
/* El display explícito de arriba le ganaría al atributo hidden y el
   operador vería enlaces que no son suyos (LEC-UXD-006). Se cierra aquí. */
.bdl-nav a[hidden] { display: none; }
.bdl-nav a[aria-current="page"] {
  color: var(--texto);
  background: color-mix(in oklab, var(--brand) 26%, transparent);
  border-color: var(--borde-fuerte);
}
@media (max-width: 560px) {
  .bdl-nav { margin-left: 0; }
  .bdl-nav a { padding: 0 var(--sp-2); }
}

/* --- Buscador y filtros del catálogo --- */
.bdl-filtros {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center;
  margin: var(--sp-3) 0;
}
.bdl-buscar {
  flex: 1 1 220px; min-height: 48px; padding: 0 var(--sp-3);
  border-radius: var(--r-full); border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto);
  font: 400 var(--t-0)/1 var(--f-cuerpo);
}
.bdl-buscar::placeholder { color: var(--texto-tenue); }
.bdl-chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.bdl-chip {
  min-height: 44px; padding: 0 var(--sp-3); cursor: pointer;
  border-radius: var(--r-full); border: 1px solid var(--borde-fuerte);
  background: transparent; color: var(--texto-suave);
  font: 600 var(--t--1)/1 var(--f-cuerpo);
}
.bdl-chip[aria-pressed="true"] {
  background: var(--grad-enlace); color: var(--lino); border-color: transparent;
}

/* --- La rejilla de productos: foto CUADRADA, como el catálogo real --- */
.bdl-rejilla {
  list-style: none; margin: var(--sp-3) 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.bdl-producto {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-1);
  border-radius: var(--r-2); overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde);
}
.bdl-producto .foto {
  aspect-ratio: 1; width: 100%; object-fit: cover; display: block;
  background: color-mix(in oklab, var(--lino) 92%, var(--indigo));
}
.bdl-producto .sin-foto {
  aspect-ratio: 1; display: grid; place-items: center;
  color: var(--texto-tenue); font-size: var(--t-2);
  background: var(--superficie-2);
}
.bdl-producto .datos { padding: 0 var(--sp-2) var(--sp-2); min-width: 0; }
.bdl-producto .nombre {
  margin: 0; font: 600 var(--t--1)/1.3 var(--f-cuerpo);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.bdl-producto .precio {
  font-family: var(--f-datos); font-size: var(--t-0); font-weight: 700;
  color: color-mix(in oklab, var(--accion) 70%, var(--lino));
}
.bdl-producto .stock { font-size: var(--t--1); color: var(--texto-tenue); }
.bdl-producto .agregar {
  position: absolute; right: var(--sp-2); top: var(--sp-2);
  width: 48px; height: 48px; border-radius: var(--r-full); border: 0;
  cursor: pointer; font-size: var(--t-1); font-weight: 700;
  background: var(--grad-enlace); color: var(--lino);
  box-shadow: var(--sombra);
}
.bdl-producto .agregar:active { transform: scale(.94); }
/* Sin stock: se dice con palabra e icono, no solo con color */
.bdl-producto .aviso-stock {
  display: inline-block; padding: .1em .6em; border-radius: var(--r-full);
  font-size: var(--t--1);
  background: color-mix(in oklab, var(--atento) 20%, transparent);
  color: color-mix(in oklab, var(--atento) 55%, var(--lino));
}

/* --- Vista de lista (el otro modo de Kontro) --- */
.bdl-rejilla[data-vista="lista"] { grid-template-columns: 1fr; }
.bdl-rejilla[data-vista="lista"] .bdl-producto {
  display: grid; grid-template-columns: 76px 1fr auto; align-items: center;
}
.bdl-rejilla[data-vista="lista"] .foto,
.bdl-rejilla[data-vista="lista"] .sin-foto { width: 76px; }
.bdl-rejilla[data-vista="lista"] .nombre { min-height: 0; }
.bdl-rejilla[data-vista="lista"] .agregar {
  position: static; margin-right: var(--sp-2);
}

/* --- El carrito: barra fija abajo + hoja --- */
.bdl-carrito-barra {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--grad-bastidor); border-top: 1px solid var(--borde-fuerte);
}
.bdl-carrito-barra .total { font-family: var(--f-datos); font-weight: 700; }
/* Mismo caso que la navegación (LEC-UXD-006): el display explícito le gana
   al atributo hidden y la barra vacía interceptaba los toques de la real.
   Cazado con Playwright, no leyendo el código. */
.bdl-carrito-barra[hidden] { display: none; }
.bdl-hoja {
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-3) var(--r-3) 0 0;
  background: var(--superficie-2); color: var(--texto);
  width: min(640px, 100%); margin: auto auto 0;
  padding: var(--sp-3); max-height: 86dvh;
}
.bdl-hoja::backdrop { background: color-mix(in oklab, var(--tinta) 65%, transparent); }
.bdl-hoja h2 { font-family: var(--f-titulo); margin: 0 0 var(--sp-3); }
.bdl-linea {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-2);
  align-items: center; padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--borde);
}
.bdl-linea .cant {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-family: var(--f-datos);
}
.bdl-linea button.paso {
  width: 44px; height: 44px; border-radius: var(--r-full); cursor: pointer;
  border: 1px solid var(--borde-fuerte); background: transparent;
  color: var(--texto); font-size: var(--t-1);
}
.bdl-linea .importe { font-family: var(--f-datos); min-width: 7ch; text-align: right; }

/* --- Formularios en hoja --- */
.bdl-campo { display: block; margin: 0 0 var(--sp-3); }
.bdl-campo span { display: block; font-size: var(--t--1); color: var(--texto-suave); margin-bottom: var(--sp-1); }
.bdl-campo input, .bdl-campo select, .bdl-campo textarea {
  width: 100%; box-sizing: border-box; min-height: 48px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-1);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto);
  font: 400 var(--t-0)/1.4 var(--f-cuerpo);
}
.bdl-campo textarea { min-height: 84px; resize: vertical; }
.bdl-campo input:focus-visible, .bdl-campo select:focus-visible,
.bdl-campo textarea:focus-visible, .bdl-buscar:focus-visible,
.bdl-chip:focus-visible {
  outline: 3px solid var(--accion); outline-offset: 2px;
}

/* --- Ficha de persona (control de personal) --- */
.bdl-persona {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--r-2);
  background: var(--superficie); border: 1px solid var(--borde);
}
.bdl-persona h2 { margin: 0; font: 700 var(--t-1)/1.2 var(--f-titulo); }
.bdl-persona .detalle { color: var(--texto-suave); font-size: var(--t--1); }
.bdl-persona .numeros { text-align: right; font-family: var(--f-datos); }
.bdl-persona[data-jornada="abierta"] { border-color: color-mix(in oklab, var(--ok) 50%, transparent); }
.bdl-persona .estado {
  display: inline-block; padding: .15em .7em; border-radius: var(--r-full);
  font-size: var(--t--1);
}
.bdl-persona[data-jornada="abierta"] .estado {
  background: color-mix(in oklab, var(--ok) 20%, transparent);
  color: color-mix(in oklab, var(--ok) 60%, var(--lino));
}
.bdl-persona[data-jornada="cerrada"] .estado {
  background: color-mix(in oklab, var(--pausa) 22%, transparent);
  color: var(--texto-suave);
}
/* Lo ganado por cada quien, en la misma columna de los números y con el
   verde del dinero que ya usa el resto del sistema. Es lo que el dueño
   viene a ver cuando abre esta pantalla el día de la raya. */
.bdl-persona .dinero-persona {
  margin-top: var(--sp-2); padding-top: var(--sp-1);
  border-top: 1px solid var(--borde);
}
.bdl-persona .dinero-persona b {
  display: block; font-size: var(--t-1); color: var(--ok); font-weight: 700;
}
.bdl-persona .dinero-persona small {
  color: var(--texto-suave); font-size: var(--t--1);
}

/* ====================================================================
   CAPA PULIDO — SES-CMR-525 T2
   Estilo pedido por DrMoon sobre las referencias del cliente: limpio,
   moderno, con aire, vidrio esmerilado y el violeta de marca dominando
   sin saturar. TODO sale de los tokens de la ficha (M-05): el fondo es
   el gradiente bastidor + veladuras que la ficha ya declaraba.
   ==================================================================== */

/* El lienzo: NEGRO SOBRIO como la referencia del cliente — el violeta
   es puntual (item activo, botones), no una veladura por toda la
   pantalla. v3 tras feedback directo de DrMoon: la v2 con velos rosas
   fue rechazada mirándola (LEC-UXD-037 en vivo). Un solo brillo violeta
   muy tenue arriba a la izquierda, y nada más. */
.bdl-fondo-vivo {
  min-height: 100dvh;
  background-color: var(--tinta);
  background-image: radial-gradient(
    ellipse 900px 480px at 8% -6%,
    color-mix(in oklab, var(--brand) 13%, transparent) 0%, transparent 62%);
  background-repeat: no-repeat;
  position: relative;
}

/* Tarjeta: superficie casi sólida con borde sutil, como la referencia.
   El blur queda solo como acabado fino, no como protagonista. */
.bdl-vidrio {
  background: color-mix(in oklab, var(--superficie-2) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in oklab, var(--lino) 8%, transparent);
  border-radius: var(--r-3);
  padding: var(--sp-4);
}

/* KPI: el número es el protagonista, la etiqueta acompaña */
.bdl-kpis {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  margin: var(--sp-3) 0;
}
.bdl-kpi {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-3);
  background: color-mix(in oklab, var(--superficie-2) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--lino) 8%, transparent);
}
/* Icono del KPI en cajita de color, como la referencia del cliente */
.bdl-kpi .icono {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-1); font-size: 1.15rem;
  background: color-mix(in oklab, var(--kpi-tono, var(--brand)) 20%, transparent);
}
.bdl-kpi .cifra {
  /* La cifra NO se parte: «$ 4,830.00» en tres renglones es ilegible
     (cazado mirando). Tamaño contenido y tarjetas con mínimo más ancho. */
  font: 700 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.15 var(--f-datos);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--grad-enlace);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.bdl-kpi .etiqueta { color: var(--texto-suave); font-size: var(--t--1); }
.bdl-kpi[data-tono="ok"] .cifra {
  background: none; color: color-mix(in oklab, var(--ok) 70%, var(--lino));
}
.bdl-kpi[data-tono="alerta"] .cifra {
  background: none; color: color-mix(in oklab, var(--atento) 70%, var(--lino));
}

/* La ganancia del operador: grande, verde y honesta */
.bdl-dinero-vivo {
  font: 700 var(--t-3)/1.1 var(--f-datos);
  color: color-mix(in oklab, var(--ok) 72%, var(--lino));
}

/* Barra de progreso fina (la ficha ya declara su gradiente) */
.bdl-progreso {
  height: 8px; border-radius: var(--r-full); overflow: hidden;
  background: color-mix(in oklab, var(--lino) 10%, transparent);
}
.bdl-progreso > span {
  display: block; height: 100%; border-radius: var(--r-full);
  background: var(--grad-puntada);
  transition: width .4s ease;
}

/* El reloj de la pausa: cuenta regresiva que se ve desde lejos */
.bdl-pausa-reloj {
  font: 700 var(--t-3)/1 var(--f-datos); text-align: center;
  letter-spacing: .04em;
}
.bdl-pausa-reloj[data-vencida="si"] {
  color: color-mix(in oklab, var(--alto) 65%, var(--lino));
  animation: bdl-parpadeo 1s step-end infinite;
}
@keyframes bdl-parpadeo { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .bdl-pausa-reloj[data-vencida="si"] { animation: none; }
}

/* Listas dentro de vidrio: renglones aireados con divisor sutil */
.bdl-renglones { list-style: none; margin: 0; padding: 0; }
.bdl-renglones li {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid color-mix(in oklab, var(--lino) 7%, transparent);
}
.bdl-renglones li:last-child { border-bottom: 0; }
.bdl-renglones .derecha { margin-left: auto; font-family: var(--f-datos); text-align: right; }

/* ====================================================================
   EL ARMAZÓN — navegación lateral (escritorio) + barra inferior (móvil)
   SES-CMR-525 T3. Rediseño por feedback directo de DrMoon sobre la
   referencia anotada del cliente: menú lateral con tarjeta de usuario,
   item activo en píldora violeta y cerrar sesión SIEMPRE visible.
   Lo genera assets/armazon.js — una sola fuente para todas las pantallas.
   ==================================================================== */

:root { --lat-ancho: 248px; --abajo-alto: 64px; }

/* --- Sidebar de escritorio --- */
.bdl-lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lat-ancho); z-index: 40;
  box-sizing: border-box; /* el padding va DENTRO del ancho: sin esto el
     sidebar mide 32px más que --lat-ancho y tapa el contenido (cazado
     mirando la captura: «El taller ahora» sin la E) */
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
  background: color-mix(in oklab, var(--superficie) 94%, transparent);
  border-right: 1px solid color-mix(in oklab, var(--lino) 7%, transparent);
  overflow-y: auto;
}
.bdl-lat-marca img { height: 34px; width: auto; display: block; margin: var(--sp-1) 0 var(--sp-2); }

.bdl-lat-usuario {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2); border-radius: var(--r-2);
  background: color-mix(in oklab, var(--superficie-2) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--lino) 7%, transparent);
}
.bdl-lat-usuario .avatar {
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: grid; place-items: center; flex: none;
  font: 700 1rem var(--f-titulo); color: var(--lino);
  background: var(--grad-enlace);
}
.bdl-lat-usuario .datos { min-width: 0; line-height: 1.25; }
.bdl-lat-usuario b { display: block; font-size: var(--t--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdl-lat-usuario small { color: var(--texto-tenue); font-size: .72rem; }
.bdl-lat-usuario .punto {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); vertical-align: 1px;
}

.bdl-lat-nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-1); }
.bdl-lat-item {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-2); border-radius: var(--r-2);
  color: var(--texto-suave); text-decoration: none;
  font: 500 var(--t--1)/1 var(--f-cuerpo);
  border: 0; background: transparent; cursor: pointer;
  width: 100%; box-sizing: border-box; text-align: left;
}
.bdl-lat-item svg { width: 20px; height: 20px; flex: none; }
.bdl-lat-item:hover { color: var(--texto); background: color-mix(in oklab, var(--lino) 5%, transparent); }
.bdl-lat-item[aria-current="page"] {
  color: var(--lino); background: var(--grad-enlace); font-weight: 600;
}
.bdl-lat-salir { margin-top: auto; color: var(--texto-tenue); }
.bdl-lat-salir:hover { color: color-mix(in oklab, var(--alto) 60%, var(--lino)); }

/* El contenido se hace a un lado del sidebar, con un respiro */
body[data-pagina] .bdl-lienzo {
  margin-left: calc(var(--lat-ancho) + clamp(1rem, 2.5vw, 2.5rem));
  margin-right: clamp(1rem, 2.5vw, 2.5rem);
  max-width: 1080px;
}

/* --- Tope y barra inferior: solo móvil --- */
.bdl-tope { display: none; }
.bdl-abajo { display: none; }

@media (max-width: 959px) {
  .bdl-lateral { display: none; }
  body[data-pagina] .bdl-lienzo {
    margin-left: 0;
    padding-bottom: calc(var(--abajo-alto) + var(--sp-4));
  }

  .bdl-tope {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
    background: color-mix(in oklab, var(--tinta) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid color-mix(in oklab, var(--lino) 6%, transparent);
  }
  .bdl-tope img { height: 28px; width: auto; }
  .bdl-tope .quien { text-align: right; line-height: 1.2; }
  .bdl-tope .quien b { display: block; font-size: var(--t--1); }
  .bdl-tope .quien small { color: var(--texto-tenue); font-size: .72rem; }

  .bdl-abajo {
    position: fixed; inset: auto 0 0 0; height: var(--abajo-alto); z-index: 40;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: color-mix(in oklab, var(--tinta) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid color-mix(in oklab, var(--lino) 8%, transparent);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bdl-abajo .bdl-lat-item {
    flex-direction: column; justify-content: center; gap: 3px;
    min-height: 0; height: 100%; border-radius: 0;
    font-size: .68rem; padding: 0;
    text-align: center; align-items: center;
  }
  .bdl-abajo .bdl-lat-item svg { width: 22px; height: 22px; }
  .bdl-abajo .bdl-lat-item[aria-current="page"] {
    background: none; color: color-mix(in oklab, var(--brand) 55%, var(--lino));
  }
  .bdl-abajo .bdl-lat-item[aria-current="page"] svg {
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--brand) 60%, transparent));
  }

  /* La barra del carrito sube para no taparse con la navegación */
  .bdl-carrito-barra { bottom: var(--abajo-alto); }
}

/* --- Tabla simple para inventario en escritorio --- */
.bdl-lista-inv { list-style: none; margin: var(--sp-3) 0; padding: 0; display: grid; gap: var(--sp-2); }
.bdl-inv {
  display: grid; grid-template-columns: 64px 1fr auto auto; gap: var(--sp-2);
  align-items: center; padding: var(--sp-2);
  border-radius: var(--r-2); background: var(--superficie);
  border: 1px solid var(--borde);
}
.bdl-inv img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-1); }
.bdl-inv .nom { font-weight: 600; overflow-wrap: anywhere; }
.bdl-inv .cat { color: var(--texto-tenue); font-size: var(--t--1); }
.bdl-inv .num { font-family: var(--f-datos); text-align: right; }
@media (max-width: 560px) {
  .bdl-inv { grid-template-columns: 56px 1fr; }
  .bdl-inv .num, .bdl-inv .acciones { grid-column: 2; text-align: left; }
}