/* ===========================================================================
 * status.css - Panel de estado de servicios del portal Hablame Developers.
 *
 * Estilos del panel renderizado por status.js. Se carga DESPUÉS de portal.css
 * para que los tokens `--hb-*` ya estén disponibles.
 *
 * Tonos (mapeo desde StatusIQ → la API devuelve `tone`):
 *   success = operacional (verde)
 *   warning = degradado / interrupción parcial (ámbar)
 *   danger  = caído / interrupción mayor (rojo)
 *   info    = mantenimiento (azul brand)
 *   muted   = desconocido / cargando (gris)
 * ======================================================================== */

:root {
  --st-tone-success: #16a34a;
  --st-tone-warning: #b45309;
  --st-tone-danger:  #b91c1c;
  --st-tone-info:    #0066b3;
  --st-tone-muted:   #64748b;
  /* RGB tuples para construir backgrounds con alpha que se sienten "vivos"
     y mantienen contraste 4.5:1+ en modo claro. */
  --st-rgb-success:  22, 163, 74;
  --st-rgb-warning:  217, 119, 6;
  --st-rgb-danger:   220, 38, 38;
  --st-rgb-info:     0, 153, 255;
  --st-rgb-muted:    100, 116, 139;
  --st-bg-tint:      0.10;
  --st-border-tint:  0.28;
  /* Shimmer del skeleton: oscuro sobre fondo claro. */
  --st-shimmer: rgba(15, 23, 42, 0.08);
}
[data-bs-theme="dark"],
.status-hero,                        /* hero siempre dark-themed */
.status-hero * {
  /* Tonos brillantes para asegurar AA en superficies oscuras. */
  --st-tone-success: #4ade80;
  --st-tone-warning: #fbbf24;
  --st-tone-danger:  #f87171;
  --st-tone-info:    #38bdf8;
  --st-tone-muted:   #cbd5e1;
  --st-rgb-success:  74, 222, 128;
  --st-rgb-warning:  251, 191, 36;
  --st-rgb-danger:   248, 113, 113;
  --st-rgb-info:     56, 189, 248;
  --st-rgb-muted:    203, 213, 225;
  --st-bg-tint:      0.18;
  --st-border-tint:  0.40;
  /* Shimmer: claro sobre fondo oscuro. */
  --st-shimmer: rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --st-tone-success: #4ade80;
    --st-tone-warning: #fbbf24;
    --st-tone-danger:  #f87171;
    --st-tone-info:    #38bdf8;
    --st-tone-muted:   #cbd5e1;
    --st-rgb-success:  74, 222, 128;
    --st-rgb-warning:  251, 191, 36;
    --st-rgb-danger:   248, 113, 113;
    --st-rgb-info:     56, 189, 248;
    --st-rgb-muted:    203, 213, 225;
    --st-bg-tint:      0.18;
    --st-border-tint:  0.40;
    --st-shimmer: rgba(255, 255, 255, 0.08);
  }
}

/* ---------- Hero / cabecera ---------------------------------------------- */
.status-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--hb-radius-lg);
  background:
    radial-gradient(1200px 400px at 90% -10%, rgba(0, 212, 255, 0.25), transparent 60%),
    radial-gradient(800px 300px at 0% 110%, rgba(0, 153, 255, 0.30), transparent 60%),
    linear-gradient(135deg, #001E3C 0%, #003e76 45%, #0066b3 100%);
  color: #fff;
  margin-bottom: 2rem;
  box-shadow: var(--hb-shadow-lg);
  border: 1px solid transparent;
}
/* Dark mode: el hero deja de ser un bloque de azul brillante (disonante con
   el fondo casi-negro de la página) y pasa a un charcoal/navy oscuro con
   acentos brand sutiles. Mantiene identidad sin gritar. */
[data-bs-theme="dark"] .status-hero {
  background:
    radial-gradient(1100px 400px at 85% -10%, rgba(0, 212, 255, 0.10), transparent 65%),
    radial-gradient(900px 320px at 5% 110%, rgba(0, 153, 255, 0.10), transparent 65%),
    linear-gradient(135deg, #0a1424 0%, #0e1a30 60%, #112540 100%);
  border-color: rgba(0, 212, 255, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.10), 0 18px 50px -28px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .status-hero {
    background:
      radial-gradient(1100px 400px at 85% -10%, rgba(0, 212, 255, 0.10), transparent 65%),
      radial-gradient(900px 320px at 5% 110%, rgba(0, 153, 255, 0.10), transparent 65%),
      linear-gradient(135deg, #0a1424 0%, #0e1a30 60%, #112540 100%);
    border-color: rgba(0, 212, 255, 0.18);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.10), 0 18px 50px -28px rgba(0, 0, 0, 0.7);
  }
}
.status-hero::before {
  /* Trama de puntos sutil arriba a la derecha (textura "monitoreo"). */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 0 0;
  mask-image: linear-gradient(135deg, transparent 30%, #000 80%);
  -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000 80%);
  pointer-events: none;
}

.status-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 2.5rem 2rem;
}
@media (min-width: 768px) {
  .status-hero-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 3rem 2.5rem;
  }
}

.status-hero-content { min-width: 0; }

.status-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  margin-bottom: 1rem;
}
.status-hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
  animation: stHeroPulse 2s ease-in-out infinite;
}
@keyframes stHeroPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25); }
  50%     { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.10); }
}

.status-hero-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
  color: #fff;
}
.status-hero-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
  margin: 0 0 1.25rem;
}

/* Pill grande de status global (refleja el snapshot al resolver el fetch). */
.status-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.status-hero-pill .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--st-tone-muted);
  box-shadow: 0 0 0 4px rgba(var(--st-rgb-muted), 0.30);
}
.status-hero-pill.tone-success .dot {
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.30);
  animation: stHeroPulse 2s ease-in-out infinite;
}
.status-hero-pill.tone-warning .dot { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.30); }
.status-hero-pill.tone-danger  .dot { background: #f87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.30); }
.status-hero-pill.tone-info    .dot { background: #00d4ff; box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.30); }
.status-hero-pill.tone-success { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.45); }
.status-hero-pill.tone-warning { background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.45); }
.status-hero-pill.tone-danger  { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.45); }
.status-hero-pill.tone-info    { background: rgba(0, 212, 255, 0.14); border-color: rgba(0, 212, 255, 0.45); }

/* Visual: pulsos concéntricos + onda heartbeat. */
.status-hero-visual {
  position: relative;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  justify-self: end;
  display: none;
}
@media (min-width: 768px) {
  .status-hero-visual { display: block; }
}
.status-hero-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}
.status-hero-visual .pulse-ring {
  transform-origin: 100px 100px;
  transform-box: fill-box;
  fill: none;
  stroke: rgba(0, 212, 255, 0.55);
  stroke-width: 1.5;
  animation: stPulseRing 3.4s ease-out infinite;
}
.status-hero-visual .pulse-ring--2 { animation-delay: 1.1s; }
.status-hero-visual .pulse-ring--3 { animation-delay: 2.2s; }
@keyframes stPulseRing {
  0%   { r: 30; opacity: 0.7; }
  100% { r: 95; opacity: 0;   }
}
.status-hero-visual .heart-core {
  fill: rgba(255, 255, 255, 0.10);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
}
.status-hero-visual .heart-line {
  fill: none;
  stroke: #00d4ff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.7));
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: stHeart 2.6s ease-in-out infinite;
}
@keyframes stHeart {
  0%   { stroke-dashoffset: 220; }
  60%  { stroke-dashoffset: 0;   }
  100% { stroke-dashoffset: -220; }
}

.status-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---------- Banner global ------------------------------------------------- */
.st-global {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-left: 6px solid var(--st-tone-muted);
  border-radius: var(--hb-radius-lg);
  box-shadow: var(--hb-shadow-md);
}
.st-global.tone-success { border-left-color: var(--st-tone-success); }
.st-global.tone-warning { border-left-color: var(--st-tone-warning); }
.st-global.tone-danger  { border-left-color: var(--st-tone-danger); }
.st-global.tone-info    { border-left-color: var(--st-tone-info); }

.st-global-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--st-tone-muted);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(var(--st-rgb-muted), 0.22);
}
.st-global.tone-success .st-global-dot { background: var(--st-tone-success); box-shadow: 0 0 0 4px rgba(var(--st-rgb-success), 0.30); animation: stPulse 2s ease-in-out infinite; }
.st-global.tone-warning .st-global-dot { background: var(--st-tone-warning); box-shadow: 0 0 0 4px rgba(var(--st-rgb-warning), 0.30); }
.st-global.tone-danger  .st-global-dot { background: var(--st-tone-danger);  box-shadow: 0 0 0 4px rgba(var(--st-rgb-danger), 0.30); }
.st-global.tone-info    .st-global-dot { background: var(--st-tone-info);    box-shadow: 0 0 0 4px rgba(var(--st-rgb-info), 0.30); }
@keyframes stPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(var(--st-rgb-success), 0.30); }
  50%     { box-shadow: 0 0 0 8px rgba(var(--st-rgb-success), 0.10); }
}

.st-global-body { flex: 1; min-width: 0; }
.st-global-title { font-weight: 700; font-size: 1.05rem; color: var(--hb-text); }
.st-global-meta  { font-size: 0.85rem; color: var(--hb-text-muted); margin-top: 2px; }

.st-stale {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--st-rgb-warning), 0.16);
  color: var(--st-tone-warning);
  font-weight: 600;
}

/* ---------- Grupos / componentes ----------------------------------------- */
.st-section-head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hb-text-muted);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.st-group {
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-lg);
  overflow: hidden;
}
.st-group + .st-group { margin-top: 0.75rem; }

.st-group-head {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  cursor: pointer;
  user-select: none;
}
.st-group-head::-webkit-details-marker { display: none; }
.st-group-head:hover { background: var(--hb-surface-2); }

.st-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(var(--st-rgb-muted), 0.22);
  color: var(--st-tone-muted);
  white-space: nowrap;
}
.st-status-pill.tone-success { background: rgba(var(--st-rgb-success), var(--st-bg-tint)); color: var(--st-tone-success); }
.st-status-pill.tone-warning { background: rgba(var(--st-rgb-warning), var(--st-bg-tint)); color: var(--st-tone-warning); }
.st-status-pill.tone-danger  { background: rgba(var(--st-rgb-danger), var(--st-bg-tint)); color: var(--st-tone-danger); }
.st-status-pill.tone-info    { background: rgba(var(--st-rgb-info), var(--st-bg-tint)); color: var(--st-tone-info); }
.st-status-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

.st-group-name { flex: 1; font-weight: 600; color: var(--hb-text); }
.st-group-uptime { font-size: 0.8rem; color: var(--hb-text-muted); font-variant-numeric: tabular-nums; }

.st-group-chevron {
  width: 18px;
  height: 18px;
  color: var(--hb-text-muted);
  transition: transform 0.2s ease;
}
.st-group[open] .st-group-chevron { transform: rotate(90deg); }

.st-group-body {
  padding: 0 1.25rem 1rem;
  border-top: 1px solid var(--hb-border);
  background: var(--hb-surface);
}

/* ---------- Grilla 7 días ------------------------------------------------- */
.st-history {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.75rem 0;
}
.st-history-day {
  flex: 1;
  height: 28px;
  border-radius: 4px;
  background: var(--st-tone-muted);
  opacity: 0.35;
  position: relative;
  cursor: default;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.st-history-day.tone-success { background: var(--st-tone-success); opacity: 0.7; }
.st-history-day.tone-warning { background: var(--st-tone-warning); opacity: 0.85; }
.st-history-day.tone-danger  { background: var(--st-tone-danger);  opacity: 0.85; }
.st-history-day.tone-info    { background: var(--st-tone-info);    opacity: 0.85; }
.st-history-day:hover { opacity: 1; transform: scaleY(1.15); }

.st-history-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--hb-text-muted);
  padding: 0 4px;
}

/* ---------- Componentes individuales ------------------------------------- */
.st-comp-list { display: flex; flex-direction: column; gap: 6px; padding: 0.5rem 0; }
.st-comp {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--hb-radius);
  background: var(--hb-surface-2);
}
.st-comp-name { flex: 1; font-size: 0.92rem; color: var(--hb-text); }
.st-comp-uptime { font-size: 0.78rem; color: var(--hb-text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Incidentes / mantenimientos ---------------------------------- */
.st-incident {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 1rem 1.25rem;
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-left: 4px solid var(--st-tone-warning);
  border-radius: var(--hb-radius-lg);
}
.st-incident + .st-incident { margin-top: 0.5rem; }
.st-incident.tone-danger { border-left-color: var(--st-tone-danger); }
.st-incident.tone-info   { border-left-color: var(--st-tone-info); }
.st-incident-title { font-weight: 600; color: var(--hb-text); }
.st-incident-meta  { font-size: 0.82rem; color: var(--hb-text-muted); }
.st-incident-msg   { font-size: 0.9rem; color: var(--hb-text); margin-top: 6px; }

/* ---------- Footer del panel --------------------------------------------- */
.st-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--hb-text-muted);
  padding-top: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.st-footer a { color: var(--hb-brand); text-decoration: none; }
.st-footer a:hover { text-decoration: underline; }

/* ---------- Skeleton de carga -------------------------------------------- */
.st-skeleton {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.st-skel-box {
  background: var(--hb-surface-2);
  border-radius: var(--hb-radius-lg);
  border: 1px solid var(--hb-border);
  position: relative;
  overflow: hidden;
}
.st-skel-box::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Shimmer adaptable: claro sobre dark, oscuro sobre light. Sin esto era
     invisible en modo claro (white-on-white). */
  background: linear-gradient(90deg, transparent, var(--st-shimmer), transparent);
  animation: stShimmer 1.5s ease-in-out infinite;
}
@keyframes stShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.st-skel-banner { height: 70px; }
.st-skel-group  { height: 52px; }

/* ---------- Empty / error state ------------------------------------------ */
.st-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--hb-text-muted);
  font-size: 0.95rem;
}