/* ══════════════════════════════════════════════════════════
   QENKO · Sistema de diseño
   ══════════════════════════════════════════════════════════ */
:root{
  /* Base */
  --qk-piedra:      #171B22;
  --qk-piedra-alta: #212733;
  --qk-piedra-borde:#2E3644;
  --qk-niebla:      #EDF0F4;
  --qk-blanco:      #FFFFFF;
  --qk-niebla-borde:#D5DBE4;

  /* Marca */
  --qk-oro:         #F5A524;

  /* Turnos */
  --qk-turno-dia:   #F5A524;
  --qk-turno-tarde: #E5484D;
  --qk-turno-noche: #4CC9F0;

  /* Semánticos */
  --qk-ok:          #30A46C;
  --qk-error:       #E5484D;

  /* Tipografía */
  --qk-display: 'Archivo', system-ui, sans-serif;
  --qk-ui:      'Inter', system-ui, sans-serif;
  --qk-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Escala 4px */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;
  --r-card:14px; --r-btn:10px;

  /* Se sobreescriben según el turno */
  --acento: var(--qk-turno-dia);
}

/* Tema claro (turnos de día y tarde) */
[data-tema="claro"]{
  --fondo:      var(--qk-niebla);
  --superficie: var(--qk-blanco);
  --borde:      var(--qk-niebla-borde);
  --texto:      #0D1117;
  --texto-sec:  #5B6472;
  --campo:      #F6F8FA;
}
/* Tema oscuro (turno noche) */
[data-tema="oscuro"]{
  --fondo:      var(--qk-piedra);
  --superficie: var(--qk-piedra-alta);
  --borde:      var(--qk-piedra-borde);
  --texto:      #E8EDF5;
  --texto-sec:  #8A94A6;
  --campo:      #1A202A;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
body{
  font-family:var(--qk-ui);
  background:var(--fondo);
  color:var(--texto);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  transition:background .4s ease, color .4s ease;
}

/* ── La cinta del turno ─────────────────────────────────── */
.cinta{
  display:block; width:100%; height:18px;
  color:var(--acento);
  flex:none;
}

/* ── Layout ─────────────────────────────────────────────── */
main{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:var(--e5) var(--e4);
}
.tarjeta{
  width:100%; max-width:380px;
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--r-card);
  padding:var(--e6) var(--e5) var(--e5);
  transition:background .4s ease, border-color .4s ease;
}

/* ── Marca ──────────────────────────────────────────────── */
.marca{ text-align:center; margin-bottom:var(--e6) }
.marca svg{ color:var(--acento); margin-bottom:var(--e3) }
.marca h1{
  font-family:var(--qk-display);
  font-variation-settings:'wdth' 125,'wght' 800;
  font-size:34px; line-height:1;
  letter-spacing:.06em; text-transform:uppercase;
}
.marca p{
  margin-top:var(--e2);
  font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--texto-sec);
}

/* ── Campos ─────────────────────────────────────────────── */
.campo{ margin-bottom:var(--e4) }
.campo label{
  display:block; margin-bottom:6px;
  font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-sec);
}
.campo input{
  width:100%; height:52px;
  padding:0 var(--e3);
  font-family:var(--qk-ui); font-size:16px; color:var(--texto);
  background:var(--campo);
  border:1.5px solid var(--borde);
  border-radius:var(--r-btn);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus{
  border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
.campo input::placeholder{ color:var(--texto-sec); opacity:.55 }

/* ── Botón ──────────────────────────────────────────────── */
.btn{
  width:100%; height:54px; margin-top:var(--e5);
  font-family:var(--qk-display);
  font-variation-settings:'wdth' 110,'wght' 700;
  font-size:15px; letter-spacing:.1em; text-transform:uppercase;
  color:#12161C;
  background:var(--acento);
  border:none; border-radius:var(--r-btn);
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{ filter:brightness(1.07) }
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:3px solid var(--acento); outline-offset:3px }

/* ── Aviso ──────────────────────────────────────────────── */
.aviso{
  display:none; margin-top:var(--e4);
  padding:var(--e3);
  font-size:13px; line-height:1.5;
  color:var(--texto-sec);
  background:var(--campo);
  border-left:3px solid var(--acento);
  border-radius:6px;
}
.aviso.visible{ display:block }

/* ── Pie ────────────────────────────────────────────────── */
.pie{
  flex:none; padding:var(--e5) var(--e4) var(--e6);
  text-align:center;
  font-family:var(--qk-mono);
  font-size:12px; color:var(--texto-sec);
  font-variant-numeric:tabular-nums;
}
.pie .punto{
  display:inline-block; width:7px; height:7px;
  margin-right:6px; border-radius:50%;
  background:var(--acento);
  vertical-align:baseline;
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}

/* ── Texto introductorio ────────────────────────────────── */
.intro{
  margin-bottom:var(--e5);
  font-size:14px; line-height:1.6;
  color:var(--texto-sec);
}
.intro strong{ color:var(--texto) }

/* ── Pista bajo un campo ────────────────────────────────── */
.pista{
  display:block; margin-top:5px;
  font-size:11px; line-height:1.4;
  color:var(--texto-sec);
}

/* ── Aviso en estado de error ───────────────────────────── */
.aviso.error{
  border-left-color:var(--qk-error);
  color:var(--texto);
}

/* ── Lista de datos (panel) ─────────────────────────────── */
.datos{ margin-bottom:var(--e5) }
.datos > div{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:var(--e3) 0;
  border-bottom:1px solid var(--borde);
}
.datos dt{
  font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-sec);
}
.datos dd{
  font-family:var(--qk-mono); font-size:14px;
  color:var(--texto);
}

/* ── Botón secundario ───────────────────────────────────── */
.btn-suave{
  color:var(--texto);
  background:transparent;
  border:1.5px solid var(--borde);
}
.btn-suave:hover{ border-color:var(--acento); filter:none }

/* ── Sección plegable ───────────────────────────────────── */
.plegable{
  margin-bottom:var(--e4);
  border:1px solid var(--borde);
  border-radius:var(--r-btn);
}
.plegable summary{
  padding:var(--e3) var(--e4);
  font-size:13px; font-weight:600;
  letter-spacing:.04em;
  color:var(--texto-sec);
  cursor:pointer;
  list-style:none;
}
.plegable summary::-webkit-details-marker{ display:none }
.plegable summary::after{
  content:'+'; float:right;
  font-family:var(--qk-mono); color:var(--acento);
}
.plegable[open] summary::after{ content:'−' }
.plegable summary:hover{ color:var(--texto) }
.plegable form{ padding:0 var(--e4) var(--e4) }
.plegable .aviso{ margin:0 var(--e4) var(--e4) }

/* ══════════════════════════════════════════════════════════
   PANTALLAS ANCHAS (productos, caja, reportes)
   ══════════════════════════════════════════════════════════ */
body.ancho main{ display:block; align-items:stretch }

/* ── Barra superior ─────────────────────────────────────── */
.barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e4);
  padding:var(--e3) var(--e4);
  background:var(--superficie);
  border-bottom:1px solid var(--borde);
}
.logo{
  display:flex; align-items:center; gap:var(--e2);
  color:var(--acento); text-decoration:none;
}
.logo span{
  font-family:var(--qk-display);
  font-variation-settings:'wdth' 125,'wght' 800;
  font-size:17px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto);
}
.nav{ display:flex; gap:var(--e4) }
.nav a{
  font-size:13px; font-weight:600;
  letter-spacing:.04em;
  color:var(--texto-sec); text-decoration:none;
}
.nav a:hover{ color:var(--texto) }
.nav a.actual{ color:var(--acento) }

/* ── Contenedor de página ───────────────────────────────── */
.pagina{
  max-width:860px; margin:0 auto;
  padding:var(--e5) var(--e4) var(--e7);
}
.encabezado{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e4); margin-bottom:var(--e5);
}
.encabezado h2{
  font-family:var(--qk-display);
  font-variation-settings:'wdth' 110,'wght' 700;
  font-size:22px; letter-spacing:.04em; text-transform:uppercase;
}
.btn-corto{ width:auto; height:44px; margin:0; padding:0 var(--e4); font-size:13px }

/* ── Filtros ────────────────────────────────────────────── */
.filtros{
  display:flex; flex-wrap:wrap; gap:var(--e3);
  margin-bottom:var(--e4);
}
.filtros input[type="search"]{
  flex:1 1 220px; height:44px; padding:0 var(--e3);
  font-family:var(--qk-ui); font-size:15px; color:var(--texto);
  background:var(--campo);
  border:1.5px solid var(--borde); border-radius:var(--r-btn);
  outline:none;
}
.filtros input[type="search"]:focus{ border-color:var(--acento) }
.check{
  display:flex; align-items:center; gap:var(--e2);
  font-size:13px; color:var(--texto-sec); cursor:pointer;
}

select{
  height:44px; padding:0 var(--e3);
  font-family:var(--qk-ui); font-size:15px; color:var(--texto);
  background:var(--campo);
  border:1.5px solid var(--borde); border-radius:var(--r-btn);
  outline:none; cursor:pointer;
}
select:focus{ border-color:var(--acento) }
.campo select{ width:100% }

/* ── Lista de productos ─────────────────────────────────── */
.lista{
  border:1px solid var(--borde); border-radius:var(--r-card);
  overflow:hidden;
  background:var(--superficie);
}
.item{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e4);
  width:100%; padding:var(--e3) var(--e4);
  font-family:var(--qk-ui); text-align:left;
  background:none; border:none;
  border-bottom:1px solid var(--borde);
  cursor:pointer;
}
.item:last-child{ border-bottom:none }
.item:hover{ background:var(--campo) }
.item.inactivo{ opacity:.5 }
.item-datos{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.item-datos strong{ font-size:15px; font-weight:600; color:var(--texto) }
.item-meta{ font-size:12px; color:var(--texto-sec) }
.item-cifras{
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  font-family:var(--qk-mono); white-space:nowrap;
}
.item-precio{ font-size:15px; color:var(--texto) }
.item-stock{ font-size:12px; color:var(--texto-sec) }
.item-stock.alerta{ color:var(--qk-error); font-weight:500 }

.vacio{
  padding:var(--e6) var(--e4);
  text-align:center; font-size:14px; color:var(--texto-sec);
}

/* ── Panel lateral (formularios) ────────────────────────── */
.telon{
  position:fixed; inset:0; z-index:50;
  display:flex; justify-content:flex-end;
  background:rgba(8,11,16,.55);
}
/* El atributo hidden debe ganarle al display:flex de arriba.
   Sin esto el panel queda abierto para siempre. */
.telon[hidden]{ display:none }
.panel-lateral{
  width:100%; max-width:420px; height:100%;
  overflow-y:auto;
  padding:0 var(--e5) var(--e6);
  background:var(--superficie);
  border-left:1px solid var(--borde);
}
.panel-cabeza{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--e4) 0;
  background:var(--superficie);
  border-bottom:1px solid var(--borde);
  margin-bottom:var(--e5);
}
.panel-cabeza h3{
  font-family:var(--qk-display);
  font-variation-settings:'wdth' 110,'wght' 700;
  font-size:16px; letter-spacing:.05em; text-transform:uppercase;
}
.cerrar{
  width:34px; height:34px;
  font-size:22px; line-height:1; color:var(--texto-sec);
  background:none; border:none; border-radius:8px; cursor:pointer;
}
.cerrar:hover{ color:var(--texto); background:var(--campo) }

.fila{ display:flex; gap:var(--e3) }
.fila .campo{ flex:1; min-width:0 }

/* ── Indicador de ganancia ──────────────────────────────── */
.ganancia{
  margin:calc(var(--e4) * -1) 0 var(--e4);
  padding:var(--e2) var(--e3);
  font-size:13px; color:var(--qk-ok);
  background:var(--campo); border-radius:6px;
}
.ganancia.perdida{ color:var(--qk-error) }

@media (max-width:520px){
  .encabezado{ flex-direction:column; align-items:stretch }
  .btn-corto{ width:100% }
}

/* ── Accesos del panel ──────────────────────────────────── */
.accesos{ display:flex; flex-direction:column; gap:var(--e2); margin-bottom:var(--e5) }
.accesos a{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--e3) var(--e4);
  font-size:15px; font-weight:600; color:var(--texto);
  text-decoration:none;
  background:var(--campo);
  border:1px solid var(--borde); border-radius:var(--r-btn);
}
.accesos a::after{ content:'→'; color:var(--acento) }
.accesos a:hover{ border-color:var(--acento) }

/* ── Marca de campo opcional ────────────────────────────── */
.opcional{
  margin-left:6px;
  font-size:10px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--texto-sec); opacity:.7;
}