:root {
  --tinta: #15171a;
  --tinta-2: #3d4248;
  --tinta-3: #6b7178;
  --linea: #e2ded6;
  --linea-2: #ece9e3;
  --fondo: #f5f3ef;
  --papel: #ffffff;
  --acento: #f2b300;
  --acento-tinta: #6b4d00;
  --acento-suave: #fff4d1;
  --barra: #3d4248;
  --ok: #1f7a4d;       --ok-suave: #e3f3ea;
  --alerta: #a15c00;   --alerta-suave: #fdf0dc;
  --grave: #b3261e;    --grave-suave: #fbe6e4;
  --radio: 10px;
  --sombra: 0 1px 2px rgb(21 23 26 / .06), 0 4px 16px rgb(21 23 26 / .05);
  --nav-ancho: 200px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 15px/1.45 "Barlow", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h1 { font: 700 30px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .01em; }
h2 { font-size: 17px; font-weight: 700; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; background: var(--tinta); color: #fff;
}
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-logo { width: 34px; height: 34px; color: #fff; stroke: none; }
.marca-logo circle:first-child { stroke: #fff; }
.marca-nombre { font: 700 19px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; white-space: nowrap; }
.marca-sub { font-size: 12px; color: #b9bec4; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-acciones { display: flex; align-items: center; gap: 10px; }
.rol { display: flex; background: #2a2d31; border-radius: 8px; padding: 3px; }
.rol button { border: 0; background: none; color: #c9cdd2; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 13px; }
.rol button[aria-checked="true"] { background: var(--acento); color: var(--tinta); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  border: 1px solid transparent; border-radius: 8px; padding: 8px 14px;
  font-weight: 600; font-size: 14px; white-space: nowrap; min-height: 38px;
}
.btn-pri { background: var(--acento); color: var(--tinta); }
.btn-sec { background: var(--papel); border-color: var(--linea); color: var(--tinta); }
.btn-sec:hover { border-color: var(--tinta-3); }
.barra .btn-sec { background: transparent; color: #fff; border-color: #4a4f55; cursor: pointer; }
.barra .btn-sec:hover { border-color: var(--acento); }

/* ---------- Marco y navegación ---------- */
.marco { display: grid; grid-template-columns: var(--nav-ancho) 1fr; min-height: calc(100vh - var(--alto-barra, 58px)); }
.nav {
  position: sticky; top: var(--alto-barra, 58px); align-self: start; height: calc(100vh - var(--alto-barra, 58px));
  display: flex; flex-direction: column; gap: 2px; padding: 16px 10px;
  border-right: 1px solid var(--linea); background: var(--papel);
}
.nav button {
  display: flex; align-items: center; gap: 10px; border: 0; background: none;
  padding: 10px 12px; border-radius: 8px; text-align: left; font-weight: 600; color: var(--tinta-2);
}
.nav button:hover { background: var(--linea-2); }
.nav button[aria-current="page"] { background: var(--tinta); color: #fff; }
.nav button[aria-current="page"] svg { color: var(--acento); }
body.app-tienda .solo-gerencia { display: none !important; }

main { padding: 24px 28px 60px; min-width: 0; max-width: 1280px; }
.encabezado { margin-bottom: 20px; }
.bajada { margin: 6px 0 0; color: var(--tinta-3); max-width: 70ch; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; }
.kpi-rotulo { font-size: 13px; color: var(--tinta-3); font-weight: 600; }
.kpi-valor { font: 700 32px/1.1 "Barlow Condensed", sans-serif; margin-top: 6px; }
.kpi-valor small { font-size: 18px; font-weight: 600; color: var(--tinta-3); margin-left: 2px; }
.kpi-nota { font-size: 13px; color: var(--tinta-3); margin-top: 4px; }
.kpi-destacado { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.kpi-destacado .kpi-rotulo, .kpi-destacado .kpi-nota, .kpi-destacado small { color: #b9bec4; }
.kpi-destacado .kpi-valor { color: var(--acento); }
.kpi-enlace { border: 0; background: none; padding: 0; color: var(--acento); text-decoration: underline; font-size: 13px; text-align: left; }

/* ---------- Paneles y barras ---------- */
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; min-width: 0; }
.panel-sub { margin: 4px 0 14px; font-size: 13px; color: var(--tinta-3); }
.panel-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }

.barras { display: flex; flex-direction: column; gap: 2px; }
.barra-fila {
  display: grid; grid-template-columns: minmax(96px, 150px) 1fr auto; align-items: center; gap: 10px;
  border: 0; background: none; padding: 6px 6px; border-radius: 6px; text-align: left; width: 100%;
}
.barra-fila:hover { background: var(--linea-2); }
.barra-nombre { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-pista { height: 14px; position: relative; }
.barra-relleno { height: 100%; background: var(--barra); border-radius: 0 4px 4px 0; min-width: 2px; }
.barra-fila:hover .barra-relleno { background: var(--tinta); }
.barra-valor { font-size: 13px; color: var(--tinta-2); white-space: nowrap; text-align: right; min-width: 104px; }
.barra-valor b { font-weight: 700; color: var(--tinta); }

/* ---------- Tablas ---------- */
.tabla-envoltura { overflow-x: auto; margin: 0 -18px -18px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 12px; border-bottom: 1px solid var(--linea); background: #faf9f6; white-space: nowrap;
}
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
.tabla tr.fila { cursor: pointer; }
.tabla tr.fila:hover td { background: #faf8f2; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla th:first-child, .tabla td:first-child { padding-left: 18px; }
.tabla th:last-child, .tabla td:last-child { padding-right: 18px; }
.ref { font-size: 12px; color: var(--tinta-3); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.nombre-prod { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--linea-2); color: var(--tinta-2); white-space: nowrap; }
.chip-medida { background: var(--acento-suave); color: var(--acento-tinta); font-weight: 600; }
.chip-ok { background: var(--ok-suave); color: var(--ok); font-weight: 600; }
.nota-ficha a { color: var(--tinta); font-weight: 600; }

.stock { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.stock-ultima::before { background: var(--alerta); }
.stock-agotado { color: var(--grave); }
.stock-agotado::before { background: var(--grave); }

/* ---------- Buscador y filtros ---------- */
.buscador {
  display: flex; align-items: center; gap: 10px; background: var(--papel);
  border: 2px solid var(--tinta); border-radius: 12px; padding: 0 14px; height: 54px;
}
.buscador svg { width: 22px; height: 22px; color: var(--tinta-3); }
.buscador input { flex: 1; border: 0; outline: 0; background: none; font-size: 17px; min-width: 0; height: 100%; }
.buscador input::-webkit-search-cancel-button { display: none; }
.limpiar { border: 0; background: var(--linea-2); width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; }

.cats { display: flex; gap: 8px; margin: 14px 0 0; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.cat {
  flex: none; border: 1px solid var(--linea); background: var(--papel); border-radius: 999px;
  padding: 7px 14px; font-weight: 600; font-size: 14px; display: inline-flex; gap: 6px; align-items: center;
}
.cat span { color: var(--tinta-3); font-weight: 500; font-size: 13px; }
.cat[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cat[aria-selected="true"] span { color: #b9bec4; }

.facetas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.faceta { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding-bottom: 2px; }
.faceta-rotulo { font-size: 12px; font-weight: 700; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; flex: none; margin-right: 4px; }
.faceta button {
  flex: none; border: 1px solid var(--linea); background: var(--papel); border-radius: 6px;
  padding: 4px 10px; font-size: 13px; font-weight: 600;
}
.faceta button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--tinta); }
.faceta-rin button { min-width: 48px; font-size: 15px; }
.faceta-nota { margin: 0; font-size: 12px; color: var(--tinta-3); }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 14px; }
.filtros label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.filtros select {
  min-width: 150px; max-width: 220px; height: 38px; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel); padding: 0 8px; font-size: 14px; color: var(--tinta);
}
.filtros .btn { margin-left: auto; }
.filtro-activo {
  margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--acento-suave); color: var(--acento-tinta); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 600;
}
.filtro-activo button { border: 0; background: none; text-decoration: underline; color: inherit; font-weight: 600; padding: 0; }
.resultado-resumen { margin: 16px 0 8px; font-size: 14px; color: var(--tinta-3); }
.resultado-resumen b { color: var(--tinta); }
.ver-mas { display: flex; margin: 16px auto 0; min-width: 200px; }

.lista-tabla { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.lista-tabla .tabla-envoltura { margin: 0; }
.tarjetas { display: none; }
.vacio { background: var(--papel); border: 1px dashed var(--linea); border-radius: var(--radio); padding: 40px 20px; text-align: center; color: var(--tinta-3); }
.vacio b { display: block; color: var(--tinta); font-size: 17px; margin-bottom: 4px; }

/* ---------- Ficha ---------- */
.velo { position: fixed; inset: 0; background: rgb(21 23 26 / .45); z-index: 40; }
.ficha {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); z-index: 41;
  background: var(--papel); overflow-y: auto; box-shadow: -8px 0 32px rgb(0 0 0 / .18);
  display: flex; flex-direction: column;
}
.ficha-cab { padding: 18px 20px 16px; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--papel); z-index: 1; }
.ficha-cerrar { position: absolute; top: 12px; right: 12px; border: 0; background: var(--linea-2); width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1; }
.ficha-cab h2 { font-size: 20px; padding-right: 40px; }
.ficha-cuerpo { padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 18px; }
.ficha-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cifra { border: 1px solid var(--linea); border-radius: 10px; padding: 12px; }
.cifra-rotulo { font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.cifra-valor { font: 700 26px/1.15 "Barlow Condensed", sans-serif; margin-top: 2px; }
.cifra-nota { font-size: 12px; color: var(--tinta-3); }
.cifra-precio { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cifra-precio .cifra-rotulo, .cifra-precio .cifra-nota { color: #b9bec4; }
.cifra-precio .cifra-valor { color: var(--acento); }
.ficha h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); margin-bottom: 8px; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.datos dt { color: var(--tinta-3); }
.datos dd { margin: 0; font-weight: 600; }
.datos dd.falta { color: var(--alerta); font-weight: 500; }
.gerencia-caja { background: #faf8f2; border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; }
.alternativa {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; width: 100%; text-align: left;
  border: 1px solid var(--linea); background: var(--papel); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px;
}
.alternativa:hover { border-color: var(--tinta-3); }
.alternativa .nombre-prod { font-size: 14px; }
.alt-der { text-align: right; flex: none; font-size: 13px; }
.alt-der b { display: block; font-size: 15px; }
.nota-ficha { font-size: 13px; color: var(--tinta-3); margin: 0; }
.ficha-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Diagnóstico ---------- */
.hallazgos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.hallazgo { background: var(--papel); border: 1px solid var(--linea); border-left-width: 4px; border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.hallazgo-grave { border-left-color: var(--grave); }
.hallazgo-alerta { border-left-color: var(--alerta); }
.hallazgo-info { border-left-color: var(--tinta-3); }
.hallazgo-ok { border-left-color: var(--ok); }
.hallazgo-cab { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hallazgo-grave .hallazgo-cab { color: var(--grave); }
.hallazgo-alerta .hallazgo-cab { color: var(--alerta); }
.hallazgo-info .hallazgo-cab { color: var(--tinta-3); }
.hallazgo-ok .hallazgo-cab { color: var(--ok); }
.hallazgo-cab svg { width: 16px; height: 16px; }
.hallazgo-num { font: 700 34px/1 "Barlow Condensed", sans-serif; }
.hallazgo-num small { font: 600 15px "Barlow", sans-serif; color: var(--tinta-3); margin-left: 6px; }
.hallazgo h3 { font-size: 16px; }
.hallazgo p { margin: 0; font-size: 14px; color: var(--tinta-2); }
.hallazgo .btn { align-self: flex-start; margin-top: 6px; min-height: 34px; padding: 6px 12px; }

/* ---------- Aviso ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: var(--sombra);
  font-weight: 600; max-width: calc(100% - 32px);
}

/* ---------- Celular ---------- */
@media (max-width: 1000px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .rejilla-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .barra { padding: 8px 12px; gap: 8px; }
  .marca { gap: 8px; }
  .marca-logo { width: 30px; height: 30px; }
  .marca-nombre { font-size: 16px; line-height: 1.05; white-space: normal; max-width: 7.5em; }
  .marca-sub { display: none; }
  .barra-acciones { gap: 6px; }
  body.app-tienda .nav { display: none; }
  body.app-tienda main { padding-bottom: 40px; }
  .btn-subir span { display: none; }
  .btn-subir { padding: 0; width: 38px; }
  .rol button { padding: 6px 10px; }
  .marco { display: block; }
  .nav {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 30;
    flex-direction: row; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--linea);
  }
  .nav button { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 8px; flex: 1; align-items: center; }
  .nav button[aria-current="page"] { background: none; color: var(--tinta); }
  .nav button[aria-current="page"] svg { color: var(--tinta); background: var(--acento); border-radius: 999px; padding: 2px 12px; width: 44px; height: 24px; }
  main { padding: 16px 16px 96px; }
  h1 { font-size: 26px; }
  .kpi { padding: 12px; }
  .kpi-valor { font-size: 26px; }
  .panel { padding: 14px; }
  .tabla-envoltura { margin: 0 -14px -14px; }
  .barra-fila { grid-template-columns: minmax(80px, 110px) 1fr; }
  .barra-valor { grid-column: 1 / -1; text-align: left; min-width: 0; margin-top: -4px; }
  .filtros select { min-width: 0; max-width: none; width: 100%; }
  .filtros label { flex: 1 1 140px; }
  .filtros .btn { margin-left: 0; width: 100%; }
  .cats, .faceta { scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .cats::-webkit-scrollbar, .faceta::-webkit-scrollbar { display: none; }
  .buscador input { font-size: 16px; }
  .buscador { position: sticky; top: calc(var(--alto-barra, 52px) + 8px); z-index: 15; height: 50px; box-shadow: 0 8px 24px rgb(21 23 26 / .10); }
  .lista-tabla { display: none; }
  .tarjetas { display: flex; flex-direction: column; gap: 8px; }
  .tarjeta {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; width: 100%; text-align: left;
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px;
  }
  .tarjeta-der { text-align: right; }
  .tarjeta-precio { font: 700 20px/1.1 "Barlow Condensed", sans-serif; }
  .tarjeta-iva { font-size: 11px; color: var(--tinta-3); }
  .ficha { top: auto; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .ficha-cab { border-radius: 16px 16px 0 0; }
  .hallazgos { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .rol button { font-size: 12px; padding: 5px 8px; }
  .kpi-valor { font-size: 23px; }
}

/* =====================================================================
   Movimiento y acabados
   ===================================================================== */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --paso-labrado: 22.63px; }
body { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--acento); color: var(--tinta); }

@keyframes entrar  { from { opacity: 0; transform: translateY(10px); } }
@keyframes subir   { from { opacity: 0; transform: translateY(16px); } }
@keyframes crecer  { from { transform: scaleX(0); } }
@keyframes girar   { from { transform: rotate(-270deg); } }
@keyframes rodar   { to { transform: rotate(360deg); } }
@keyframes labrado { to { background-position: var(--paso-labrado) 0; } }
@keyframes latido  { 0% { box-shadow: 0 0 0 0 rgb(161 92 0 / .55); } 70%, 100% { box-shadow: 0 0 0 7px rgb(161 92 0 / 0); } }

/* Barra superior: franja tipo labrado de llanta */
.barra { box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset; }
.barra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--acento) 0 8px, var(--tinta) 8px 16px);
}
.marca-logo circle:first-child { transform-box: fill-box; transform-origin: center; animation: girar 1.4s var(--ease) both; }
.leyendo .marca-logo circle:first-child { animation: rodar .8s linear infinite; }
.leyendo .barra::after { animation: labrado .45s linear infinite; }
.leyendo main { opacity: .45; pointer-events: none; filter: saturate(.6); }
main { transition: opacity .25s, filter .25s; }

/* Interacción: todo responde al tacto */
button, .btn, select, .buscador, .kpi, .panel, .hallazgo, .tarjeta, .alternativa, .cifra { transition: background-color .18s, border-color .18s, color .18s, box-shadow .25s var(--ease), transform .25s var(--ease); }
button:active:not(:disabled), .btn:active { transform: scale(.97); }
.btn-pri { background: linear-gradient(180deg, #ffc62e, var(--acento)); box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 2px 8px rgb(242 179 0 / .25); }
.btn-pri:hover { box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 6px 18px rgb(242 179 0 / .4); }
.rol button[aria-checked="true"] { box-shadow: 0 2px 10px rgb(242 179 0 / .35); }
.cat[aria-selected="true"] { box-shadow: 0 4px 14px rgb(21 23 26 / .18); }
.faceta button[aria-pressed="true"] { box-shadow: 0 3px 10px rgb(242 179 0 / .35); }
select:focus-visible { border-color: var(--tinta); }

/* Buscador con halo ámbar al enfocar */
.buscador:focus-within { box-shadow: 0 0 0 4px rgb(242 179 0 / .35), 0 8px 24px rgb(21 23 26 / .08); }
.buscador:focus-within svg { color: var(--tinta); }

/* KPIs con profundidad */
.kpi { position: relative; overflow: hidden; }
.kpi-destacado {
  background: radial-gradient(120% 90% at 100% 0%, rgb(242 179 0 / .22), transparent 55%), linear-gradient(160deg, #1d2024, var(--tinta));
}
.kpi-destacado::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(-45deg, var(--acento) 0 6px, transparent 6px 12px); opacity: .8;
}
.kpi-valor small { margin-left: 4px; }

/* Barras del resumen */
.barra-relleno { transform-origin: left center; background: linear-gradient(90deg, #4a5057, var(--tinta)); }
.barra-fila:hover .barra-relleno { background: linear-gradient(90deg, #ffc62e, var(--acento)); }

/* Filas de la tabla: marcador ámbar al pasar */
.tabla tr.fila td { transition: background-color .15s; }
.tabla tr.fila td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .2s var(--ease), background-color .15s; }
.tabla tr.fila:hover td:first-child { box-shadow: inset 3px 0 0 var(--acento); }

/* Existencias: la última unidad late */
.stock-ultima::before { animation: latido 1.8s ease-out infinite; }
.chip-ok { box-shadow: 0 0 0 1px rgb(31 122 77 / .12) inset; }

@media (hover: hover) {
  .kpi:hover, .hallazgo:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(21 23 26 / .09); }
  .alternativa:hover { transform: translateX(3px); box-shadow: var(--sombra); }
  .cat:hover:not([aria-selected="true"]), .faceta button:hover:not([aria-pressed="true"]) { border-color: var(--tinta-3); }
  .btn-sec:hover { box-shadow: var(--sombra); }
}

/* Entradas escalonadas (se disparan con .animar desde app.js) */
.vista.animar { animation: entrar .45s var(--ease) both; }
.animar .kpi, .animar .panel, .animar .hallazgo { animation: subir .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.animar .rejilla-2 .panel:nth-child(2) { animation-delay: 90ms; }
.animar .barra-relleno { animation: crecer 1s var(--ease) both; animation-delay: calc(250ms + var(--i, 0) * 60ms); }
.animar .esc { animation: subir .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 32ms); }

/* Ficha: entra deslizando, con velo desenfocado */
.velo { opacity: 0; transition: opacity .3s var(--ease); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.velo.abierta { opacity: 1; }
.ficha { transform: translateX(104%); transition: transform .42s var(--ease); will-change: transform; overscroll-behavior: contain; }
.ficha.abierta { transform: none; }
.ficha.abierta .ficha-cuerpo > * { animation: subir .5s var(--ease) both; }
.ficha-cuerpo > :nth-child(1) { animation-delay: 80ms !important; }
.ficha-cuerpo > :nth-child(2) { animation-delay: 130ms !important; }
.ficha-cuerpo > :nth-child(3) { animation-delay: 180ms !important; }
.ficha-cuerpo > :nth-child(4) { animation-delay: 230ms !important; }
.ficha-cuerpo > :nth-child(n+5) { animation-delay: 280ms !important; }
.cifra-precio { background: radial-gradient(120% 100% at 100% 0%, rgb(242 179 0 / .22), transparent 60%), linear-gradient(160deg, #1d2024, var(--tinta)); }
.ficha-cerrar:hover { background: var(--tinta); color: #fff; }
.ficha-asa { display: none; }
body.sin-scroll { overflow: hidden; }

/* Aviso: sube desde abajo */
.aviso { opacity: 0; transform: translate(-50%, 16px); transition: opacity .3s var(--ease), transform .35s var(--ease); display: flex; align-items: center; gap: 10px; }
.aviso::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); flex: none; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .ficha { transform: translateY(104%); max-height: 90vh; max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom); }
  .ficha.abierta { transform: none; }
  .ficha-cab { padding-top: 10px; touch-action: none; }
  .ficha-asa { display: block; width: 42px; height: 5px; border-radius: 999px; background: var(--linea); margin: 0 auto 12px; }
  .ficha-cerrar { top: 18px; }
  .nav { background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
  .nav button svg { transition: background-color .25s var(--ease), padding .25s var(--ease), width .25s var(--ease); }
  .tarjeta:active { background: #faf8f2; }
  .aviso { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.app-tienda .aviso { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .kpi-destacado { grid-column: 1 / -1; }
  .kpi-destacado .kpi-valor { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* ---------- Especificaciones técnicas en la ficha ---------- */
.spec { display: flex; flex-direction: column; gap: 12px; }
.spec h3 { margin-bottom: 0; }
.spec-origen { margin: 0; font-size: 13px; color: var(--tinta-3); }
.spec-nombre { margin: 0; font-weight: 600; }
.dibujo {
  width: 100%; height: auto; max-height: 220px; border-radius: 10px;
  background:
    linear-gradient(rgb(21 23 26 / .045) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgb(21 23 26 / .045) 1px, transparent 1px) 0 0 / 16px 16px,
    #fbfaf7;
  border: 1px solid var(--linea);
}
.dibujo .pieza { fill: #eceae4; stroke: var(--tinta-2); stroke-width: 1.5; }
.dibujo .tapa { fill: var(--tinta-2); }
.dibujo .rosca { fill: var(--tinta-3); }
.dibujo .hueco { fill: #fbfaf7; stroke: var(--tinta-3); stroke-width: 1; stroke-dasharray: 4 3; }
.dibujo .pliegue { stroke: rgb(61 66 72 / .35); stroke-width: 1; }
.dibujo .cota-linea { stroke: var(--acento-tinta); stroke-width: 1; }
.dibujo .cota-punta { fill: var(--acento-tinta); }
.dibujo { stroke: none; fill: none; }
.dibujo .cota { font: 600 11px "Barlow", sans-serif; fill: var(--acento-tinta); stroke: none; text-anchor: middle; paint-order: stroke; }
.dibujo .cota { stroke: #fbfaf7; stroke-width: 3px; stroke-linejoin: round; }
.spec-grupo { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; }
.spec-titulo { font-size: 12px; font-weight: 700; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.spec-grupo .datos { font-size: 13.5px; }
.apps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.apps li span { display: block; font-size: 11px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .03em; }
.apps-mas { margin-top: 8px; }
.apps-mas summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--tinta); text-decoration: underline; list-style: none; }
.apps-mas summary::-webkit-details-marker { display: none; }
.apps-mas[open] summary { margin-bottom: 8px; }
.apps-texto { margin: 0; font-size: 13.5px; line-height: 1.5; }
.chip-ficha { background: #e8eef7; color: #2c4a73; font-weight: 600; }

/* =====================================================================
   App con usuarios: entrada, barra con el usuario, mostrador y empleados
   ===================================================================== */
.yo { display: flex; align-items: center; gap: 8px; }
.yo-nombre { font-size: 13px; color: #c9cdd2; font-weight: 600; max-width: 14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra a.btn { text-decoration: none; }

/* Mostrador: sin menú lateral, el buscador ocupa todo */
body.app-tienda .marco { display: block; }
body.app-tienda main { margin: 0 auto; max-width: 1180px; }
.aviso-jefe {
  background: var(--acento-suave); color: var(--acento-tinta); border: 1px solid #f3dd9a; border-radius: var(--radio);
  padding: 10px 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px;
}

/* ---------- Entrada ---------- */
body.en-entrada {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(90% 60% at 100% 0%, rgb(242 179 0 / .16), transparent 60%),
    linear-gradient(170deg, #1d2024, var(--tinta) 55%);
}
.entrada { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; }
.entrada-marca { display: flex; align-items: center; gap: 12px; color: #fff; }
.entrada-marca .marca-logo { width: 46px; height: 46px; }
.entrada-marca .marca-nombre { font-size: 24px; }
.entrada-sub { font-size: 13px; color: #b9bec4; margin-top: 3px; }
.entrada-caja {
  position: relative; overflow: hidden;
  background: var(--papel); border-radius: 16px; padding: 26px 22px 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 60px rgb(0 0 0 / .35); animation: subir .6s var(--ease) both;
}
.entrada-caja::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: repeating-linear-gradient(-45deg, var(--acento) 0 8px, var(--tinta) 8px 16px);
}
.entrada-caja h1 { font-size: 28px; }
.entrada-caja label, .form-empleado label, .clave-nueva label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.entrada-caja input, .form-empleado input, .form-empleado select, .clave-nueva input {
  width: 100%; min-width: 0; border: 1px solid var(--linea); border-radius: 8px; background: #fff; padding: 0 12px; height: 46px; font-size: 16px;
}
.entrada-caja input:focus, .form-empleado input:focus, .form-empleado select:focus, .clave-nueva input:focus { outline: 0; border-color: var(--tinta); box-shadow: 0 0 0 4px rgb(242 179 0 / .3); }
.clave-campo { display: flex; gap: 8px; align-items: stretch; }
.clave-campo input { flex: 1; }
.ver-clave { border: 1px solid var(--linea); background: #fff; border-radius: 8px; width: 46px; flex: none; display: grid; place-items: center; color: var(--tinta-3); }
.ver-clave[aria-pressed="true"] { color: var(--tinta); border-color: var(--tinta); }
.entrada-boton { min-height: 48px; font-size: 16px; margin-top: 4px; }
.entrada-boton:disabled { opacity: .7; cursor: wait; }
.entrada-error, .form-error { margin: 0; background: var(--grave-suave); color: var(--grave); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-weight: 600; }
.entrada-pie { margin: 0; text-align: center; font-size: 13px; color: var(--tinta-3); }
@keyframes sacudir { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.sacudir { animation: sacudir .35s ease both; }

/* ---------- Empleados ---------- */
.encabezado-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.encabezado-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.encabezado-acciones a.btn { text-decoration: none; }
.nav button { position: relative; }
.nav-punto {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--ok); color: #fff; font-size: 12px; font-weight: 700;
}

@keyframes vivo { 0% { box-shadow: 0 0 0 0 rgb(31 122 77 / .5); } 70%, 100% { box-shadow: 0 0 0 7px rgb(31 122 77 / 0); } }
.punto-vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: vivo 1.8s ease-out infinite; flex: none; }

.en-linea {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px;
  background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--ok); border-radius: var(--radio); padding: 12px 16px;
}
.en-linea-titulo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ok); }
.en-linea-nadie { color: var(--tinta-3); font-weight: 600; }
.en-linea:has(.en-linea-nadie) { border-left-color: var(--linea); }
.en-linea-persona { font-size: 14px; color: var(--tinta-2); }
.en-linea-persona b { color: var(--tinta); }

.form-empleado { margin-bottom: 16px; }
.form-empleado.animar { animation: subir .45s var(--ease) both; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-acciones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.form-error { margin-top: 12px; }
.btn-mini { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.clave-campo .btn-mini { min-height: 46px; }
.btn-peligro { color: var(--grave); }
.btn-peligro:hover { border-color: var(--grave); }

.credencial {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
  background: var(--ok-suave); border: 1px solid #b9dfc9; border-radius: var(--radio); padding: 16px 18px;
}
.credencial.animar { animation: subir .5s var(--ease) both; }
.credencial h2 { margin-bottom: 10px; color: var(--ok); }
.credencial .form-acciones { margin-top: 0; }
.credencial-clave { font: 700 20px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }

.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 16px; }
.persona { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.persona-off { background: #faf9f6; }
.persona-off .persona-nombre, .persona-off .avatar { opacity: .55; }
.persona-cab { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--linea-2); color: var(--tinta-2); font: 700 16px/1 "Barlow Condensed", sans-serif; letter-spacing: .03em;
}
.avatar-jefe { background: var(--tinta); color: var(--acento); }
.persona-quien { min-width: 0; flex: 1; }
.persona-nombre { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona-nombre small { font-weight: 500; color: var(--tinta-3); font-size: 13px; }
.persona-usuario { font-size: 13px; color: var(--tinta-3); }
.persona-usuario b { color: var(--tinta-2); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; }
.estado { font-size: 12px; font-weight: 600; color: var(--tinta-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.estado-linea { color: var(--ok); background: var(--ok-suave); padding: 3px 9px; border-radius: 999px; }
.estado-off { color: var(--grave); background: var(--grave-suave); padding: 3px 9px; border-radius: 999px; }
.dispositivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dispositivos li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; background: #faf9f6; border-radius: 8px; color: var(--tinta-2); }
.dispositivos li span:last-child { color: var(--tinta-3); white-space: nowrap; }
.dispositivos li span.disp-linea { color: var(--ok); font-weight: 700; }
.persona-nota { margin: 0; font-size: 13px; color: var(--tinta-3); }
.persona-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.clave-nueva { border-top: 1px solid var(--linea-2); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.clave-nueva .form-acciones { margin-top: 0; }
.clave-nueva .form-error { margin-top: 0; }

.actividad { list-style: none; margin: 0; padding: 0; }
.actividad li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linea-2); font-size: 14px; color: var(--tinta-2); }
.actividad li:last-child { border-bottom: 0; }
.actividad li b { color: var(--tinta); }
.actividad time { color: var(--tinta-3); font-size: 13px; white-space: nowrap; }
.actividad li.actividad-alerta, .actividad li.actividad-alerta b { color: var(--grave); }
.actividad-vacia { color: var(--tinta-3); }
.animar .persona { animation: subir .5s var(--ease) both; }

@media (max-width: 760px) {
  .yo-nombre { display: none; }
  .barra .yo .btn { padding: 6px 10px; min-height: 34px; }
  .barra a.btn { padding: 6px 10px; min-height: 34px; font-size: 13px; }
  .campos { grid-template-columns: 1fr; }
  .personas { grid-template-columns: 1fr; }
  .encabezado-acciones { width: 100%; }
  .encabezado-acciones .btn { flex: 1; }
  .nav-punto { position: absolute; top: 2px; right: calc(50% - 26px); min-width: 17px; height: 17px; font-size: 11px; padding: 0 4px; margin: 0; }
  .credencial { flex-direction: column; align-items: stretch; }
  .actividad li { flex-direction: column; gap: 2px; }
}

/* ---------- Serviteka (sección del jefe) ---------- */
.nav-punto-alerta { background: var(--grave); width: 10px; min-width: 10px; height: 10px; padding: 0; }
.sk-alerta { background: var(--alerta-suave); color: var(--alerta); border-left: 4px solid var(--alerta); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.sk-alerta b { color: var(--tinta); }
.sk-alerta button { margin-top: 8px; }
.sk-cuerpo { margin-top: 16px; display: grid; gap: 16px; }
.sk-cuerpo .kpis { margin-bottom: 0; }
.sk-estado { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--linea-2); color: var(--tinta-2); }
.sk-estado.firmada { background: var(--acento-suave); color: var(--acento-tinta); }
.sk-estado.entregada { background: var(--ok-suave); color: var(--ok); }
.sk-estado.por_firmar { background: #e8eef7; color: #2c4a73; }
.sk-estado.anulada { background: var(--grave-suave); color: var(--grave); }
.sk-estado.vencida { background: var(--grave-suave); color: var(--grave); }
.sk-placa { font: 700 17px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; background: var(--acento); color: var(--tinta); border-radius: 4px; padding: 3px 7px; display: inline-block; }
.sk-sub { font-size: 13px; color: var(--tinta-3); }
.sk-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sk-filtros .buscador { flex: 1; min-width: 220px; margin: 0; }
.sk-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.sk-form label small { font-weight: 400; color: var(--tinta-3); }
.sk-form label.falta { color: var(--grave); }
.sk-form label.falta input, .sk-form label.falta textarea { border-color: var(--grave); }
.sk-form input, .sk-form select, .sk-form textarea {
  width: 100%; min-width: 0; border: 1px solid var(--linea); border-radius: 8px; background: #fff; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--tinta);
}
.sk-form input, .sk-form select { height: 46px; padding-top: 0; padding-bottom: 0; }
.sk-form input:focus, .sk-form select:focus, .sk-form textarea:focus { outline: 0; border-color: var(--tinta); box-shadow: 0 0 0 4px rgb(242 179 0 / .3); }
.sk-form .ancho { grid-column: 1 / -1; }
.sk-lista { list-style: none; margin: 0; padding: 0; }
.sk-lista > li { padding: 12px 0; border-bottom: 1px solid var(--linea-2); display: grid; gap: 4px; }
.sk-lista > li:last-child { border-bottom: 0; }
.sk-lista .sk-fila { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.sk-cita { margin: 0; padding: 8px 12px; border-left: 3px solid var(--linea); color: var(--tinta-2); white-space: pre-wrap; }
.sk-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.sk-acciones a.btn { text-decoration: none; }
.sk-vacio { color: var(--tinta-3); margin: 0; }
.sk-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.sk-datos dt { color: var(--tinta-3); font-size: 13px; }
.sk-datos dd { margin: 0; }
.tabla a.sk-abrir { color: inherit; text-decoration: none; }
@media (max-width: 760px) {
  .sk-tabla-envoltura .tabla .sk-ocultar { display: none; }
  .sk-datos { grid-template-columns: 1fr; gap: 0; }
  .sk-datos dd { margin-bottom: 8px; }
}
@media (max-width: 420px) {
  .nav button { padding: 6px 2px; min-width: 0; }
}
.persona-gps { display: inline-block; margin-top: 2px; font-size: 13px; color: var(--ok); font-weight: 600; text-decoration: none; white-space: nowrap; }
.persona-gps::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 5px; vertical-align: 1px; }

/* ---------- App instalable ---------- */
.barra [data-instalar] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.entrada-instalar { width: 100%; }
@media (max-width: 760px) {
  .barra [data-instalar] span { display: none; }
  .barra [data-instalar] { padding: 0; width: 38px; }
}