/* dashboard.css */

/* ---- Página principal ---- */
.bienvenida { text-align: center; padding: var(--sp-10) var(--sp-4); }
.bienvenida-titulo { font-family: var(--font-titulo); font-size: 2.2rem; font-weight: 700; color: var(--cfe-verde-oscuro); margin-bottom: var(--sp-2); }
.bienvenida-subtitulo { font-size: var(--text-lg); color: var(--gris-500); margin-bottom: var(--sp-10); }

/* ---- Tarjetas subestación ---- */
.grid-subestaciones { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: var(--sp-6); max-width: 960px; margin: 0 auto; }
.tarjeta-subestacion {
  background: var(--blanco); border: 1px solid var(--gris-300);
  border-radius: 16px; padding: var(--sp-8) var(--sp-6);
  text-align: center; cursor: pointer; display: block;
  position: relative; overflow: hidden; color: var(--negro);
  transition: var(--trans-base);
}
.tarjeta-subestacion::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--cfe-verde);
  transform: scaleX(0); transition: var(--trans-base); transform-origin: left;
}
.tarjeta-subestacion:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); border-color: var(--cfe-verde); color: var(--negro); }
.tarjeta-subestacion:hover::before { transform: scaleX(1); }
.subestacion-icono { width: 64px; height: 64px; background: var(--cfe-verde-claro); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-4); font-size: 1.75rem; }
.subestacion-nombre { font-family: var(--font-titulo); font-size: var(--text-xl); font-weight: 700; color: var(--cfe-verde-oscuro); margin-bottom: var(--sp-2); }
.subestacion-meta { font-size: var(--text-sm); color: var(--gris-500); }
.subestacion-stats { display: flex; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--gris-200); }
.subestacion-stat-val { font-family: var(--font-titulo); font-size: var(--text-xl); font-weight: 700; color: var(--cfe-verde); display: block; }
.subestacion-stat-label { font-size: var(--text-xs); color: var(--gris-500); }

/* ---- Sitios ---- */
.sitios-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: var(--sp-5); }
.tarjeta-sitio { background: var(--blanco); border: 1px solid var(--gris-300); border-radius: var(--radio-lg); overflow: hidden; display: block; color: var(--negro); transition: var(--trans-base); }
.tarjeta-sitio:hover { box-shadow: var(--sombra-md); color: var(--negro); }
.tarjeta-sitio-cabecera { background: var(--cfe-verde-oscuro); padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; justify-content: space-between; }
.tarjeta-sitio-nombre { font-family: var(--font-titulo); font-size: var(--text-lg); font-weight: 700; color: var(--blanco); }
.tarjeta-sitio-cuerpo { padding: var(--sp-5); background: var(--blanco); }
.lecturas-resumen { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.lectura-item { flex: 1; min-width: 110px; background: var(--cfe-verde-claro); border-radius: var(--radio-md); padding: var(--sp-3) var(--sp-4); text-align: center; }
.lectura-item.sin-datos { background: var(--gris-100); }
.lectura-sensor { font-size: var(--text-xs); color: var(--gris-600); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-1); }
.lectura-temp { font-family: var(--font-titulo); font-size: var(--text-2xl); font-weight: 700; color: var(--cfe-verde-oscuro); line-height: 1; }
.lectura-temp.alerta  { color: var(--color-peligro); }
.lectura-temp.warning { color: var(--color-alerta); }
.lectura-temp.frio    { color: var(--color-info); }
.lectura-hum { font-size: var(--text-sm); color: var(--gris-500); margin-top: var(--sp-1); }
.lectura-tiempo { font-size: var(--text-xs); color: var(--gris-400); margin-top: var(--sp-2); display: flex; align-items: center; gap: 4px; justify-content: center; }
.lectura-tiempo.desactualizado { color: var(--color-peligro); }

/* ---- Indicadores grandes ---- */
.indicador-grande { background: var(--blanco); border: 1px solid var(--gris-300); border-radius: 16px; padding: var(--sp-8); text-align: center; position: relative; overflow: hidden; }
.indicador-grande::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--cfe-verde); }
.indicador-grande.alerta::after  { background: var(--color-peligro); }
.indicador-grande.warning::after { background: var(--color-alerta); }
.indicador-grande.frio::after    { background: var(--color-info); }
.indicador-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris-500); margin-bottom: var(--sp-3); }
.indicador-valor { font-family: var(--font-titulo); font-size: 3.5rem; font-weight: 700; color: var(--cfe-verde-oscuro); line-height: 1; }
.indicador-valor.alerta  { color: var(--color-peligro); }
.indicador-valor.warning { color: var(--color-alerta); }
.indicador-valor.frio    { color: var(--color-info); }
.indicador-unidad { font-size: var(--text-xl); font-weight: 400; opacity: 0.6; }

/* ---- Contador ---- */
.contador-actualizacion { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--gris-400); }
.contador-barra { flex: 1; max-width: 120px; height: 3px; background: var(--gris-200); border-radius: 2px; overflow: hidden; }
.contador-progreso { height: 100%; background: var(--cfe-verde); border-radius: 2px; transition: width 1s linear; }

/* ---- Login ---- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cfe-verde-oscuro);
  padding: var(--sp-4);
}

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--cfe-verde-oscuro); padding: var(--sp-4); }
.login-card { background: var(--blanco); border-radius: 16px; padding: var(--sp-10) var(--sp-8); width: 100%; max-width: 420px; box-shadow: var(--sombra-lg); }
.login-logos { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.login-logo-cfe { height: 48px; width: auto; }
.login-logo-gob { height: 38px; width: auto; opacity: 0.85; }
.login-titulo { font-family: var(--font-titulo); font-size: var(--text-2xl); font-weight: 700; color: var(--cfe-verde-oscuro); text-align: center; margin-bottom: var(--sp-2); }
.login-subtitulo { font-size: var(--text-sm); color: var(--gris-500); text-align: center; margin-bottom: var(--sp-8); }

/* ---- Roles resumen ---- */
.rol-card { background: var(--blanco); border: 1px solid var(--gris-300); border-radius: var(--radio-lg); padding: var(--sp-4); }

@media (max-width: 768px) {
  .bienvenida-titulo { font-size: var(--text-2xl); }
  .indicador-valor   { font-size: 2.5rem; }
  .login-card        { padding: var(--sp-8) var(--sp-5); }
}