/* DeckSwap Control — Bloque 4. Iron Ore oscuro + acento #2C5F7C. Mobile first. */
:root {
  --fondo: #1d2125;
  --panel: #262b30;
  --panel2: #2e343a;
  --borde: #3a4148;
  --texto: #e8edf1;
  --texto2: #9aa6b0;
  --acento: #2C5F7C;
  --acento-claro: #4a90b8;
  --ok: #2e9e5b;
  --mal: #c94f42;
  --ambar: #c9932e;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--fondo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh; padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
body.flash-ok { animation: fok .45s; }
body.flash-mal { animation: fmal .6s; }
@keyframes fok  { 0% { background: #1d4030; } 100% { background: var(--fondo); } }
@keyframes fmal { 0%, 40% { background: #4a2320; } 100% { background: var(--fondo); } }

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(180deg, #14171a, var(--fondo));
  border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20;
}
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--texto); font-size: 17px; letter-spacing: .2px; }
.marca b { color: #7db3d0; font-weight: 700; }
.hex { width: 30px; height: 30px; }
.quien { color: var(--texto2); font-size: 14px; }
.quien a { color: var(--texto2); text-decoration: none; margin-left: 8px; font-size: 17px; }

main { padding: 14px; max-width: 640px; margin: 0 auto; }
h1 { font-size: 20px; margin: 2px 0 12px; font-weight: 700; }
h2 { font-size: 15px; color: var(--texto2); margin: 16px 0 8px; text-transform: uppercase;
  letter-spacing: .6px; font-weight: 600; }
p.gris, .gris-t { color: var(--texto2); }

.card {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  padding: 14px; margin-bottom: 10px; display: block; color: var(--texto);
  text-decoration: none;
}
a.card:active { background: var(--panel2); }
.card .fila { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  flex-wrap: wrap; }
.card .fila > span:last-child { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.card .sub { overflow-wrap: anywhere; }
.card .titulo { font-weight: 650; font-size: 16px; }
.card .sub { color: var(--texto2); font-size: 13.5px; margin-top: 3px; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12.5px;
  font-weight: 700; letter-spacing: .3px; }
.pill.azul { background: #23445a; color: #9ed0ec; }
.pill.verde { background: #1d4030; color: #7fd6a4; }
.pill.ambar { background: #4a3a15; color: #eec36a; }
.pill.rojo { background: #4a2320; color: #f0a196; }
.pill.gris { background: var(--panel2); color: var(--texto2); }

.btn {
  display: block; width: 100%; padding: 15px; border: 0; border-radius: 13px;
  background: var(--acento); color: #fff; font-size: 17px; font-weight: 700;
  text-align: center; text-decoration: none; cursor: pointer; margin-top: 10px;
}
.btn:active { filter: brightness(1.15); }
.btn.verde { background: var(--ok); }
.btn.rojo { background: var(--mal); }
.btn.gris { background: var(--panel2); color: var(--texto); }
.btn.chico { padding: 9px 12px; font-size: 14px; width: auto; display: inline-block; }

.scan-zona { position: sticky; top: 58px; z-index: 15; background: var(--fondo);
  padding: 6px 0 10px; }
.scan-fila { display: flex; gap: 8px; }
input#scan, input.texto, input.num, select.sel, textarea.texto {
  width: 100%; padding: 14px; font-size: 17px; border-radius: 12px;
  border: 1.5px solid var(--borde); background: var(--panel); color: var(--texto);
  outline: none;
}
input#scan:focus { border-color: var(--acento); box-shadow: 0 0 0 3px #2c5f7c44; }
.btn-cam { flex: 0 0 54px; font-size: 22px; border-radius: 12px; border: 1.5px solid var(--borde);
  background: var(--panel); color: var(--texto); }

.contador { font-size: 44px; font-weight: 800; text-align: center; margin: 6px 0;
  font-variant-numeric: tabular-nums; }
.contador small { font-size: 18px; color: var(--texto2); font-weight: 600; }

.linea-pick { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--borde); margin-bottom: 8px; gap: 10px; }
.linea-pick.lista { border-color: var(--ok); background: #22352b; }
.linea-pick .nom { font-size: 15px; }
.linea-pick .ean { color: var(--texto2); font-size: 12px; }
.linea-pick .cnt { font-size: 22px; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.linea-pick.lista .cnt { color: #7fd6a4; }
/* B4b: stock sin apertura = movimiento neto, se muestra neutro (no rojo) */
.linea-pick .cnt.neutro { color: var(--texto2); font-weight: 600; }
.linea-pick.retenida { opacity: .75; border-style: dashed; }

/* B4c: identidad por canal — banda lateral en tarjetas + chips. Un color por
   canal en TODA la app: Flex amarillo ML, Agencia naranja, Full violeta,
   Web azul, Retiro verde, Mesón cobre. */
:root {
  --c-flex: #ffd54a; --c-agencia: #ff9d4a; --c-full: #a58cf0;
  --c-web: #4a90b8; --c-retiro: #4ac98a; --c-meson: #c9a06b;
}
.card.canal-flex    { border-left: 5px solid var(--c-flex); }
.card.canal-agencia { border-left: 5px solid var(--c-agencia); }
.card.canal-full    { border-left: 5px solid var(--c-full); }
.card.canal-web     { border-left: 5px solid var(--c-web); }
.card.canal-retiro  { border-left: 5px solid var(--c-retiro); }
.card.canal-meson   { border-left: 5px solid var(--c-meson); }
.canal-cinta { border-left: 5px solid var(--borde); padding-left: 10px;
  margin-bottom: 6px; }
.canal-cinta.canal-flex    { border-color: var(--c-flex); }
.canal-cinta.canal-agencia { border-color: var(--c-agencia); }
.canal-cinta.canal-full    { border-color: var(--c-full); }
.canal-cinta.canal-web     { border-color: var(--c-web); }
.canal-cinta.canal-retiro  { border-color: var(--c-retiro); }
.canal-cinta.canal-meson   { border-color: var(--c-meson); }
.pill.canal-flex    { background: #4a3f15; color: var(--c-flex); }
.pill.canal-agencia { background: #4a3115; color: var(--c-agencia); }
.pill.canal-full    { background: #322a52; color: var(--c-full); }
.pill.canal-web     { background: #1d3547; color: #9ed0ec; }
.pill.canal-retiro  { background: #1d4030; color: var(--c-retiro); }
.pill.canal-meson   { background: #40331f; color: var(--c-meson); }
/* B4d: "ML" genérico (módulo Publicación: banda del canal FALTANTE) */
.card.canal-ml { border-left: 5px solid var(--c-flex); }
.pill.canal-ml { background: #4a3f15; color: var(--c-flex); }
.pareja { font-size: 15px; margin-top: 4px; }
[x-cloak] { display: none !important; }
a.stat { text-decoration: none; color: var(--texto); display: block; }

/* B4f/F3: evidencias de despacho */
.evidencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; }
.evidencias a { display: block; text-decoration: none; color: var(--texto2); }
.evidencias img { width: 100%; border-radius: 10px; border: 1px solid var(--borde);
  aspect-ratio: 3/4; object-fit: cover; }

/* B4f/F7: pantallas admin en desktop usan el ancho real; la operación queda
   mobile-first tal cual. */
@media (min-width: 1100px) {
  body.ancho main { max-width: 1360px; }
  body.ancho .lista-ancha { display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; align-items: start; }
  body.ancho .lista-ancha .card { margin-bottom: 0; }
  body.ancho .filtros-linea { display: flex; gap: 12px; align-items: end; }
  body.ancho .filtros-linea > div { flex: 1; }
  .informe-md table.t { font-size: 13.5px; }
}
.informe-md h2 { margin-top: 18px; }
.informe-md h3 { font-size: 14px; color: var(--texto2); margin: 12px 0 6px; }
.informe-md ul { margin: 6px 0 6px 20px; }
.informe-md p { margin: 6px 0; }
.informe-md table.t { margin: 8px 0; }

.err { background: #4a2320; border: 1px solid #7a3a33; color: #f5b9af;
  padding: 12px 14px; border-radius: 12px; margin: 8px 0; font-weight: 600; }
.okmsg { background: #1d4030; border: 1px solid #2e6647; color: #a9e6c3;
  padding: 12px 14px; border-radius: 12px; margin: 8px 0; font-weight: 600; }

.abajo {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; background: #14171a; border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}
.abajo a { flex: 1; text-align: center; padding: 9px 2px 8px; color: var(--texto2);
  text-decoration: none; font-size: 11.5px; font-weight: 600; }
.abajo a span { display: block; font-size: 19px; margin-bottom: 1px; }
.abajo a.act { color: #7db3d0; }

table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; color: var(--texto2); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px; padding: 6px 8px;
  border-bottom: 1px solid var(--borde); }
table.t td { padding: 8px; border-bottom: 1px solid #2b3137; }
.num-t { text-align: right; font-variant-numeric: tabular-nums; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  padding: 12px; text-align: center; }
.stat b { display: block; font-size: 26px; }
.stat span { color: var(--texto2); font-size: 12.5px; }

#camara-modal { position: fixed; inset: 0; background: #000c; z-index: 50;
  display: flex; align-items: center; justify-content: center; }
.camara-caja { width: min(94vw, 480px); background: var(--panel); border-radius: 16px;
  padding: 12px; }
#camara-lector { border-radius: 10px; overflow: hidden; }

/* Escáner (MARCADOR 2026-09-10). El video ocupa todo el marco: se lee el cuadro
   completo, no un recuadro — no hay que encuadrar el código. La mira es solo
   una guía visual, NO recorta la zona de lectura. */
.cam-marco { position: relative; border-radius: 12px; overflow: hidden;
  background: #000; aspect-ratio: 16/10; }
#cam-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* MARCADOR 2026-09-11: [hidden] necesita !important porque #cam-video es un
   selector de ID y su display:block le ganaba al [hidden] del navegador. Por eso
   en el iPhone el video vacío quedaba VISIBLE TAPANDO al de html5-qrcode y la
   cámara se veía negra. */
#cam-video[hidden], #camara-lector[hidden] { display: none !important; }
/* el modo compatible (iOS) monta su propio <video> acá adentro */
#camara-lector { width: 100%; height: 100%; }
#camara-lector video { width: 100% !important; height: 100% !important;
  object-fit: cover; display: block; }
#camara-lector img, #camara-lector > div > img { display: none; }
.cam-mira { position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; }
.cam-mira i { display: block; width: 78%; height: 34%; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.22); }
.cam-mira i::after { content: ""; position: absolute; left: 11%; right: 11%;
  top: 50%; height: 2px; background: rgba(233,77,70,.85); }
.cam-modo { margin-top: 9px; font-size: 13px; color: var(--texto2); }
.cam-estado { margin: 3px 0 9px; font-size: 14px; font-weight: 600;
  min-height: 20px; }
.cam-controles { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.cam-zoom { flex: 1; }
#cam-luz.on { background: var(--ambar); color: #1d2125; }

/* Avance del picking dentro de la cámara (MARCADOR 2026-09-12). El flash de
   confirmación general anima el <body>, que con el modal abierto NO se ve: por
   eso la caja de la cámara destella por su cuenta. */
.cam-avance { border-top: 1px solid var(--borde); margin: 2px 0 10px;
  padding-top: 9px; }
.cam-ultimo { font-size: 15px; font-weight: 700; min-height: 20px;
  line-height: 1.25; }
.cam-ultimo.bien { color: var(--verde, #4ea16b); }
.cam-ultimo.mal  { color: var(--rojo, #e94d46); }
.cam-cuenta { font-size: 22px; font-weight: 800; margin: 2px 0 1px; }
.cam-faltan { font-size: 12.5px; color: var(--texto2); line-height: 1.35; }
.camara-caja.cam-ok  { animation: cok .45s; }
.camara-caja.cam-mal { animation: cmal .6s; }
@keyframes cok  { 0% { background: #1d4030; } 100% { background: var(--panel); } }
@keyframes cmal { 0%, 40% { background: #4a2320; } 100% { background: var(--panel); } }

.menu-modulos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-modulos a { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 16px; padding: 18px 14px; text-decoration: none; color: var(--texto);
  font-weight: 700; font-size: 15.5px; position: relative; }
.menu-modulos a small { display: block; color: var(--texto2); font-weight: 500;
  font-size: 12.5px; margin-top: 4px; }
.menu-modulos .badge { position: absolute; top: 10px; right: 12px; background: var(--acento);
  color: #fff; border-radius: 99px; min-width: 24px; text-align: center; padding: 2px 7px;
  font-size: 13px; }
.login-caja { max-width: 360px; margin: 12vh auto 0; }
label.lbl { display: block; color: var(--texto2); font-size: 13px; margin: 12px 0 5px; }
.acciones-flotantes { position: sticky; bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 10; }
details.plegable { margin-top: 10px; }
details.plegable summary { color: var(--texto2); cursor: pointer; padding: 6px 0; }

/* MARCADOR 2026-09-09 (Claude Code): botón de cierre del picking. Aparece solo
   cuando todas las unidades están escaneadas, dentro del parcial que refresca
   HTMX, para que caiga bajo la vista del operador apenas pistolea la última. */
.cierre-listo { margin: 10px 0 4px; }
.btn.grande { width: 100%; font-size: 19px; font-weight: 700; padding: 16px 18px;
  border-radius: 12px; }
.pista-cierre { text-align: center; font-size: 13px; color: var(--texto2);
  margin-top: 6px; }

/* MARCADOR 2026-09-09 (Claude Code): un pedido armado se veía idéntico a uno por
   armar. Ahora la tarjeta hecha se lee como hecha de un vistazo. */
.card.hecha { border-left-color: var(--ok); opacity: .74; }
.card.hecha .titulo { color: var(--texto2); }
.card.hecha:hover { opacity: 1; }
.card.recien { opacity: 1; box-shadow: 0 0 0 2px var(--ok); }

/* Selector de lista: una sola visible a la vez. Mantiene el peso visual de las
   tarjetas .stat que había antes (número grande arriba, etiqueta abajo) — como
   pestañas chicas se perdían. El activo se pinta con el color de su estado:
   azul = por armar, verde = ya armado. */
.segmentos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 12px 0; }
.seg { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 15px 12px; text-align: center; cursor: pointer;
  color: var(--texto2); font-family: inherit; transition: border-color .12s; }
.seg b { display: block; font-size: 30px; font-weight: 700; line-height: 1.15;
  color: var(--texto); font-variant-numeric: tabular-nums; }
.seg span { display: block; font-size: 12.5px; margin-top: 2px; }
.seg:hover { border-color: var(--texto2); }
.seg.cola.on { background: rgba(74,144,184,.18); border-color: var(--acento-claro);
  box-shadow: inset 0 0 0 1px var(--acento-claro); }
.seg.cola.on b, .seg.cola.on span { color: #cfe6ff; }
.seg.armados.on { background: rgba(46,158,91,.18); border-color: var(--ok);
  box-shadow: inset 0 0 0 1px var(--ok); }
.seg.armados.on b, .seg.armados.on span { color: #b6f0c6; }

/* Ficha de producto: dónde está y qué ofrece cada canal, con los nombres
   escritos. Antes esto era un resumen tipo "L25 W0" (MARCADOR 2026-09-09). */
.dondes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px; margin: 8px 0 4px; }
.donde-l { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 11px 12px; }
.donde-l .et { display: block; font-size: 12.5px; color: var(--texto2); }
.donde-l b { display: block; font-size: 25px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.donde-l .de { display: block; font-size: 11.5px; color: var(--texto2);
  opacity: .8; }

/* Piso de precio ML (MARCADOR 2026-09-09). El número grande es el límite: bajo
   eso se pierde plata. Rojo a propósito — es un tope, no una sugerencia. */
.pisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; margin: 8px 0; }
.piso-c { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 13px; padding: 13px 14px; }
.piso-t { font-size: 13px; color: var(--texto2); font-weight: 600; }
.piso-n { font-size: 31px; font-weight: 700; line-height: 1.2; color: #f0a3a0;
  font-variant-numeric: tabular-nums; }
.piso-e { font-size: 11.5px; color: var(--texto2); }
.piso-o { margin-top: 7px; font-size: 13.5px; }
.piso-o b { color: #7fd6a4; }
.piso-d { margin-top: 7px; font-size: 11.5px; color: var(--texto2);
  border-top: 1px solid var(--borde); padding-top: 6px; }
tr.capa-actual td { background: rgba(63,185,80,.12); font-weight: 600; }

.piso-av { margin-top: 7px; font-size: 11.5px; color: #f2d79a;
  background: rgba(201,147,46,.20); border-radius: 7px; padding: 6px 8px; }

/* MARCADOR 2026-09-11: regla global para <a>. Tres veces ya un enlace sin color
   heredó el azul del navegador (#0000EE sobre #1d2125 = contraste 1,7:1, ilegible).
   Con esto, cualquier enlace nuevo nace legible. */
a { color: var(--acento-claro); }
a:hover { color: #7fc4e8; }

/* Resultados de /alias: la fila ES el botón que asocia (MARCADOR 2026-09-14).
   Antes la confirmación vivía debajo de la lista y quedaba fuera de pantalla. */
.op-form { margin: 0; }
button.linea-pick.opcion { width: 100%; text-align: left; font: inherit;
  color: inherit; background: rgba(255,255,255,.05); border: 1px solid var(--borde);
  cursor: pointer; }
button.linea-pick.opcion:hover, button.linea-pick.opcion:focus-visible {
  border-color: var(--acento-claro); background: rgba(74,144,184,.16); }
button.linea-pick.opcion:active { transform: scale(.995); }
button.linea-pick.opcion .cnt { color: var(--acento-claro); font-weight: 700;
  white-space: nowrap; font-size: .85rem; }
button.linea-pick.opcion .nom { display: block; }
button.linea-pick.opcion .ean { display: block; }