/* SPACE EYES — estilos del sistema.
 *
 * Brand Book V2 de AS Network, reglas de SPACE OS: flat absoluto (cero sombras,
 * cero gradientes, bordes de 1px), tinta calida sobre blanco/crema, azul
 * electrico como unico color de producto, verde solo para "verificado".
 * La paleta y las fuentes se definen en src/js/tema.js; aqui van los
 * componentes que se repiten en todas las pantallas.
 */
:root {
  --se-tinta: #1C1612;
  --se-secundario: #7F7262;
  --se-borde: #EAE4D8;
  --se-crema: #F4EDDE;
  --se-fondo: #FBF9F4;
  --se-azul: #0A66FF;
  --se-verde: #1DA850;
  --se-ambar: #F59E0B;
  --se-rojo: #D93025;
}

[x-cloak] { display: none !important; }

body {
  font-family: "General Sans", system-ui, sans-serif;
  color: var(--se-tinta);
  -webkit-font-smoothing: antialiased;
}
/* Cifras que se comparan entre si: todas del mismo ancho. */
.font-mono, .tabular-nums { font-variant-numeric: tabular-nums; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--se-fondo); }
::-webkit-scrollbar-thumb { background: #D9D0C1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B3A794; }

/* Loading spinner */
.spinner {
  border: 2px solid var(--se-borde);
  border-top-color: var(--se-azul);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Tarjeta con hover: solo cambia el borde (sin sombras). */
.card-hover { transition: border-color 0.15s ease; }
.card-hover:hover { border-color: #B3A794; }

/* ---- Titulos ------------------------------------------------------------- */
.se-titulo {
  font-family: "Cabinet Grotesk", "General Sans", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
/* Etiqueta tecnica encima de un bloque: "PANTALLA · 15 GABINETES". */
.se-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--se-secundario);
}

/* ---- Tarjetas y secciones --------------------------------------------------- */
.se-card {
  background: #fff;
  border: 1px solid var(--se-borde);
  border-radius: 8px;
}
.se-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--se-borde);
}
.se-card-title { font-weight: 600; font-size: 15px; }
.se-card-sub { font-size: 12.5px; color: var(--se-secundario); margin-top: 2px; }
.se-card-body { padding: 16px 18px; }
/* Subseccion dentro de una tarjeta, separada por una linea. */
.se-divisor { border-top: 1px solid var(--se-borde); }

/* Filas etiqueta / valor ("Bateria ........ 100%"). */
.se-dato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13.5px;
}
.se-dato + .se-dato { border-top: 1px solid #F3EFE6; }
.se-dato > :first-child { color: var(--se-secundario); }
.se-dato > :last-child { font-weight: 500; text-align: right; }

/* Indicador clave: etiqueta pequeña + cifra grande en mono. */
.se-kpi {
  background: #fff;
  border: 1px solid var(--se-borde);
  border-radius: 8px;
  padding: 12px 14px;
  min-width: 0;
}
.se-kpi-label { font-size: 12px; color: var(--se-secundario); }
.se-kpi-valor {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-kpi-nota { font-size: 12px; color: var(--se-secundario); margin-top: 1px; }

/* ---- Estados ------------------------------------------------------------------ */
.se-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--se-borde);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: #fff;
  color: var(--se-secundario);
}
.se-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.se-badge-ok { color: #178A42; border-color: #CDEFD9; background: #F3FBF6; }
.se-badge-alerta { color: #B06F04; border-color: #FDE9C4; background: #FFFAF0; }
.se-badge-falla { color: #B3261E; border-color: #F6D3CF; background: #FDF4F3; }
.se-badge-info { color: #0852CC; border-color: #D6E5FF; background: #F5F8FF; }
.se-badge-sin-punto::before { display: none; }

/* Aviso dentro de una seccion. */
.se-aviso {
  border: 1px solid var(--se-borde);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  background: #fff;
}
.se-aviso-alerta { border-left-color: var(--se-ambar); background: #FFFAF0; }
.se-aviso-falla { border-left-color: var(--se-rojo); background: #FDF4F3; }
.se-aviso-info { border-left-color: var(--se-azul); background: #F5F8FF; }

/* ---- Botones: primario, secundario, discreto y peligroso ----------------------- */
.se-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.se-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.se-btn-primario { background: var(--se-azul); color: #fff; }
.se-btn-primario:hover:not(:disabled) { background: #0852CC; }
.se-btn-secundario { background: #fff; color: var(--se-tinta); border-color: #D9D0C1; }
.se-btn-secundario:hover:not(:disabled) { border-color: var(--se-tinta); }
.se-btn-discreto { background: transparent; color: #0852CC; padding-left: 6px; padding-right: 6px; }
.se-btn-discreto:hover:not(:disabled) { background: #F5F8FF; }
.se-btn-peligro { background: #fff; color: #B3261E; border-color: #F0C4BF; }
.se-btn-peligro:hover:not(:disabled) { border-color: #B3261E; }
.se-btn-chico { padding: 5px 10px; font-size: 12.5px; }

/* ---- Pestañas ---------------------------------------------------------------------- */
.se-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--se-borde);
  overflow-x: auto;
  scrollbar-width: none;
}
.se-tabs::-webkit-scrollbar { display: none; }
.se-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--se-secundario);
  white-space: nowrap;
}
.se-tab:hover { color: var(--se-tinta); }
.se-tab-activa { color: var(--se-tinta); border-bottom-color: var(--se-azul); }
.se-tab-contador {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 999px;
  background: #B3261E;
  color: #fff;
}

/* Indicadores de la ficha: tira que se desliza en pantallas chicas, rejilla en
   las grandes. Asi el celular ve el video sin bajar media pagina. */
.se-kpis {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: -16px;
  padding-inline: 16px;
}
.se-kpis::-webkit-scrollbar { display: none; }
.se-kpis > * { flex: 0 0 auto; min-width: 148px; scroll-snap-align: start; }
@media (min-width: 640px) {
  .se-kpis { margin-inline: -24px; padding-inline: 24px; }
}
@media (min-width: 1024px) {
  .se-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .se-kpis > * { min-width: 0; }
}

/* ---- El visor de la vista en vivo ------------------------------------------
 *
 * TIENE QUE CABER EN LA VENTANA, SIEMPRE. Antes el recuadro era `aspect-[4/3]`
 * a secas: la altura salia del ancho, y el ancho sale de la columna. En una
 * pantalla grande eso da un visor de 800 px de alto que, sumado a la cabecera y
 * a las pestanas, empuja los mandos fuera de la ventana — justo los mandos que
 * se usan MIENTRAS se mira el video, que es cuando menos ganas hay de andar
 * buscandolos con la rueda del raton.
 *
 * Asi que manda la altura disponible, no el ancho: el visor no crece mas alla
 * de lo que queda de ventana, y para no deformarse tampoco crece de ancho mas
 * de lo que esa altura permite con su proporcion. Cuando la ventana es baja se
 * encoge y queda centrado; cuando es angosta se comporta como siempre.
 *
 * `--se-visor-reserva` es lo que ocupa todo lo demas. La cuenta esta MEDIDA
 * sobre la pagina, no puesta a ojo:
 *   barra superior            64px  (h-16)
 *   barra fija de acciones    52px  (sm:top-16, py-2.5)
 *   margen de la columna      24px  (pt-6)
 *   cabecera de la tarjeta    57px  (p-4 + borde)
 *   margen inferior           32px  (pb-8)
 *                            ─────
 *                            229px  ≈ 14.5rem
 *
 * Si algun dia cambia el encabezado se ajusta AQUI, no en cinco reglas sueltas.
 */
:root { --se-visor-reserva: 14.5rem; }

.se-visor {
  aspect-ratio: 4 / 3;
  /* `dvh` y no `vh`: en el movil la barra del navegador aparece y desaparece, y
   * con `vh` el visor se pasa de largo justo cuando la barra esta a la vista. */
  max-height: calc(100dvh - var(--se-visor-reserva));
  width: min(100%, calc((100dvh - var(--se-visor-reserva)) * 4 / 3));
  /* Por debajo de esto el video ya no se ve: es preferible que la pagina
   * desplace a dejar una rendija negra. */
  min-height: 220px;
  margin-inline: auto;
}

/* En movil la tarjeta va a todo lo ancho y hay una barra de acciones abajo, asi
 * que hay que reservar mas y dejar que el ancho mande. */
@media (max-width: 1023px) {
  /* En movil la barra de acciones se va ABAJO (bottom-0, ~72px) y la columna
   * ya no comparte fila, asi que la cuenta cambia: 64 + 24 + 57 + 72 + respiro. */
  :root { --se-visor-reserva: 15rem; }
  .se-visor { width: 100%; }
}

/* Navegadores sin `dvh` (Safari viejo): se cae a `vh`, que es casi lo mismo en
 * escritorio y solo se equivoca por la barra del movil. */
@supports not (height: 100dvh) {
  .se-visor {
    max-height: calc(100vh - var(--se-visor-reserva));
    width: min(100%, calc((100vh - var(--se-visor-reserva)) * 4 / 3));
  }
}