/* ============================================================
   Cámaras de Casa — estilos
   Diseño "mobile-first": primero se ve bien en celular,
   y en pantallas grandes se acomoda en varias columnas.
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --fondo: #0f1115;
  --tarjeta: #181b22;
  --borde: #262a33;
  --texto: #e8eaed;
  --texto-suave: #9aa0aa;
  --verde: #34d399;
  --rojo: #f87171;
  --amarillo: #fbbf24;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  /* Respeta los bordes redondeados / notch de los celulares */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(15, 17, 21, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
  padding: 14px 16px;
  text-align: center;
}

.topbar h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ---------- Grid de cámaras ---------- */
.grid {
  display: grid;
  grid-template-columns: 1fr;     /* 1 columna en celular */
  gap: 14px;
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Tablet / pantallas medianas: 2 columnas */
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Monitor grande: 3 columnas */
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tarjeta de cámara ---------- */
.camara {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.camara__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}

.camara__nombre {
  font-size: 15px;
  font-weight: 600;
}

/* Punto de estado (verde = en vivo, amarillo = conectando, rojo = error) */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--texto-suave);
}

.estado__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amarillo);
  flex-shrink: 0;
}

.estado--vivo .estado__punto {
  background: var(--verde);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  animation: latido 2s infinite;
}
.estado--error .estado__punto { background: var(--rojo); }

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ---------- Imagen del stream ---------- */
.camara__video {
  position: relative;
  background: #000;
  aspect-ratio: 4 / 3;     /* mantiene el espacio aunque no haya imagen aún */
  display: flex;
  align-items: center;
  justify-content: center;
}

.camara__video img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Texto mientras carga (se oculta cuando llega la primera imagen) */
.camara__cargando {
  position: absolute;
  font-size: 13px;
  color: var(--texto-suave);
}

/* ---------- Botones sobre el video (ampliar / pantalla completa) ---------- */
.camara__controles {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.boton-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.boton-accion:hover { background: rgba(0, 0, 0, 0.75); }
.boton-accion svg { display: block; }

/* ---------- Modo teatro: panel centrado sobre un fondo oscurecido ---------- */
.camara--ampliada {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: min(94vw, 1100px);
  max-height: 92vh;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: panel-aparece 0.18s ease-out;
}

/* Fondo oscurecido y difuminado detrás del panel (cubre toda la pantalla).
   "pointer-events: none" deja pasar el clic al fondo para poder cerrar. */
.camara--ampliada::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(10, 12, 16, 0.72);
  backdrop-filter: blur(6px);
  pointer-events: none;
  animation: fondo-aparece 0.18s ease-out;
}

@keyframes panel-aparece {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fondo-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* El video en modo teatro mantiene su proporción y se limita a la altura útil */
.camara--ampliada .camara__video {
  aspect-ratio: 4 / 3;
  max-height: calc(92vh - 56px); /* deja espacio para la cabecera con el nombre */
}

/* La pantalla completa nativa sí llena todo (sin barra negra ni recorte).
   El "max-height: none" anula el tope del modo teatro por si se entró desde ahí. */
.camara:fullscreen .camara__video {
  flex: 1;
  aspect-ratio: auto;
  max-height: none;
}

/* Variante con prefijo para navegadores algo más viejos (WebKit) */
.camara:-webkit-full-screen .camara__video {
  flex: 1;
  aspect-ratio: auto;
  max-height: none;
}

/* En pantalla completa el botón "Ampliar" no aplica: se oculta para que no
   se mezclen ambos modos (cada prefijo va en su propia regla). */
.camara:fullscreen .js-ampliar { display: none; }
.camara:-webkit-full-screen .js-ampliar { display: none; }

/* Si el panel teatro pasa a pantalla completa nativa, se resetea para llenar
   toda la pantalla (anula el tamaño/posición del modo teatro). */
.camara:fullscreen {
  width: 100%;
  max-width: none;
  max-height: none;
  top: 0;
  left: 0;
  transform: none;
  border: none;
  border-radius: 0;
}

/* Bloquea el scroll del fondo mientras hay una cámara ampliada */
.sin-scroll { overflow: hidden; }