/* ==========================================================================
   Casa Inteligente ESP32 — style.css
   Diseño oscuro tipo domótica (inspirado en Google Home / SmartThings /
   Home Assistant, sin copiar ninguno). Solo CSS puro, sin frameworks.
   ========================================================================== */

:root{
  --fondo-1: #0b0d14;
  --fondo-2: #131625;
  --fondo-3: #0e1120;

  --vidrio: rgba(255,255,255,0.045);
  --vidrio-borde: rgba(255,255,255,0.09);

  --texto: #eef0f6;
  --texto-tenue: #9296a8;
  --texto-muy-tenue: #6a6e80;

  --acento: #5b8cff;
  --acento-suave: rgba(91,140,255,0.18);

  --verde: #34d399;
  --verde-suave: rgba(52,211,153,0.16);

  --rojo: #f75c5c;
  --rojo-suave: rgba(247,92,92,0.16);

  --amarillo: #fbbf24;
  --amarillo-suave: rgba(251,191,36,0.16);

  --gris-btn: #262a3a;
  --gris-btn-hover: #303650;

  --radio-tarjeta: 22px;
  --radio-boton: 14px;
  --sombra-tarjeta: 0 10px 30px rgba(0,0,0,0.35);
}

*{
  box-sizing: border-box;
}

html, body{
  margin:0;
  padding:0;
  max-width:100%;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 0%, #1a2140 0%, transparent 55%),
    radial-gradient(circle at 85% 15%, #201530 0%, transparent 50%),
    linear-gradient(180deg, var(--fondo-1) 0%, var(--fondo-2) 45%, var(--fondo-3) 100%);
  color: var(--texto);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: 60px;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   ENCABEZADO
   ========================================================================== */
.encabezado{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:space-between;
  align-items:center;
  padding: 22px 24px;
  background: var(--vidrio);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vidrio-borde);
  position: sticky;
  top:0;
  z-index: 50;
}

.encabezado-titulo{
  display:flex;
  align-items:center;
  gap:14px;
}

.encabezado-icono{
  font-size:2rem;
  line-height:1;
}

.encabezado-titulo h1{
  margin:0;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:0.2px;
}

.subtitulo{
  margin:2px 0 0 0;
  color:var(--texto-tenue);
  font-size:0.82rem;
}

.encabezado-estado{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  font-size:0.82rem;
}

.estado-conexion{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}

.punto-conexion{
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--amarillo);
  box-shadow: 0 0 0 4px rgba(251,191,36,0.18);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.punto-conexion.conectado{
  background: var(--verde);
  box-shadow: 0 0 0 4px var(--verde-suave);
  animation: respirar-punto 2.4s ease-in-out infinite;
}

.punto-conexion.desconectado{
  background: var(--rojo);
  box-shadow: 0 0 0 4px var(--rojo-suave);
}

.encabezado-datos{
  color: var(--texto-tenue);
}

.separador{
  margin: 0 6px;
  opacity: 0.5;
}

/* ==========================================================================
   GRID PRINCIPAL RESPONSIVE
   Movil: 1 columna | Tablet: 2 columnas | Escritorio: varias columnas
   ========================================================================== */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 700px){
  .grid{
    grid-template-columns: repeat(2, 1fr);
    padding: 24px;
  }
}

@media (min-width: 1100px){
  .grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .tarjeta-ancha{
    grid-column: span 2;
  }
}

@media (min-width: 1500px){
  .grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   TARJETAS (glassmorphism discreto)
   ========================================================================== */
.tarjeta{
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-tarjeta);
  padding: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sombra-tarjeta);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.15s ease;
  animation: aparecer-tarjeta 0.45s ease both;
}

.grid .tarjeta:nth-child(1){ animation-delay: 0.02s; }
.grid .tarjeta:nth-child(2){ animation-delay: 0.05s; }
.grid .tarjeta:nth-child(3){ animation-delay: 0.08s; }
.grid .tarjeta:nth-child(4){ animation-delay: 0.11s; }
.grid .tarjeta:nth-child(5){ animation-delay: 0.14s; }
.grid .tarjeta:nth-child(6){ animation-delay: 0.17s; }
.grid .tarjeta:nth-child(7){ animation-delay: 0.20s; }
.grid .tarjeta:nth-child(8){ animation-delay: 0.23s; }
.grid .tarjeta:nth-child(9){ animation-delay: 0.26s; }

.tarjeta-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 16px;
}

.tarjeta-header h2{
  margin:0;
  font-size:1rem;
  font-weight:650;
  flex:1;
}

.tarjeta-icono{
  font-size:1.4rem;
  line-height:1;
}

/* ==========================================================================
   BADGES DE ESTADO
   ========================================================================== */
.badge{
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  background: rgba(255,255,255,0.06);
  color: var(--texto-tenue);
}

.badge-ok{ background: var(--verde-suave); color: var(--verde); }
.badge-off{ background: var(--rojo-suave); color: var(--rojo); }
.badge-alerta{ background: var(--amarillo-suave); color: var(--amarillo); }
.badge-neutro{ background: rgba(255,255,255,0.07); color: var(--texto-tenue); }
.badge-info{ background: var(--acento-suave); color: var(--acento); }

/* ==========================================================================
   BOTONES (sin apariencia nativa del navegador)
   ========================================================================== */
.fila-botones{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  position:relative;
  flex:1 1 auto;
  min-width: 110px;
  min-height: 48px;
  padding: 13px 16px;
  border:none;
  border-radius: var(--radio-boton);
  font-size: 0.92rem;
  font-weight:650;
  font-family: inherit;
  color: var(--texto);
  background: var(--gris-btn);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover{ background: var(--gris-btn-hover); }
.btn:active{ transform: scale(0.96); }

.btn:disabled{
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.btn-encender{ background: var(--acento); color:#04122e; }
.btn-encender:hover{ background:#77a2ff; }

.btn-apagar{ background: var(--gris-btn); color: var(--texto); }
.btn-apagar:hover{ background: var(--gris-btn-hover); }

.btn-alarma-on{ background: var(--rojo); color:#3a0d0c; }
.btn-alarma-on:hover{ background:#ff7d7d; }

.btn-alarma-off{ background: var(--gris-btn); color: var(--texto); }

.btn-reiniciar{ background: var(--rojo); color:#3a0d0c; width:100%; }
.btn-reiniciar:hover{ background:#ff7d7d; }

/* Spinner dentro del boton mientras se procesa un comando */
.btn-spinner{
  display:none;
  width:16px;
  height:16px;
  border-radius:50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.95);
  animation: girar-spinner 0.7s linear infinite;
}

.btn.cargando .btn-texto{ opacity:0.55; }
.btn.cargando .btn-spinner{ display:inline-block; }

/* ==========================================================================
   BOTONES CIRCULARES DE COLOR (RGB)
   ========================================================================== */
.fila-colores{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.color-btn{
  width:44px;
  height:44px;
  border-radius:50%;
  border: 3px solid rgba(255,255,255,0.12);
  cursor:pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position:relative;
}

.color-btn:active{ transform: scale(0.9); }

.color-btn.color-red{ background: radial-gradient(circle at 35% 30%, #ff8a8a, #e53939); }
.color-btn.color-green{ background: radial-gradient(circle at 35% 30%, #8effc2, #1fae63); }
.color-btn.color-blue{ background: radial-gradient(circle at 35% 30%, #8ab4ff, #2a5be0); }
.color-btn.color-white{ background: radial-gradient(circle at 35% 30%, #ffffff, #cfd3dc); }
.color-btn.color-off{ background: #1c1f2b; }
.color-btn.color-off::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border: 2px solid var(--texto-tenue);
}
.color-btn.color-auto{
  background: conic-gradient(from 0deg, #ff5c5c, #ffd15c, #5cff8f, #5cc6ff, #a25cff, #ff5c5c);
}

.color-btn.activo{
  border-color:#fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.14), 0 0 18px rgba(255,255,255,0.25);
  transform: scale(1.08);
}

/* ==========================================================================
   INDICADOR DE BRILLO (luz amarilla)
   ========================================================================== */
.indicador-brillo{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 16px;
  overflow:hidden;
  transition: box-shadow 0.3s ease;
}

.indicador-brillo.encendida{
  background: linear-gradient(90deg, #ffd166, #ffb703);
  box-shadow: 0 0 16px rgba(255,183,3,0.55);
  animation: brillo-pulso 2.2s ease-in-out infinite;
}

/* ==========================================================================
   ICONO GRANDE DE ESTADO (puertas)
   ========================================================================== */
.icono-estado{
  font-size: 2.6rem;
  text-align:center;
  padding: 10px 0 16px 0;
  transition: transform 0.4s ease, opacity 0.3s ease;
  opacity: 0.55;
}

.icono-estado.abierta{
  opacity: 1;
  transform: translateY(-2px) scale(1.05);
}

.icono-estado.movimiento{
  animation: vibrar-icono 0.4s ease-in-out infinite;
  opacity: 0.85;
}

/* Puerta principal: se "abre" deslizando un poco y rotando levemente */
#tarjeta-puerta-principal .icono-estado.abierta{
  animation: abrir-puerta-principal 0.5s ease;
}

/* Puerta del estacionamiento: animacion distinta, como portón que sube */
#tarjeta-puerta-estacionamiento .icono-estado.abierta{
  animation: abrir-estacionamiento 0.5s ease;
}

/* ==========================================================================
   VENTILADOR: icono giratorio
   ========================================================================== */
.icono-ventilador.girando{
  display:inline-block;
  animation: girar-ventilador 1.1s linear infinite;
}

/* ==========================================================================
   TARJETA DE ALERTA (seguridad)
   ========================================================================== */
.tarjeta.alerta{
  border-color: var(--rojo);
  background: linear-gradient(160deg, rgba(247,92,92,0.14), rgba(247,92,92,0.03));
  animation: parpadeo-alerta 1.4s ease-in-out infinite;
}

/* ==========================================================================
   INFORMACION EN REJILLA (dentro de tarjetas anchas)
   ========================================================================== */
.rejilla-info{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.info-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.05);
}

.info-etiqueta{
  font-size: 0.72rem;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.info-valor{
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texto);
  word-break: break-word;
}

/* ==========================================================================
   MEDIDOR (barra de progreso del sensor de vapor/lluvia)
   ========================================================================== */
.medidor{
  display:flex;
  align-items:center;
  gap:12px;
}

.medidor-barra{
  flex:1;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow:hidden;
}

.medidor-relleno{
  height:100%;
  border-radius: 999px;
  background: var(--verde);
  transition: width 0.4s ease, background 0.4s ease;
}

.medidor-relleno.nivel-humedad{ background: var(--amarillo); }
.medidor-relleno.nivel-agua{ background: var(--rojo); }

.medidor-valor{
  font-size: 0.85rem;
  font-weight:700;
  color: var(--texto-tenue);
  min-width: 42px;
  text-align:right;
}

/* ==========================================================================
   PIE DE PAGINA
   ========================================================================== */
.pie{
  text-align:center;
  color: var(--texto-muy-tenue);
  font-size: 0.75rem;
  margin-top: 10px;
  padding: 10px;
}

/* ==========================================================================
   MODAL DE CONFIRMACION
   ========================================================================== */
.modal-fondo{
  position: fixed;
  inset: 0;
  background: rgba(5,6,12,0.65);
  backdrop-filter: blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.2s ease;
  z-index: 100;
}

.modal-fondo.visible{
  opacity:1;
  pointer-events:auto;
}

.modal-caja{
  background: linear-gradient(160deg, #1b1f30, #131625);
  border: 1px solid var(--vidrio-borde);
  border-radius: 20px;
  padding: 26px;
  max-width: 380px;
  width:100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  transform: translateY(10px);
  transition: transform 0.25s ease;
}

.modal-fondo.visible .modal-caja{
  transform: translateY(0);
}

.modal-caja h3{
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.modal-caja p{
  margin: 0 0 20px 0;
  color: var(--texto-tenue);
  font-size: 0.88rem;
  line-height:1.5;
}

.modal-botones{
  display:flex;
  gap:10px;
}

/* ==========================================================================
   TOASTS
   ========================================================================== */
.toast-contenedor{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index: 200;
  width: 100%;
  max-width: 360px;
  padding: 0 16px;
  align-items:center;
}

.toast{
  width:100%;
  background: rgba(24,27,40,0.95);
  border: 1px solid var(--vidrio-borde);
  border-left: 4px solid var(--acento);
  color: var(--texto);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  animation: entrada-toast 0.25s ease, salida-toast 0.3s ease 2.7s forwards;
}

.toast.toast-error{ border-left-color: var(--rojo); }
.toast.toast-exito{ border-left-color: var(--verde); }

/* ==========================================================================
   ANIMACIONES (keyframes)
   ========================================================================== */
@keyframes aparecer-tarjeta{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes respirar-punto{
  0%, 100%{ box-shadow: 0 0 0 4px var(--verde-suave); }
  50%{ box-shadow: 0 0 0 7px rgba(52,211,153,0.05); }
}

@keyframes girar-spinner{
  to{ transform: rotate(360deg); }
}

@keyframes brillo-pulso{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.65; }
}

@keyframes vibrar-icono{
  0%, 100%{ transform: translateX(0); }
  25%{ transform: translateX(-2px) rotate(-2deg); }
  75%{ transform: translateX(2px) rotate(2deg); }
}

@keyframes abrir-puerta-principal{
  0%{ transform: translateX(0) rotateY(0deg); }
  100%{ transform: translateX(-4px) rotateY(-25deg); }
}

@keyframes abrir-estacionamiento{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-6px); }
}

@keyframes girar-ventilador{
  to{ transform: rotate(360deg); }
}

@keyframes parpadeo-alerta{
  0%, 100%{ border-color: var(--rojo); }
  50%{ border-color: rgba(247,92,92,0.35); }
}

@keyframes entrada-toast{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes salida-toast{
  to{ opacity:0; transform: translateY(-6px); }
}

/* ==========================================================================
   AJUSTES FINOS EN PANTALLAS MUY PEQUENAS
   ========================================================================== */
@media (max-width: 380px){
  .encabezado{ padding: 16px; }
  .encabezado-titulo h1{ font-size: 1.05rem; }
  .grid{ padding: 14px; gap: 14px; }
  .tarjeta{ padding: 16px; }
  .btn{ min-width: 100px; font-size: 0.85rem; }
}