/* ==========================================================================
   GsCore360 — panel de operación
   Sin dependencias externas: la CSP del servicio bloquea cualquier host
   ajeno (ver src/main.ts). Tema claro/oscuro según el sistema.
   ========================================================================== */

:root {
  --fondo: #f5f6f8;
  --fondo-panel: #ffffff;
  --fondo-hundido: #eceef2;
  --borde: #dcdfe6;
  --texto: #16181d;
  --texto-suave: #5f6672;
  --acento: #1f5eff;
  --acento-texto: #ffffff;
  --ok: #0f7b41;
  --ok-fondo: #e3f4ea;
  --alerta: #9a5b00;
  --alerta-fondo: #fdf0da;
  --error: #b3261e;
  --error-fondo: #fbe6e5;
  --neutro: #4a5160;
  --neutro-fondo: #e7e9ee;
  --sombra: 0 1px 2px rgba(16, 18, 22, 0.06), 0 8px 24px rgba(16, 18, 22, 0.06);
  --radio: 10px;
  /* Interruptores de «Qué ve cada cliente» — el cyan-800/900 que el
     backoffice de Cancha360 usa como color de acción (§8.1). */
  --interruptor-encendido: #155e75;
  --interruptor-apagado: #cbd5e1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101216;
    --fondo-panel: #191c22;
    --fondo-hundido: #23272f;
    --borde: #2e333d;
    --texto: #e9ecf1;
    --texto-suave: #9aa2b1;
    --acento: #6f9bff;
    --acento-texto: #0b1020;
    --ok: #6fd39b;
    --ok-fondo: #12301f;
    --alerta: #f0be74;
    --alerta-fondo: #33270f;
    --error: #f28b84;
    --error-fondo: #3a1613;
    --neutro: #b3bac7;
    --neutro-fondo: #262b34;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    /* El cyan-800 sobre fondo oscuro no se distingue de "apagado": se sube
       al 600 para que el riel encendido siga leyéndose de noche. */
    --interruptor-encendido: #0e9bbd;
    --interruptor-apagado: #3a4150;
  }
}

* {
  box-sizing: border-box;
}

/* El atributo `hidden` del HTML se aplica desde la hoja del navegador, así que
   CUALQUIER regla de autor que fije `display` lo pisa — y aquí las hay
   (`.app` y `.capa` usan grid). Sin esto, el armazón de la aplicación y los
   diálogos se dibujan encima de la pantalla de acceso y la bloquean. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 620;
  letter-spacing: -0.01em;
}

/* ---------- Marca ---------- */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
}
.marca h1 {
  font-size: 17px;
}
.marca p {
  margin: 0;
  font-size: 12px;
  color: var(--texto-suave);
}
.marca-punto {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--acento), #9b5cff);
}
.marca-compacta {
  padding: 4px 4px 20px;
}

/* ---------- Acceso ---------- */
.acceso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.tarjeta-acceso {
  width: 100%;
  max-width: 380px;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pestanas {
  display: flex;
  gap: 4px;
  background: var(--fondo-hundido);
  padding: 4px;
  border-radius: 9px;
}
.pestana {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  padding: 7px 8px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pestana.activa {
  background: var(--fondo-panel);
  color: var(--texto);
  font-weight: 560;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

label {
  display: block;
  font-size: 12px;
  font-weight: 560;
  color: var(--texto-suave);
  margin-bottom: 5px;
}

input,
select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  margin-bottom: 12px;
}
input:focus,
select:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: transparent;
}

.ayuda {
  font-size: 12px;
  color: var(--texto-suave);
  margin: 0;
}

.pie-acceso {
  font-size: 11.5px;
  color: var(--texto-suave);
  text-align: center;
  margin: 0;
}

/* ---------- Botones ---------- */
.boton-primario,
.boton-secundario {
  border-radius: 8px;
  font: inherit;
  font-weight: 560;
  cursor: pointer;
  padding: 9px 14px;
  border: 1px solid transparent;
}
.boton-primario {
  background: var(--acento);
  color: var(--acento-texto);
}
.boton-primario:hover {
  filter: brightness(1.08);
}
.boton-secundario {
  background: var(--fondo-panel);
  color: var(--texto);
  border-color: var(--borde);
}
.boton-secundario:hover {
  background: var(--fondo-hundido);
}
.boton-vinculo {
  background: none;
  border: 0;
  color: var(--acento);
  font: inherit;
  cursor: pointer;
  padding: 2px 4px;
}
.boton-cerrar {
  background: none;
  border: 0;
  color: var(--texto-suave);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.boton-salir {
  margin-top: auto;
  background: none;
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  border-radius: 8px;
  padding: 8px;
  font: inherit;
  cursor: pointer;
}
.boton-salir:hover {
  color: var(--texto);
}

/* ---------- Estructura ---------- */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

.barra-lateral {
  background: var(--fondo-panel);
  border-right: 1px solid var(--borde);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.barra-lateral nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav {
  text-align: left;
  background: none;
  border: 0;
  color: var(--texto-suave);
  padding: 8px 10px;
  border-radius: 7px;
  font: inherit;
  cursor: pointer;
}
.nav:hover {
  background: var(--fondo-hundido);
  color: var(--texto);
}
.nav.activa {
  background: var(--fondo-hundido);
  color: var(--texto);
  font-weight: 560;
}

.contenido {
  padding: 26px 30px;
  overflow-x: auto;
}

.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.encabezado h2 {
  font-size: 21px;
}
.acciones {
  display: flex;
  gap: 8px;
  align-items: center;
}
.acciones select {
  margin-bottom: 0;
  width: auto;
}

/* ---------- Tarjetas ---------- */
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.tarjeta {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
}
.tarjeta .valor {
  font-size: 26px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tarjeta .etiqueta {
  font-size: 12px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Tablas ---------- */
.tabla-contenedor {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}
th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: var(--fondo-hundido);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}
.vacio {
  padding: 28px;
  text-align: center;
  color: var(--texto-suave);
}

/* ---------- Insignias de estado ---------- */
.insignia {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.insignia-ok {
  background: var(--ok-fondo);
  color: var(--ok);
}
.insignia-alerta {
  background: var(--alerta-fondo);
  color: var(--alerta);
}
.insignia-error {
  background: var(--error-fondo);
  color: var(--error);
}
.insignia-neutro {
  background: var(--neutro-fondo);
  color: var(--neutro);
}

/* ---------- Panel de datos ---------- */
.panel-datos {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 4px 18px;
}
.fila-dato {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
  flex-wrap: wrap;
}
.fila-dato:last-child {
  border-bottom: 0;
}
.fila-dato dt {
  flex: 0 0 190px;
  color: var(--texto-suave);
  font-size: 12.5px;
  margin: 0;
}
.fila-dato dd {
  margin: 0;
  flex: 1;
  min-width: 200px;
  word-break: break-word;
}

/* ---------- Avisos ---------- */
.aviso {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.aviso-ok {
  background: var(--ok-fondo);
  color: var(--ok);
}
/* Ámbar: "esto conviene que lo leas", distinto de ok (verde, ya salió bien) y
   de error (rojo, algo está mal). Sin este escalón, un aviso que sólo explica
   se pintaba de verde y se leía como "todo en orden". */
.aviso-alerta {
  background: var(--alerta-fondo);
  color: var(--alerta);
}

.aviso-error {
  background: var(--error-fondo);
  color: var(--error);
}

.error {
  background: var(--error-fondo);
  color: var(--error);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin: 0;
}

/* ---------- Diálogo ---------- */
.capa {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.55);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 10;
}
.dialogo {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra);
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px;
}
.pie-dialogo {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pie-dialogo select {
  margin-bottom: 0;
  width: auto;
  min-width: 170px;
}

/* ---------- Formularios dentro de diálogos ---------- */
.titulo-bloque {
  margin: 20px 0 12px;
  font-size: 12px;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
  border-top: 1px solid var(--borde);
  padding-top: 16px;
}

.rejilla-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0 14px;
}
.rejilla-campos select,
.rejilla-campos input {
  width: 100%;
  margin-bottom: 12px;
}

.req {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--error);
}

/* La clave de activación se muestra UNA sola vez: tiene que poder leerse y
   seleccionarse sin esfuerzo. */
.clave-generada {
  background: var(--fondo-hundido);
  border: 1px dashed var(--borde);
  border-radius: 8px;
  padding: 16px;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-align: center;
  word-break: break-all;
  user-select: all;
  margin: 4px 0;
}

/* ---------- Responsivo ---------- */
@media (max-width: 760px) {
  .app {
    grid-template-columns: 1fr;
  }
  .barra-lateral {
    border-right: 0;
    border-bottom: 1px solid var(--borde);
  }
  .barra-lateral nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .boton-salir {
    margin-top: 12px;
  }
  .contenido {
    padding: 20px 16px;
  }
  .fila-dato dt {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   «Qué ve cada cliente» — la pantalla de interruptores
   --------------------------------------------------------------------------
   Composición y medidas tomadas del backoffice de Cancha360 (ver
   docs/ESPECIFICACION_PANTALLA_QUE_VE_CADA_CLIENTE.md §8 y las capturas de
   docs/referencia-visual/). Los colores van por los tokens del panel en vez
   de los hex de ahí: este panel tiene tema oscuro y fijarlos a mano lo dejaba
   ilegible de noche. Lo que SÍ se copia al pie de la letra es la geometría
   del interruptor y la densidad — es lo que hace que se lea.
   ========================================================================== */

/* ---------- Los tres números de arriba ---------- */
.contadores {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: baseline;
  margin: 4px 0 14px;
}
.contador {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.contador .cifra {
  font-size: 22px;
  font-weight: 700;
  /* Sin cifras tabulares una columna de números baila y se lee mal. */
  font-variant-numeric: tabular-nums;
}
.contador .rotulo {
  color: var(--texto-suave);
}
.contador.peligro .cifra {
  color: var(--error);
}

.buscador {
  width: 100%;
  max-width: 460px;
  padding: 9px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-panel);
  color: var(--texto);
  font: inherit;
}

/* ---------- La lista ---------- */
.celda-cliente strong {
  display: block;
  font-weight: 620;
}
.celda-cliente .sub {
  color: var(--texto-suave);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.conteo-funciones {
  font-variant-numeric: tabular-nums;
}
.conteo-funciones .de {
  color: var(--texto-suave);
}

/* «A la medida»: se ve de lejos que a ese cliente se le decidió algo aparte. */
.marca-medida {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--alerta-fondo);
  color: var(--alerta);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- La ficha ---------- */
.volver {
  border: 0;
  background: none;
  padding: 0;
  margin-bottom: 10px;
  color: var(--acento);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.volver:hover {
  text-decoration: underline;
}

.cabecera-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-end;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--borde);
}
.campo-ficha {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.campo-ficha .rotulo {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.campo-ficha .valor {
  font-size: 16px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.campo-ficha select {
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo-panel);
  color: var(--texto);
  font: inherit;
  min-width: 190px;
}
.campo-ficha .valor.medida {
  color: var(--alerta);
}

/* ---------- Los grupos de funciones ---------- */
.grupo-funciones {
  margin-top: 20px;
}
.grupo-funciones h3 {
  font-size: 15px;
  margin-bottom: 8px;
}
.renglon-funcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
/* Apagada se ve que está ahí, pero apagada. */
.renglon-funcion.apagada {
  opacity: 0.7;
}
.renglon-funcion .texto {
  min-width: 0;
}
.renglon-funcion .nombre {
  font-weight: 620;
}
.renglon-funcion .ayuda-funcion {
  color: var(--texto-suave);
  font-size: 12px;
}
.renglon-funcion .clave-cruda {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--texto-suave);
}
.renglon-funcion .marcas {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
  flex-wrap: wrap;
}

/* ---------- El interruptor ----------
   Riel 36×20 con perilla blanca de 16, y la etiqueta al lado en ancho fijo
   para que el renglón no salte al pasar de «Encendida» a «Apagada».

   El primer intento en Cancha360 fue un botón que DECÍA «Encendida», y estaba
   mal: un botón que muestra el estado se lee como etiqueta y nadie entiende
   que se pulsa. Por eso va riel con perilla. No lo repitan. */
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--fondo-panel);
  color: var(--texto-suave);
  font: inherit;
  cursor: pointer;
}
.interruptor:disabled {
  cursor: progress;
  opacity: 0.6;
}
.interruptor .riel {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--interruptor-apagado);
  transition: background 0.12s ease-in-out;
  flex-shrink: 0;
}
.interruptor .perilla {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease-in-out;
}
.interruptor .rotulo {
  width: 4.5rem;
  text-align: left;
}
.interruptor[aria-pressed='true'] {
  border-color: var(--interruptor-encendido);
  color: var(--interruptor-encendido);
  font-weight: 600;
}
.interruptor[aria-pressed='true'] .riel {
  background: var(--interruptor-encendido);
}
.interruptor[aria-pressed='true'] .perilla {
  transform: translateX(16px);
}

@media (max-width: 760px) {
  .cabecera-ficha {
    gap: 18px;
  }
  .renglon-funcion {
    align-items: flex-start;
    flex-direction: column;
  }
}