:root {
  --fondo: #0f1020; --tarjeta: #1a1b30; --linea: #2b2d4a; --tinta: #f2f2f7; --suave: #a6a8c4;
  --acento: #ff7a1a; --verde: #1fb36b; --amarillo: #f2b705; --rojo: #e5484d; --azul: #4c7dff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--acento); text-decoration: none; }
.envoltura { max-width: 1100px; margin: 0 auto; padding: 16px 16px 64px; }
header.barra { position: sticky; top: 0; z-index: 10; background: rgba(15,16,32,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea); }
header .fila { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.marca { font-weight: 800; letter-spacing: .02em; margin-right: auto; }
.marca small { display: block; font-weight: 500; color: var(--suave); font-size: 12px; letter-spacing: 0; }
nav a { color: var(--suave); padding: 6px 10px; border-radius: 8px; font-weight: 600; font-size: 15px; white-space: nowrap; }
nav a.activo, nav a:hover { color: var(--tinta); background: var(--tarjeta); }
nav { display: flex; gap: 2px; overflow-x: auto; max-width: 100%; }
.burbuja { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px;
  background: var(--acento); color: #111; font-size: 12px; text-align: center; font-weight: 800; }
h1 { font-size: 26px; margin: 18px 0 6px; } h2 { font-size: 19px; margin: 26px 0 10px; }
.sub { color: var(--suave); margin: 0 0 16px; }
.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; }
.cifra { font-size: 30px; font-weight: 800; } .etq { color: var(--suave); font-size: 14px; }
.barra-cupo { height: 10px; border-radius: 6px; background: var(--linea); overflow: hidden; display: flex; margin: 8px 0 4px; }
.barra-cupo i { display: block; height: 100%; } .b-conf { background: var(--verde); } .b-pend { background: var(--amarillo); }
.aviso { background: #23284a; border: 1px solid var(--azul); padding: 12px 14px; border-radius: 12px; margin: 12px 0; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 15px; background: var(--linea); color: var(--tinta); }
.boton.verde { background: var(--verde); color: #04140b; } .boton.rojo { background: transparent; color: var(--rojo); border: 1px solid var(--rojo); }
.boton.acento { background: var(--acento); color: #1a0d00; } .boton.chico { padding: 6px 10px; font-size: 13px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { color: var(--suave); font-weight: 600; font-size: 13px; }
.tabla { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--linea); color: var(--suave); }
.chip.verde { background: rgba(31,179,107,.18); color: var(--verde); } .chip.amarillo { background: rgba(242,183,5,.18); color: var(--amarillo); } .chip.rojo { background: rgba(229,72,77,.18); color: var(--rojo); }
.revision { margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: var(--linea); }
.revision.coincide { background: rgba(31,179,107,.14); } .revision.alerta { background: rgba(229,72,77,.14); } .revision.aviso { background: rgba(242,183,5,.14); }
input, select, textarea { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--linea); background: #11122a; color: var(--tinta); font-size: 16px; }
label { display: block; font-weight: 600; margin: 12px 0 6px; }
.caja-login { max-width: 380px; margin: 9vh auto 0; }
.error { color: var(--rojo); font-weight: 600; }
.vacio { color: var(--suave); padding: 24px; text-align: center; }
.personas { margin: 8px 0 0; padding-left: 18px; } .personas li { margin: 2px 0; }
.mini { color: var(--suave); font-size: 13px; }
/* puerta */
.puerta { max-width: 520px; margin: 0 auto; }
#lector { width: 100%; border-radius: 14px; overflow: hidden; background: #000; min-height: 260px; }
#resultado { margin-top: 14px; border-radius: 16px; padding: 22px 18px; text-align: center; display: none; }
#resultado.verde { display: block; background: var(--verde); color: #04140b; }
#resultado.amarillo { display: block; background: var(--amarillo); color: #1d1500; }
#resultado.rojo { display: block; background: var(--rojo); color: #fff; }
#resultado .grande { font-size: 32px; font-weight: 900; line-height: 1.1; }
#resultado .persona { font-size: 21px; font-weight: 700; margin-top: 8px; }
.lista-busqueda .tarjeta { margin-top: 8px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
@media (max-width: 640px) { h1 { font-size: 22px; } .cifra { font-size: 26px; } }
/* selector de evento (2026-10-13: Astra y Halloween a la venta a la vez) */
.eventos { display: flex; gap: 10px; overflow-x: auto; margin: 0 0 16px; padding: 8px 8px 2px 0; }
.eventos a { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; position: relative;
  padding: 8px 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--tarjeta);
  color: var(--suave); font-weight: 700; font-size: 15px; line-height: 1.25; }
.eventos a small { font-weight: 500; font-size: 12px; text-transform: capitalize; }
.eventos a.activo { color: var(--tinta); border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.eventos a .burbuja { position: absolute; top: -6px; right: -6px; margin: 0; }

/* Tema de Kabal (2026-10-27): negro y morado como su Instagram. Se activa con <html class="tema-kabal"> según el negocio. */
html.tema-kabal {
  --fondo: #0b0714; --tarjeta: #150e26; --linea: #2c2050; --tinta: #f6f1ff; --suave: #b3a6d6;
  --acento: #a35bff; --azul: #7c5cff;
}
html.tema-kabal header.barra { background: rgba(11,7,20,.94); }
html.tema-kabal .aviso { background: #1e1440; }
html.tema-kabal input, html.tema-kabal select, html.tema-kabal textarea { background: #0e0919; }
html.tema-kabal .boton.acento { background: var(--acento); color: #0b0714; }
html.tema-kabal nav .burbuja, html.tema-kabal .eventos .burbuja { color: #0b0714; }

/* Clientes (CRM de solo lectura) y marca de Kabal */
.marca { display: flex; align-items: center; gap: 10px; }
.marca small { display: block; }
.logo-marca { border-radius: 50%; box-shadow: 0 0 0 1px var(--acento), 0 0 14px rgba(163,91,255,.5); flex: none; }
.crm-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pestanas { display: flex; gap: 4px; overflow-x: auto; margin: 18px 0 10px; border-bottom: 1px solid var(--linea); }
.pestanas a { flex: none; padding: 10px 14px 11px; color: var(--suave); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pestanas a b { margin-left: 6px; color: var(--suave); }
.pestanas a.activa { color: var(--tinta); border-bottom-color: var(--acento); }
.pestanas a.activa b { color: var(--acento); }
.buscador { display: flex; gap: 8px; margin: 12px 0; }
.buscador input { flex: 1; }
.lista-clientes { list-style: none; margin: 0; padding: 0; }
.fila-cliente { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 13px 4px; border-bottom: 1px solid var(--linea); color: var(--tinta); align-items: start; }
.fila-cliente:hover { background: rgba(255,255,255,.03); }
.fila-cliente .quien small { display: block; color: var(--suave); font-weight: 400; font-size: 13px; }
.fila-cliente .ultimo { grid-column: 1; color: var(--tinta); font-size: 15px; overflow-wrap: anywhere; }
.fila-cliente .ultimo i { color: var(--suave); font-style: normal; }
.fila-cliente .cuando { grid-column: 1; color: var(--suave); font-size: 13px; }
.fila-cliente .chip { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.chat { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.chat .burbuja { display: block; min-width: 0; margin: 0; max-width: 82%; padding: 9px 12px; border-radius: 14px; background: var(--tarjeta); color: var(--tinta); font-size: inherit; font-weight: 400; text-align: left; border: 1px solid var(--linea); overflow-wrap: anywhere; white-space: pre-wrap; }
.chat .burbuja small { display: block; margin-top: 4px; color: var(--suave); font-size: 12px; }
.chat .burbuja.nosotros { align-self: flex-end; background: rgba(163,91,255,.16); border-color: rgba(163,91,255,.35); }
@media (max-width: 640px) { .crm-resumen { grid-template-columns: 1fr 1fr 1fr; } .crm-resumen .cifra { font-size: 22px; } }

/* ---- Inicio de Kabal: portada con el gorila, tubos de neón y letras condensadas como sus afiches ---- */
html.tema-kabal body { font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: radial-gradient(120% 50% at 50% -8%, rgba(163,91,255,.20), transparent 60%), var(--fondo); }
html.tema-kabal h1, html.tema-kabal h2, html.tema-kabal .cifra, html.tema-kabal .marca { font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; letter-spacing: .01em; }
html.tema-kabal h2 { font-weight: 800; font-size: 26px; }
.k-portada { position: relative; margin: 8px -16px 0; padding: 0 16px 6px; container-type: inline-size; }
.k-gorila { margin: 0 -16px; height: min(78vw, 430px); background-size: cover; background-position: center 22%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); }
.k-portada h1 { font: 900 clamp(60px, 19cqw, 120px)/.86 "Big Shoulders Display", Impact, sans-serif; margin: -14cqw 0 0; position: relative; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 30px rgba(9,6,15,.9), 0 0 40px rgba(163,91,255,.55); }
.k-portada p { margin: 10px 0 0; color: #d9ccf3; max-width: 50ch; }
.k-estado { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--suave); font-size: 15px; }
.k-estado b { color: var(--tinta); font-weight: 600; }
.k-luz { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.k-luz.on { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.k-luz.off { background: var(--amarillo); box-shadow: 0 0 10px var(--amarillo); }
.k-tarea { margin: 22px 0 0; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, #1e1440, var(--tarjeta)); border: 1px solid var(--linea); border-left: 4px solid var(--amarillo); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.k-tarea h2 { margin: 0; } .k-tarea p { margin: 2px 0 0; color: var(--suave); font-size: 15px; } .k-tarea .boton { margin-left: auto; }
.k-cifras { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0 0; border-block: 1px solid var(--linea); }
.k-cifras div { padding: 14px 4px 14px 0; } .k-cifras div + div { padding-left: 14px; border-left: 1px solid var(--linea); }
.k-cifras strong { display: block; font: 800 32px/1 "Big Shoulders Display", sans-serif; }
.k-cifras span { display: block; margin-top: 4px; font-size: 13px; color: var(--suave); line-height: 1.3; }
.k-bloque { margin-top: 30px; }
.k-bloque h2 { margin: 0 0 12px; }
.k-tubo { position: relative; height: 22px; border-radius: 999px; background: #0d0818; border: 1px solid var(--linea); display: flex; overflow: hidden; }
.k-tubo i { display: block; height: 100%; }
.k-tubo .c { width: calc(var(--c) * 1%); background: linear-gradient(180deg, #c9a6ff 0 22%, var(--acento) 22%); box-shadow: 0 0 14px 2px rgba(163,91,255,.75); border-radius: 999px; animation: k-encender 1.1s cubic-bezier(.2,.7,.2,1) both; }
.k-tubo .p { width: calc(var(--p) * 1%); background: repeating-linear-gradient(115deg, var(--amarillo) 0 6px, #b88410 6px 9px); opacity: .9; animation: k-encender 1.1s .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes k-encender { from { width: 0; } }
.k-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14px; color: var(--suave); }
.k-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.k-leyenda .a { background: var(--acento); box-shadow: 0 0 8px var(--acento); } .k-leyenda .b { background: var(--amarillo); }
.k-ver { display: inline-block; margin-top: 12px; color: #c9a6ff; font-weight: 600; }
@media (min-width: 900px) { .k-gorila { height: 460px; } .k-cifras strong { font-size: 40px; } }
@media (prefers-reduced-motion: reduce) { .k-tubo i { animation: none !important; } }

/* Inventario (2026-10-28) */
.inv-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.inv-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.inv-ub { display: flex; flex-direction: column; gap: 2px; color: var(--tinta); }
.inv-ub small { color: var(--suave); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.inv-ub b { font-size: 20px; } .inv-ub span { color: var(--suave); font-size: 14px; }
.inv-ub.almacen { border-color: var(--acento); }
.inv-form { display: grid; gap: 12px; margin-top: 8px; }
.inv-lineas { display: grid; gap: 8px; }
.inv-linea { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.inv-linea.marcada { border-color: var(--acento); }
.inv-linea .nom { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.inv-linea .disp { color: var(--suave); }
.inv-linea .ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-linea .val { min-width: 96px; text-align: center; font-weight: 800; font-size: 17px; }
.paso { min-width: 46px; min-height: 46px; border-radius: 10px; border: 1px solid var(--linea); background: #11122a; color: var(--tinta); font-size: 17px; font-weight: 700; cursor: pointer; }
.paso:active { background: var(--acento); color: #111; }
.chip.rojo { background: rgba(229,72,77,.18); color: #ff8a8e; }

/* Inventario, versión más clara (2026-10-28) */
.inv-acciones-grandes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 8px; }
.tarjeta.accion { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center; color: var(--tinta); }
.tarjeta.accion .ico { grid-row: 1 / span 2; font-size: 30px; text-align: center; }
.tarjeta.accion b { font-size: 17px; } .tarjeta.accion small { color: var(--suave); font-size: 14px; line-height: 1.3; }
.tarjeta.accion.principal { border-color: var(--acento); }
.boton.grande { min-height: 54px; font-size: 18px; width: 100%; }
.paso-num { display: grid; gap: 6px; font-weight: 700; }
.paso-num .num { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--acento); color: #111; align-items: center; justify-content: center; font-size: 14px; margin-right: 6px; }
.inv-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-fila .etq { flex: 1 1 100%; color: var(--suave); font-size: 13px; }
.inv-fila .cuenta { min-width: 56px; text-align: center; font-weight: 800; font-size: 22px; }
.inv-fila.pie { justify-content: space-between; border-top: 1px dashed var(--linea); padding-top: 8px; }
.inv-fila .despues { flex: 1 1 100%; color: var(--verde); font-size: 13px; }
.paso.mas { padding: 0 14px; background: var(--acento); color: #111; border-color: var(--acento); }
.paso.chico { min-width: 0; min-height: 38px; padding: 0 12px; font-size: 14px; font-weight: 600; }
.inv-resumen ul { margin: 6px 0 0; padding-left: 18px; } .inv-resumen li { margin: 2px 0; }
.inv-ia { border-color: var(--acento); }