/* Xcellence Pantallas — panel. Oscuro siempre: se usa en bares con poca luz. */
:root {
  --fondo: #0b0e13;
  --sup: #131820;
  --sup-2: #1b212b;
  --sup-3: #252d39;
  --borde: #313b49;
  --borde-fuerte: #4a5668;
  --texto: #eef2f7;
  --texto-2: #b3bdcc;
  --texto-3: #8b97a8;
  --acento: #ffb020;
  --acento-hover: #ffc04d;
  --sobre-acento: #1a1100;
  --acento-suave: rgba(255, 176, 32, 0.14);
  --ok: #43d98c;
  --ok-suave: rgba(67, 217, 140, 0.14);
  --peligro: #ff7070;
  --peligro-suave: rgba(255, 112, 112, 0.14);
  --aviso: #ffd166;
  --aviso-suave: rgba(255, 209, 102, 0.12);
  --info: #74b9ff;

  --r-1: 8px;
  --r-2: 12px;
  --r-3: 18px;
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --t-chica: 0.875rem;
  --t-base: 1rem;
  --t-media: 1.125rem;
  --t-grande: 1.375rem;
  --t-titulo: 1.75rem;
  --toque: 48px;
  --ancho-max: 1040px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-base);
  line-height: 1.5;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--t-titulo); }
h2 { font-size: var(--t-grande); }
h3 { font-size: var(--t-media); }
p { margin: 0; }
a { color: var(--acento); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
[hidden] { display: none !important; }

.saltar {
  position: absolute; left: var(--e-3); top: -60px; z-index: 50;
  background: var(--acento); color: var(--sobre-acento); padding: var(--e-2) var(--e-4); border-radius: var(--r-1);
}
.saltar:focus { top: var(--e-3); }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: calc(var(--e-3) + env(safe-area-inset-top)) max(var(--e-4), env(safe-area-inset-right)) var(--e-3) max(var(--e-4), env(safe-area-inset-left));
  background: rgba(11, 14, 19, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sup-3);
}
.marca { display: flex; align-items: center; gap: var(--e-2); color: var(--texto); text-decoration: none; font-size: var(--t-media); min-height: var(--toque); white-space: nowrap; }
@media (max-width: 360px) { .marca-texto { display: none; } }
.marca-x {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-1);
  background: var(--acento); color: var(--sobre-acento); font-weight: 900;
}
.barra-acciones { display: flex; align-items: center; gap: var(--e-2); }
.quien { color: var(--texto-2); font-size: var(--t-chica); max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e-4) max(var(--e-4), env(safe-area-inset-right)) calc(var(--e-7) * 2) max(var(--e-4), env(safe-area-inset-left));
}
main:focus { outline: none; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque); padding: 0 var(--e-5);
  border-radius: var(--r-2); border: 1px solid transparent;
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  background: var(--acento); color: var(--sobre-acento);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), background-color 150ms var(--ease-out);
}
.boton:active { transform: scale(0.97); }
.boton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.boton-secundario { background: var(--sup-2); color: var(--texto); border-color: var(--borde); }
.boton-peligro { background: var(--peligro-suave); color: var(--peligro); border-color: rgba(255, 112, 112, 0.4); }
.boton-fantasma { background: transparent; color: var(--texto-2); border-color: transparent; padding: 0 var(--e-3); }
.boton-icono { width: var(--toque); padding: 0; flex-shrink: 0; }
.boton svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .boton:not(:disabled):hover { background: var(--acento-hover); }
  .boton-secundario:not(:disabled):hover { background: var(--sup-3); }
  .boton-peligro:not(:disabled):hover { background: rgba(255, 112, 112, 0.24); }
  .boton-fantasma:not(:disabled):hover { background: var(--sup-2); color: var(--texto); }
}

/* ---------- Tarjetas y secciones ---------- */
.tarjeta {
  background: var(--sup); border: 1px solid var(--sup-3); border-radius: var(--r-3);
  padding: var(--e-5); display: grid; gap: var(--e-4);
}
.pila { display: grid; gap: var(--e-4); }
.pila-chica { display: grid; gap: var(--e-2); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.fila-entre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.tenue { color: var(--texto-2); }
.chico { font-size: var(--t-chica); }
.numeros { font-variant-numeric: tabular-nums; }
.vacio { color: var(--texto-2); text-align: center; padding: var(--e-6) var(--e-4); border: 1px dashed var(--borde); border-radius: var(--r-3); }
.encabezado { display: grid; gap: var(--e-2); margin-bottom: var(--e-5); }
.migas { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--texto-2); text-decoration: none; min-height: var(--toque); }
.migas svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .migas:hover { color: var(--texto); } }

/* ---------- Estado: punto + texto (nunca solo color) ---------- */
.estado { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; font-size: var(--t-chica); padding: var(--e-1) var(--e-3); border-radius: 999px; background: var(--sup-2); }
.estado::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--texto-3); flex-shrink: 0; }
.estado-ok { color: var(--ok); background: var(--ok-suave); }
.estado-ok::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(67, 217, 140, 0.25); }
.estado-mal { color: var(--peligro); background: var(--peligro-suave); }
.estado-mal::before { background: var(--peligro); }
.estado-neutro { color: var(--texto-2); }

.alerta { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-4); border-radius: var(--r-2); border: 1px solid; }
.alerta svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.alerta-mal { background: var(--peligro-suave); border-color: rgba(255, 112, 112, 0.4); color: var(--texto); }
.alerta-mal svg { color: var(--peligro); }
.alerta-aviso { background: var(--aviso-suave); border-color: rgba(255, 209, 102, 0.35); }
.alerta-aviso svg { color: var(--aviso); }
.alerta-info { background: var(--sup-2); border-color: var(--borde); }
.alerta-info svg { color: var(--info); }

/* ---------- Login ---------- */
.login { min-height: calc(100dvh - var(--e-7)); display: grid; place-items: center; }
.login .tarjeta { width: min(420px, 100%); }
.login-marca { display: flex; align-items: center; gap: var(--e-3); }
.login-marca .marca-x { width: 48px; height: 48px; font-size: var(--t-grande); border-radius: var(--r-2); }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: var(--e-2); min-width: 0; }
.campo > span, .leyenda { font-weight: 600; color: var(--texto); }
.ayuda { color: var(--texto-2); font-size: var(--t-chica); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], select {
  width: 100%; min-height: var(--toque); padding: 0 var(--e-4);
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-2);
  font: inherit; font-size: max(16px, 1rem);
}
input:focus-visible, select:focus-visible { outline: 3px solid var(--acento); outline-offset: 0; border-color: var(--acento); }
input::placeholder { color: var(--texto-3); }
input[type="range"] { width: 100%; accent-color: var(--acento); min-height: var(--toque); }
fieldset { border: 1px solid var(--sup-3); border-radius: var(--r-2); padding: var(--e-4); margin: 0; display: grid; gap: var(--e-3); min-width: 0; }
legend { padding: 0 var(--e-2); font-weight: 700; }
.rejilla-2 { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.error-campo { color: var(--peligro); font-size: var(--t-chica); }
.valor-rango { font-variant-numeric: tabular-nums; color: var(--acento); font-weight: 700; }

/* Opciones táctiles: casillas y radios como pastillas grandes */
.opciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque); min-width: var(--toque); padding: 0 var(--e-4);
  border-radius: var(--r-2); border: 1px solid var(--borde); background: var(--sup-2);
  color: var(--texto-2); font-weight: 600; user-select: none;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.opcion input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.opcion input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }

.interruptor { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: var(--toque); cursor: pointer; }
.interruptor input { appearance: none; -webkit-appearance: none; width: 52px; height: 30px; border-radius: 999px; background: var(--sup-3); border: 1px solid var(--borde-fuerte); position: relative; flex-shrink: 0; cursor: pointer; margin: 0; transition: background-color 150ms var(--ease-out); }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--texto-2); transition: transform 150ms var(--ease-out), background-color 150ms var(--ease-out); }
.interruptor input:checked { background: var(--acento); border-color: var(--acento); }
.interruptor input:checked::after { transform: translateX(22px); background: var(--sobre-acento); }

/* ---------- Lista de locales ---------- */
.grupo-cliente { display: grid; gap: var(--e-3); margin-bottom: var(--e-6); }
.grupo-cliente > h2 { font-size: var(--t-chica); text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-2); }
.lista-locales { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.local-item {
  display: grid; gap: var(--e-2); padding: var(--e-4) var(--e-5); min-height: 96px;
  background: var(--sup); border: 1px solid var(--sup-3); border-radius: var(--r-3);
  color: var(--texto); text-decoration: none;
  transition: transform 120ms var(--ease-out), border-color 150ms var(--ease-out);
}
.local-item:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .local-item:hover { border-color: var(--borde-fuerte); } }
.local-item h3 { overflow-wrap: anywhere; }
.local-detalle { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); color: var(--texto-2); font-size: var(--t-chica); }

/* ---------- Vista de local ---------- */
.pestanas {
  display: flex; gap: var(--e-1); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--e-4) * -1) var(--e-5); padding: 0 var(--e-4);
  border-bottom: 1px solid var(--sup-3);
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e-4);
  color: var(--texto-2); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent;
}
.pestanas a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--acento); }
@media (hover: hover) and (pointer: fine) { .pestanas a:hover { color: var(--texto); } }

.controles { display: grid; gap: var(--e-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .controles { grid-template-columns: repeat(3, 1fr); } }
.control {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--e-2) var(--e-4);
  min-height: 112px; padding: var(--e-4) var(--e-5); text-align: left;
  border-radius: var(--r-3); border: 2px solid var(--borde); background: var(--sup-2); color: var(--texto);
  font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.control:active:not(:disabled) { transform: scale(0.97); }
.control:disabled { cursor: not-allowed; opacity: 0.55; }
.control-icono { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-2); background: var(--sup-3); }
.control-icono svg { width: 30px; height: 30px; }
.control-titulo { font-size: var(--t-grande); font-weight: 750; align-self: end; }
.control-estado { font-size: var(--t-base); color: var(--texto-2); align-self: start; overflow-wrap: anywhere; }
.control[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.control[aria-pressed="true"] .control-icono { background: rgba(26, 17, 0, 0.14); }
.control[aria-pressed="true"] .control-estado { color: var(--sobre-acento); font-weight: 650; }
.control-promo { border-color: rgba(255, 176, 32, 0.55); }
.control-promo .control-icono { background: var(--acento-suave); color: var(--acento); }
.control.esperando .control-estado { color: var(--aviso); }
.control[aria-pressed="true"].esperando .control-estado { color: var(--sobre-acento); }
.fuera-de-linea .control[aria-pressed="true"] { background: var(--acento-suave); color: var(--texto); border-color: rgba(255, 176, 32, 0.55); }
.fuera-de-linea .control[aria-pressed="true"] .control-estado { color: var(--texto-2); font-weight: 400; }
.fuera-de-linea .control.esperando .control-estado, .fuera-de-linea .control[aria-pressed="true"].esperando .control-estado { color: var(--aviso); }
@media (hover: hover) and (pointer: fine) { .control:not(:disabled):hover { border-color: var(--borde-fuerte); } .control[aria-pressed="true"]:not(:disabled):hover { border-color: var(--acento-hover); } }

.datos-estado { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin: 0; }
.datos-estado div { background: var(--sup-2); border-radius: var(--r-2); padding: var(--e-3) var(--e-4); min-width: 0; }
.datos-estado dt { color: var(--texto-2); font-size: var(--t-chica); }
.datos-estado dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }

/* ---------- Promos ---------- */
.subida { display: grid; gap: var(--e-3); }
.progreso { height: 12px; border-radius: 999px; background: var(--sup-3); overflow: hidden; }
.progreso > div { height: 100%; width: 100%; background: var(--acento); transform-origin: left; transform: scaleX(0); transition: transform 200ms linear; }
.lista-promos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.promo { background: var(--sup); border: 1px solid var(--sup-3); border-radius: var(--r-3); padding: var(--e-4); display: grid; gap: var(--e-3); }
.promo.inactiva { opacity: 0.78; border-style: dashed; }
.promo-cabeza { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-3); align-items: center; }
.promo-orden { display: grid; gap: var(--e-1); }
.promo-orden .boton { min-height: 44px; width: 44px; }
.promo-nombre { font-weight: 700; font-size: var(--t-media); overflow-wrap: anywhere; }
.promo-num { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 50%; background: var(--sup-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.etiqueta { display: inline-flex; align-items: center; font-size: var(--t-chica); font-weight: 650; padding: 2px var(--e-2); border-radius: var(--r-1); background: var(--sup-3); color: var(--texto-2); }
.etiqueta-ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta-aviso { background: var(--aviso-suave); color: var(--aviso); }
.promo video { width: 100%; border-radius: var(--r-2); background: #000; aspect-ratio: 16 / 9; }

/* ---------- Logo: vista previa 1920×1080 ---------- */
.pantalla {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
  border-radius: var(--r-2); border: 6px solid #05070a;
  background:
    radial-gradient(circle at 70% 30%, rgba(116, 185, 255, 0.35), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(67, 217, 140, 0.25), transparent 50%),
    linear-gradient(135deg, #1d2b3a, #0e141c 60%, #22313f);
}
.pantalla-cancha { position: absolute; inset: 18% 12%; border: 2px solid rgba(255, 255, 255, 0.18); border-radius: 6px; }
.pantalla-cancha::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid rgba(255, 255, 255, 0.18); }
.pantalla-texto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.35); font-size: var(--t-chica); white-space: nowrap; }
.pantalla img { position: absolute; height: auto; }
.pantalla-sin-logo { position: absolute; inset: auto 0 var(--e-3) 0; text-align: center; color: var(--texto-2); font-size: var(--t-chica); }
.logo-rejilla { display: grid; gap: var(--e-4); align-items: start; }
@media (min-width: 900px) {
  .logo-rejilla { grid-template-columns: 3fr 2fr; }
  .logo-vista { position: sticky; top: 88px; }
}
.esquinas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.esquinas .opcion span { width: 100%; }

/* ---------- Registro ---------- */
.tabla-contenedor { overflow-x: auto; border: 1px solid var(--sup-3); border-radius: var(--r-2); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-chica); }
th, td { text-align: left; padding: var(--e-3); border-bottom: 1px solid var(--sup-3); vertical-align: top; }
th { color: var(--texto-2); font-weight: 650; background: var(--sup); position: sticky; top: 0; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.registro-movil { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.registro-movil li { background: var(--sup); border: 1px solid var(--sup-3); border-radius: var(--r-2); padding: var(--e-3) var(--e-4); display: grid; gap: 2px; }
@media (max-width: 719px) { .solo-escritorio { display: none; } }
@media (min-width: 720px) { .solo-movil { display: none; } }

/* ---------- Avisos (toasts) ---------- */
.avisos { position: fixed; left: 0; right: 0; bottom: calc(var(--e-4) + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: var(--e-2); padding: 0 var(--e-4); z-index: 40; pointer-events: none; }
.aviso {
  max-width: 560px; width: 100%;
  background: var(--sup-3); color: var(--texto); border: 1px solid var(--borde-fuerte); border-left: 4px solid var(--ok);
  border-radius: var(--r-2); padding: var(--e-3) var(--e-4); box-shadow: var(--sombra);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
@starting-style { .aviso { opacity: 0; transform: translateY(8px); } }
.aviso.saliendo { opacity: 0; transform: translateY(8px); transition-duration: 120ms; }
.aviso-mal { border-left-color: var(--peligro); }
.aviso-aviso { border-left-color: var(--aviso); }

/* ---------- Diálogo de confirmación ---------- */
.dialogo { border: 1px solid var(--borde); border-radius: var(--r-3); background: var(--sup); color: var(--texto); padding: var(--e-5); width: min(440px, calc(100vw - 2 * var(--e-4))); box-shadow: var(--sombra); }
.dialogo::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialogo form { display: grid; gap: var(--e-4); }
.dialogo p { color: var(--texto-2); }
.dialogo-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); }

/* ---------- Carga ---------- */
.cargando { display: grid; gap: var(--e-3); }
.cargando div { height: 96px; border-radius: var(--r-3); background: linear-gradient(90deg, var(--sup) 0%, var(--sup-2) 50%, var(--sup) 100%); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
@keyframes brillo { to { background-position: -200% 0; } }

/* ---------- Admin ---------- */
.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.lista-simple > li { background: var(--sup-2); border-radius: var(--r-2); padding: var(--e-3) var(--e-4); display: grid; gap: var(--e-2); min-width: 0; }
.lista-simple .fila-entre > :first-child { min-width: 0; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .boton:active, .control:active, .local-item:active { transform: none; }
}