/* ============================================================
   La consola de administración: identidad propia.

   NO COMPARTE LOS SEIS TEMAS DEL GIMNASIO, y es una decisión, no un descuido.
   Los temas existen para que cada gimnasio se vea suyo; esta pantalla no es de
   ningún gimnasio — es la herramienta con la que se les administra. Que se
   parezca al producto del cliente sería confundir dos cosas que conviene tener
   separadas en la cabeza a las dos de la mañana. `control/index.html` ya lo hacía
   así por el mismo motivo.

   Aun así, las reglas de la skill `diseno` mandan igual:
   · Nada de color cocido fuera de los tokens de aquí arriba.
   · El semáforo no se tematiza: rojo es rojo, y siempre lleva su palabra.
   · Restrained: neutrales, y el acento se gasta sólo en lo interactivo.
   · Nada de franjas laterales de color, texto con gradiente, eyebrows en
     mayúsculas ni tarjetas fantasma (borde + sombra difusa a la vez).

   UNA SOLA FAMILIA, la del sistema. No se vendorizan fuentes: es una
   herramienta interna, y una familia bien afinada carga títulos, etiquetas y
   datos. La mono existe SOLO para cifras y para lo que se copia y pega
   (secretos, slugs, huellas).
   ============================================================ */

:root {
  /* Neutrales, tintados un punto hacia el azul del acento: croma 0 se ve muerto
     al lado de un color. Los cuatro fondos suben juntos o se rompe la
     profundidad — en oscuro la profundidad viene de la luz, no de la sombra. */
  --bg: #0b0d10;
  --superficie: #12151a;
  --tarjeta: #171b21;
  --tarjeta-2: #1d222a;
  --linea: #262d38;
  --linea-fuerte: #333c4a;
  /* El borde de un campo al pasar por encima. Tiene nombre y no valor cocido
     porque el candado de `pruebas-consola.mjs` lo exige, y el candado tiene
     razon: un hex suelto en una regla es el que nadie encuentra despues. */
  --linea-hover: #3d4756;

  --texto: #e9edf3;
  --apagado: #99a3b2;      /* 7.2:1 sobre --bg: gris legible, no gris «elegante» */
  --tenue: #6b7583;

  --acento: #4c8ff0;
  --acento-rgb: 76 143 240;
  --acento-texto: #0b0d10;  /* lo que se lee ENCIMA del acento */

  /* El semáforo. Fijo, y con su palabra al lado siempre. */
  --mal: #e5595e;
  --mal-rgb: 229 89 94;
  --aviso: #d7a223;
  --aviso-rgb: 215 162 35;
  --bien: #35b07a;
  --bien-rgb: 53 176 122;
  /* Lo que se lee ENCIMA del rojo. Blanco puro sobre `--mal` da 4.6:1; el
     `--texto` de la consola, que es azulado, se queda corto. */
  --sobre-mal: #ffffff;

  --tinta-rgb: 233 237 243;

  --r-caja: 12px;
  --r-chico: 8px;
  --r-pastilla: 999px;

  --f-cuerpo: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

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

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--f-cuerpo);
  /* UI densa: apretado, pero nunca bajo 1.3. */
  font: 400 14px/1.45 var(--f-cuerpo);
  -webkit-font-smoothing: antialiased;
}

/* Cifras tabulares SOLO donde se alinean; un número suelto grande iría con
   figuras proporcionales, y aquí no hay ninguno. */
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------- Barra ---------- */
.barra {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 10;
}
.marca { font-weight: 600; letter-spacing: -0.01em; margin-right: auto; }
.marca span { color: var(--apagado); font-weight: 400; margin-left: 8px; }

/* El entorno. Producción se marca con borde y palabra, no sólo con color:
   quien no distingue rojo tiene que verlo igual. */
.entorno {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-pastilla);
  color: var(--apagado);
  font-size: 12.5px;
}
.entorno-punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--apagado);
}
.entorno-prod {
  border-color: rgb(var(--mal-rgb) / .5);
  background: rgb(var(--mal-rgb) / .1);
  color: var(--mal);
  font-weight: 600;
}
.entorno-prod .entorno-punto { background: var(--mal); }

#quien { color: var(--apagado); font-size: 12.5px; }

/* ---------- Contenido ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }

h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.sub { color: var(--apagado); margin: 0 0 20px; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
  padding: 20px;
}
.angosta { max-width: 380px; margin: 8vh auto 0; }

/* ---------- Controles ---------- */
label { display: block; font-size: 12.5px; color: var(--apagado); margin: 14px 0 6px; }

.campo, select.campo {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  color: var(--texto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-chico);
  font: inherit;
}
.campo::placeholder { color: var(--tenue); }
.campo:hover { border-color: var(--linea-hover); }
.campo:focus-visible, .btn:focus-visible, .pildora:focus-visible, .fila:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.btn {
  padding: 9px 16px;
  background: var(--acento);
  color: var(--acento-texto);
  border: 0; border-radius: var(--r-chico);
  font: 600 13.5px/1 var(--f-cuerpo);
  cursor: pointer;
  transition: filter .12s ease-out;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(.94); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-plano {
  background: transparent; color: var(--texto);
  border: 1px solid var(--linea-fuerte);
}
.btn-plano:hover { background: rgb(var(--tinta-rgb) / .05); filter: none; }
.ancho { width: 100%; margin-top: 18px; }

/* ---------- Avisos ---------- */
.aviso {
  margin: 14px 0 0; padding: 10px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-chico);
  font-size: 13px;
}
.aviso-mal { border-color: rgb(var(--mal-rgb) / .45); background: rgb(var(--mal-rgb) / .08); color: var(--mal); }
.aviso-aviso { border-color: rgb(var(--aviso-rgb) / .45); background: rgb(var(--aviso-rgb) / .08); color: var(--aviso); }

.nota { color: var(--apagado); font-size: 12.5px; margin: 12px 0 8px; }
.secreto {
  display: block; padding: 10px 12px; margin-bottom: 8px;
  background: var(--bg); border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
  font-size: 13px; letter-spacing: .06em; word-break: break-all;
}

/* ---------- Filtros ---------- */
.barra-filtros {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.barra-filtros .campo { width: 260px; }
.pildoras { display: flex; gap: 6px; flex-wrap: wrap; }
.pildora {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  background: transparent; color: var(--apagado);
  border: 1px solid var(--linea); border-radius: var(--r-pastilla);
  font: 500 12.5px/1 var(--f-cuerpo); cursor: pointer;
}
.pildora:hover { background: rgb(var(--tinta-rgb) / .04); color: var(--texto); }
.pildora.es-activa { background: rgb(var(--acento-rgb) / .14); border-color: rgb(var(--acento-rgb) / .5); color: var(--texto); }
.pildora-num { color: var(--tenue); font-size: 11.5px; }
.pildora.es-activa .pildora-num { color: var(--apagado); }
.conteo { margin: 0 0 0 auto; color: var(--apagado); font-size: 12.5px; }

/* ---------- Tabla ---------- */
.tabla-scroll {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
  background: var(--tarjeta);
}
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }

/* Encabezado pegajoso con fondo opaco propio: con la lista larga, un thead que
   se va deja una tabla ilegible. */
.tabla th {
  position: sticky; top: 0; z-index: 1;
  background: var(--tarjeta-2);
  color: var(--apagado);
  font-weight: 500; font-size: 12px;
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
/* Números a la derecha, y su encabezado con ellos. */
.tabla th.col-num, .tabla td.col-num { text-align: right; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }

.fila { cursor: pointer; }
/* Hover apenas perceptible: lo justo para seguir el renglón. */
.fila:hover td { background: rgb(var(--tinta-rgb) / .03); }

.celda-nombre { display: flex; align-items: center; gap: 10px; }
.celda-nombre > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Un solo dato fuerte por fila. */
.nombre { font-weight: 600; }
.slug { color: var(--tenue); font-size: 12px; }

.punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.punto-mal { background: var(--mal); }
.punto-aviso { background: var(--aviso); }
.punto-bien { background: var(--bien); }

.chip {
  display: inline-block; margin: 2px 4px 2px 0;
  padding: 3px 9px;
  border-radius: var(--r-pastilla);
  font-size: 12px; font-weight: 500;
  border: 1px solid transparent;
}
.chip-mal { background: rgb(var(--mal-rgb) / .13); border-color: rgb(var(--mal-rgb) / .35); color: var(--mal); }
.chip-aviso { background: rgb(var(--aviso-rgb) / .13); border-color: rgb(var(--aviso-rgb) / .35); color: var(--aviso); }
.chip-bien { background: rgb(var(--bien-rgb) / .12); border-color: rgb(var(--bien-rgb) / .3); color: var(--bien); }
.chip-neutro { background: rgb(var(--tinta-rgb) / .06); border-color: var(--linea); color: var(--apagado); }

.nivel { display: block; }
.vence { display: block; color: var(--tenue); font-size: 12px; }
.vence-mal { color: var(--mal); }
.nota-mal { display: block; color: var(--mal); font-size: 11.5px; }

/* ---------- Vacío ---------- */
.vacio {
  padding: 40px 20px; text-align: center;
  border: 1px solid var(--linea); border-radius: var(--r-caja);
  background: var(--tarjeta);
}
.vacio-titulo { margin: 0 0 6px; font-weight: 600; }
.vacio-detalle { margin: 0 0 16px; color: var(--apagado); font-size: 13px; }
.vacio-mal { border-color: rgb(var(--mal-rgb) / .35); }

/* ---------- Angosto ---------- */
@media (max-width: 720px) {
  .barra-filtros .campo { width: 100%; }
  .conteo { margin-left: 0; }
  main { padding: 16px 14px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   La ficha de un gimnasio y el dialogo de confirmacion.
   ============================================================ */

.btn-volver { margin-bottom: 18px; }
.btn-chico { padding: 5px 10px; font-size: 12.5px; margin-left: 6px; }

/* El boton de lo que no se deshace. Rojo, y con la palabra encima diciendo
   que hace: el color no es la unica senal. */
.btn-mal { background: var(--mal); color: var(--sobre-mal); }
.btn-mal:hover { filter: brightness(1.06); }

.ficha-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.ficha-cabeza .sub { margin: 0; }
.ficha-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 420px; justify-content: flex-end; }

/* Bloques con divisores, no tarjetas anidadas: la skill `diseno` solo permite
   anidar cuando hay pertenencia real, y aqui son secciones hermanas. */
.bloque { margin-bottom: 16px; }
.bloque .sub { margin-bottom: 14px; }
.bloque .tabla-scroll { margin-bottom: 14px; }

.rejilla-forma { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.rejilla-forma label { margin-top: 0; }
.rejilla-forma .nota { margin: 6px 0 0; }

.fila-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

.bitacora { list-style: none; margin: 0; padding: 0; }
.bitacora li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--linea);
}
.bitacora li:last-child { border-bottom: 0; }
.bitacora-op { font-weight: 500; margin-right: auto; }

/* ---------- El dialogo ----------
   `<dialog>` nativo: el foco atrapado, el `Esc` y el fondo inerte los pone el
   navegador. Reimplementarlos a mano es la clase de affordance que la skill
   `diseno` prohibe reinventar. */
.dialogo {
  width: min(440px, calc(100vw - 32px));
  padding: 22px;
  background: var(--tarjeta);
  color: var(--texto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-caja);
}
.dialogo::backdrop { background: rgb(0 0 0 / .6); }
.dialogo h2 { margin-bottom: 6px; }
.dialogo-quien { margin: 0 0 14px; color: var(--apagado); font-size: 12.5px; font-family: var(--f-mono); }
.dialogo-consecuencia { margin: 0 0 14px; color: var(--apagado); font-size: 13px; }
.dialogo-urgente { color: var(--aviso); }
.dialogo label { margin-top: 0; }
.dialogo-botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ============================================================
   Las vistas de la nube y el VPS.
   ============================================================ */

/* Las secciones. Son navegacion, no filtros: por eso no llevan cuenta al lado
   como las pildoras, y la activa se marca ademas con aria-current. */
.secciones { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--linea); }
.seccion-btn {
  padding: 9px 14px;
  background: transparent; color: var(--apagado);
  border: 0; border-bottom: 2px solid transparent;
  font: 500 13.5px/1 var(--f-cuerpo); cursor: pointer;
  margin-bottom: -1px;
}
.seccion-btn:hover { color: var(--texto); }
.seccion-btn.es-activa { color: var(--texto); border-bottom-color: var(--acento); }
.seccion-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.sub-titulo { margin-top: 20px; }

/* Pares etiqueta-valor. Rejilla uniforme y aqui SI corresponde: son elementos
   equivalentes y comparables, que es la excepcion que la skill `diseno` permite. */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 20px; }
.dato { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.dato-etiqueta { color: var(--apagado); font-size: 12.5px; flex: none; }
.dato-valor { color: var(--texto); font-size: 13px; overflow-wrap: anywhere; }
.texto-aviso { color: var(--aviso); }
/* El problema de un campo, debajo del campo. Rojo Y con su frase: el color no
   es la unica senal, igual que en el resto de la consola. */
.texto-mal { color: var(--mal); }

/* Las cifras del diff. Numero grande y etiqueta chica; sin `tabular-nums` en el
   numero porque a este tamano las figuras tabulares se ven flojas — la skill
   `diseno` lo dice y aqui aplica. */
.rejilla-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; margin: 14px 0; }
.cifra {
  padding: 12px; text-align: center;
  background: var(--tarjeta-2); border: 1px solid var(--linea); border-radius: var(--r-chico);
}
.cifra-num { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: normal; }
.cifra-et { display: block; margin-top: 2px; color: var(--apagado); font-size: 11.5px; }

/* Los registros. Envueltos y con scroll propio: una linea larga no puede
   empujar el ancho de la pagina. */
.registros {
  margin: 14px 0 0; padding: 12px;
  max-height: 420px; overflow: auto;
  background: var(--bg); border: 1px solid var(--linea); border-radius: var(--r-chico);
  font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}