/* ==========================================================================
   Numax — Página de Status (/status/)
   Depende de tokens.css. Prefixo .st- para não colidir com outras páginas.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

.st-body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg-default);
  background: var(--color-gray-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cores por estado (uma fonte só para toda a página) */
.st-body {
  --st-operational: #1f9d6a;
  --st-operational-bg: #e8f6ef;
  --st-degraded: #c98a1e;
  --st-degraded-bg: #fbf1dd;
  --st-partial: #d9682a;
  --st-partial-bg: #fceadd;
  --st-major: #c0392b;
  --st-major-bg: #fbe6e3;
  --st-maintenance: #0056B7;
  --st-maintenance-bg: #e7f0fa;
}

.st-container {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--container-x-mobile);
}
@media (min-width: 768px) {
  .st-container { padding: 0 var(--container-x-desktop); }
}

/* ---------- Header minimalista (só logo + Falar com o suporte) ---------- */
.st-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.st-header__inner {
  max-width: 920px; margin: 0 auto;
  padding: 14px var(--container-x-mobile);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
@media (min-width: 768px) { .st-header__inner { padding: 14px var(--container-x-desktop); } }
.st-header__logo img { height: 26px; width: auto; display: block; }
.st-header__cta {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 18px; border-radius: var(--radius-full);
  background: var(--color-blue); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 14px; transition: background var(--duration-base) var(--ease-out);
}
.st-header__cta:hover { background: var(--action-primary-hover); }

/* ---------- Hero / banner geral ---------- */
.st-hero { padding: 40px 0 8px; }
.st-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--fg-muted); text-transform: uppercase; margin-bottom: 14px;
}
.st-banner {
  border-radius: var(--radius-xl);
  padding: 26px 24px;
  display: flex; align-items: center; gap: 18px;
  border: 1px solid transparent;
}
.st-banner__icon {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--radius-full);
  display: grid; place-items: center; font-size: 28px; color: #fff;
}
.st-banner__text h1 {
  margin: 0 0 4px; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em;
}
.st-banner__text p { margin: 0; font-size: 15px; color: var(--fg-muted); }
@media (min-width: 768px) { .st-banner__text h1 { font-size: 30px; } }
@media (max-width: 480px) {
  .st-banner { padding: 20px; gap: 14px; }
  .st-banner__icon { width: 46px; height: 46px; font-size: 24px; }
  .st-banner__text h1 { font-size: 21px; }
  .st-banner__text p { font-size: 14px; }
}

.st-banner[data-tone="operational"]  { background: var(--st-operational-bg); border-color: #bfe6d3; }
.st-banner[data-tone="operational"]  .st-banner__icon { background: var(--st-operational); }
.st-banner[data-tone="operational"]  h1 { color: #0f6b47; }
.st-banner[data-tone="degraded"]     { background: var(--st-degraded-bg); border-color: #ecd4a3; }
.st-banner[data-tone="degraded"]     .st-banner__icon { background: var(--st-degraded); }
.st-banner[data-tone="degraded"]     h1 { color: #8a5e12; }
.st-banner[data-tone="partial"]      { background: var(--st-partial-bg); border-color: #f0c3a5; }
.st-banner[data-tone="partial"]      .st-banner__icon { background: var(--st-partial); }
.st-banner[data-tone="partial"]      h1 { color: #9c4517; }
.st-banner[data-tone="major"]        { background: var(--st-major-bg); border-color: #f0bab3; }
.st-banner[data-tone="major"]        .st-banner__icon { background: var(--st-major); }
.st-banner[data-tone="major"]        h1 { color: #8f281d; }
.st-banner[data-tone="maintenance"]  { background: var(--st-maintenance-bg); border-color: #bcd6f0; }
.st-banner[data-tone="maintenance"]  .st-banner__icon { background: var(--st-maintenance); }
.st-banner[data-tone="maintenance"]  h1 { color: var(--color-blue-700); }
/* Tom calmo: instabilidade leve, não-crítica. Tranquiliza em vez de assustar. */
.st-banner[data-tone="attention"]    { background: var(--color-gray-50); border-color: var(--border-subtle); }
.st-banner[data-tone="attention"]    .st-banner__icon { background: var(--st-degraded); }
.st-banner[data-tone="attention"]    h1 { color: var(--fg-default); }

.st-updatedbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; font-size: 13px; color: var(--fg-muted);
}
.st-updatedbar__live { display: inline-flex; align-items: center; gap: 7px; }
.st-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--st-operational);
  box-shadow: 0 0 0 0 rgba(31,157,106,.6); animation: st-pulse 2.4s infinite;
}
@keyframes st-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31,157,106,.5); }
  70% { box-shadow: 0 0 0 7px rgba(31,157,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,157,106,0); }
}

/* ---------- Seções ---------- */
.st-section { padding: 26px 0; }
.st-section__title {
  font-size: 15px; font-weight: 700; color: var(--fg-default);
  margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
}
.st-section__title span.st-count { color: var(--fg-muted); font-weight: 500; }

/* ---------- Grupos e serviços ---------- */
.st-group { margin-bottom: 22px; }
.st-group__name {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg-muted); margin: 0 0 8px 2px;
}
.st-services {
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.st-service {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-top: 1px solid var(--border-subtle);
}
.st-service:first-child { border-top: none; }
.st-service__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: 20px;
  background: var(--color-blue-50); color: var(--color-blue);
}
.st-service__body { flex: 1 1 auto; min-width: 0; }
.st-service__name { font-size: 15px; font-weight: 600; margin: 0; }
.st-service__desc { font-size: 13px; color: var(--fg-muted); margin: 2px 0 0; }
.st-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.st-pill__dot { width: 8px; height: 8px; border-radius: 50%; }
.st-pill[data-tone="operational"] { background: var(--st-operational-bg); color: #0f6b47; }
.st-pill[data-tone="operational"] .st-pill__dot { background: var(--st-operational); }
.st-pill[data-tone="degraded"]    { background: var(--st-degraded-bg); color: #8a5e12; }
.st-pill[data-tone="degraded"] .st-pill__dot { background: var(--st-degraded); }
.st-pill[data-tone="partial"]     { background: var(--st-partial-bg); color: #9c4517; }
.st-pill[data-tone="partial"] .st-pill__dot { background: var(--st-partial); }
.st-pill[data-tone="major"]       { background: var(--st-major-bg); color: #8f281d; }
.st-pill[data-tone="major"] .st-pill__dot { background: var(--st-major); }
.st-pill[data-tone="maintenance"] { background: var(--st-maintenance-bg); color: var(--color-blue-700); }
.st-pill[data-tone="maintenance"] .st-pill__dot { background: var(--st-maintenance); }
@media (max-width: 560px) {
  .st-service__desc { display: none; }
  .st-pill span.st-pill__label { display: none; }
  .st-pill { padding: 8px; }
}

/* ---------- Incidente ativo ---------- */
.st-incident {
  background: #fff; border: 1px solid var(--border-subtle); border-left-width: 4px;
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 16px;
}
.st-incident[data-tone="degraded"] { border-left-color: var(--st-degraded); }
.st-incident[data-tone="partial"]  { border-left-color: var(--st-partial); }
.st-incident[data-tone="major"]    { border-left-color: var(--st-major); }
.st-incident[data-tone="maintenance"] { border-left-color: var(--st-maintenance); }
.st-incident[data-tone="operational"] { border-left-color: var(--st-operational); }
.st-incident__head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.st-incident__title { font-size: 18px; font-weight: 700; margin: 0; flex: 1 1 240px; }
.st-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--radius-full); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.st-badge[data-tone="degraded"] { background: var(--st-degraded-bg); color: #8a5e12; }
.st-badge[data-tone="partial"]  { background: var(--st-partial-bg); color: #9c4517; }
.st-badge[data-tone="major"]    { background: var(--st-major-bg); color: #8f281d; }
.st-badge[data-tone="maintenance"] { background: var(--st-maintenance-bg); color: var(--color-blue-700); }
.st-badge[data-tone="operational"] { background: var(--st-operational-bg); color: #0f6b47; }
.st-incident__affected { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.st-chip {
  font-size: 12px; font-weight: 600; color: var(--fg-muted);
  background: var(--color-gray-100); border-radius: var(--radius-full); padding: 3px 10px;
}

/* Timeline de atualizações */
.st-timeline { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.st-timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border-subtle);
}
.st-tl { position: relative; padding: 0 0 18px 30px; }
.st-tl:last-child { padding-bottom: 0; }
.st-tl__dot {
  position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--st-partial); box-sizing: border-box;
}
.st-tl[data-state="detectado"]      .st-tl__dot { border-color: var(--st-partial); }
.st-tl[data-state="automatico"]     .st-tl__dot { border-color: var(--st-maintenance); }
.st-tl[data-state="atuando"]        .st-tl__dot { border-color: var(--st-degraded); }
.st-tl[data-state="monitorando"]    .st-tl__dot { border-color: var(--st-maintenance); }
.st-tl[data-state="resolvido"]      .st-tl__dot { border-color: var(--st-operational); background: var(--st-operational); }
.st-tl[data-state="resolvido_auto"] .st-tl__dot { border-color: var(--st-operational); background: var(--st-operational); }
.st-tl[data-state="agendada"]       .st-tl__dot { border-color: var(--st-maintenance); }
.st-tl__state { font-size: 13px; font-weight: 700; margin: 0 0 2px; }
.st-tl[data-state="detectado"]      .st-tl__state { color: #9c4517; }
.st-tl[data-state="automatico"]     .st-tl__state { color: var(--color-blue-700); }
.st-tl[data-state="atuando"]        .st-tl__state { color: #8a5e12; }
.st-tl[data-state="monitorando"]    .st-tl__state { color: var(--color-blue-700); }
.st-tl[data-state="resolvido"]      .st-tl__state { color: #0f6b47; }
.st-tl[data-state="resolvido_auto"] .st-tl__state { color: #0f6b47; }

/* Selo de modo (quem está cuidando) — só em incidentes ativos */
.st-mode { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); }
.st-mode iconify-icon { font-size: 15px; }
.st-mode--auto { background: var(--st-maintenance-bg); color: var(--color-blue-700); }
.st-mode--team { background: var(--st-degraded-bg); color: #8a5e12; }
.st-tl__msg { font-size: 14px; margin: 0 0 4px; color: var(--fg-default); line-height: 1.5; }
.st-tl__time { font-size: 12px; color: var(--fg-muted); }

/* ---------- Histórico ---------- */
.st-history__item {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 16px 18px; margin-bottom: 10px;
}
.st-history__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  cursor: pointer; user-select: none; list-style: none;
}
.st-history__head::-webkit-details-marker { display: none; }
.st-history__title { font-size: 15px; font-weight: 600; margin: 0; flex: 1 1 200px; }
.st-history__date { font-size: 13px; color: var(--fg-muted); }
.st-history__toggle { color: var(--fg-muted); font-size: 18px; transition: transform var(--duration-base) var(--ease-out); }
.st-history__item[open] .st-history__toggle { transform: rotate(180deg); }
.st-history__body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }

/* ---------- Explicação p/ leigos ---------- */
.st-explain {
  background: var(--color-blue-50); border: 1px solid var(--color-blue-100);
  border-radius: var(--radius-lg); padding: 20px 22px; margin: 8px 0 4px;
}
.st-explain h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.st-explain ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.st-explain li { display: flex; gap: 10px; font-size: 14px; color: var(--fg-default); line-height: 1.5; }
.st-explain li iconify-icon { flex: 0 0 auto; font-size: 20px; margin-top: 1px; }
.st-explain b { font-weight: 700; }

/* ---------- Estados de carregamento / vazio ---------- */
.st-empty { text-align: center; color: var(--fg-muted); font-size: 14px; padding: 22px; }
.st-skeleton { height: 78px; border-radius: var(--radius-lg); background: linear-gradient(90deg,#eee,#f6f6f6,#eee); background-size: 200% 100%; animation: st-shimmer 1.3s infinite; }
@keyframes st-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---------- Footer bottom (linha final, dentro do site-footer canônico) ---------- */
.site-footer .footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.site-footer .footer-bottom p { margin: 0; font-size: 13px; color: rgba(255,255,255,.5); }