/* Status da Solvere. Só tokens do design system (tokens.css); nenhum hexadecimal solto. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.02em; color: var(--heading); margin: 0; }
p { margin: 0; }
a { color: var(--action-text); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.miolo { width: min(960px, 100% - 32px); margin-inline: auto; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 10; background: var(--surface-card); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); }

/* ---- topo ---- */
.topo { background: var(--deep); color: var(--on-deep); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-6); }
.logo { display: inline-flex; }
.logo img { display: block; height: 40px; width: auto; }
.tema {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: transparent; color: var(--on-deep); border: 1px solid var(--deep-2);
  border-radius: var(--radius-md); cursor: pointer;
}
.tema:hover { background: var(--deep-2); }
.tema:focus-visible { outline-color: var(--on-deep); }

.hero { padding-block: var(--space-12) 56px; }
.etiqueta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-deep-muted);
}
.pingo { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--deep-accent); }
.hero h1 {
  color: var(--on-deep);
  font-size: clamp(2.25rem, 7vw, 4.25rem);
  line-height: 1.02;
  margin-top: var(--space-4);
  max-width: 16ch;
  text-wrap: balance;
}
.hero-sub { margin-top: var(--space-5); color: var(--on-deep-muted); max-width: 60ch; }
.hero-sub .num { font-family: var(--font-data); color: var(--on-deep); }
.hero[data-estado="problema"] .pingo { background: var(--danger-fg); }
.hero[data-estado="lento"] .pingo { background: var(--warning-fg); }

/* ---- blocos ---- */
main { padding-block: var(--space-8) var(--space-12); }
.bloco { margin-top: var(--space-12); }
.bloco > h2, .ambiente > header h2 { font-size: 1.5rem; }
.ambiente { margin-top: var(--space-12); }
.ambiente:first-child { margin-top: var(--space-8); }
.ambiente > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-4); }
.ambiente > header p { color: var(--ink-muted); }
.ambiente .total { font-family: var(--font-data); font-size: 0.875rem; color: var(--ink-muted); }

.cartao {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-top: var(--space-4);
}
.ambiente .cartao { margin-top: 0; }

/* ---- linha de serviço ---- */
.servico { border-top: 1px solid var(--line); }
.servico:first-child { border-top: 0; }
.servico > summary {
  list-style: none; cursor: pointer;
  display: grid; gap: var(--space-3) var(--space-4);
  grid-template-columns: 1fr auto;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
}
.servico > summary::-webkit-details-marker { display: none; }
.servico > summary:hover { background: var(--surface-sunken); }
.servico[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.nome { font-weight: 600; color: var(--heading); display: flex; align-items: center; gap: var(--space-2); }
.nome::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid var(--ink-muted); border-bottom: 1.6px solid var(--ink-muted);
  transform: rotate(-45deg); transition: transform 0.15s;
}
.servico[open] .nome::before { transform: rotate(45deg); }
.desc { grid-column: 1; color: var(--ink-muted); font-size: 0.9375rem; margin-left: 15px; }

.selo {
  grid-column: 2; grid-row: 1;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 2px 12px; border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: 600;
}
.selo[data-estado="ok"] { background: var(--success-bg); color: var(--success-fg); }
.selo[data-estado="lento"] { background: var(--warning-bg); color: var(--warning-fg); }
.selo[data-estado="fora"] { background: var(--danger-bg); color: var(--danger-fg); }
.selo[data-estado="sem-dados"] { background: var(--surface-sunken); color: var(--ink-muted); }

/* ---- régua de 90 dias: o elemento de marca desta página ---- */
.regua { grid-column: 1 / -1; display: grid; gap: var(--space-2); }
.barras { display: flex; gap: 2px; height: 34px; }
.barra { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--line); }
.barra[data-n="ok"] { background: var(--success-fg); }
.barra[data-n="atencao"] { background: var(--warning-fg); }
.barra[data-n="queda"] { background: var(--danger-fg); }
.regua-pe { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 0.8125rem; color: var(--ink-muted); }
.regua-pe .pct { font-family: var(--font-data); color: var(--ink); }

/* ---- detalhe ---- */
.detalhe { padding: var(--space-2) var(--space-5) var(--space-6); display: grid; gap: var(--space-6); }
.detalhe h3 { font-size: 1rem; margin-bottom: var(--space-3); }
.horas { display: flex; gap: 3px; height: 22px; }
.hora { flex: 1 1 0; border-radius: 2px; background: var(--line); }
.hora[data-n="ok"] { background: var(--success-fg); }
.hora[data-n="lento"] { background: var(--warning-fg); }
.hora[data-n="queda"] { background: var(--danger-fg); }
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .eixo { stroke: var(--line); stroke-width: 1; }
.grafico .linha { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .area { fill: var(--chart-1); opacity: 0.1; }
.grafico .queda { stroke: var(--danger-fg); stroke-width: 2; }
.grafico .limite { stroke: var(--chart-meta); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico text { fill: var(--ink-muted); font-family: var(--font-data); font-size: 11px; }
.nota { color: var(--ink-muted); font-size: 0.875rem; }

/* ---- incidentes ---- */
.incidente { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }
.incidente:first-child { border-top: 0; }
.incidente .quando { font-family: var(--font-data); font-size: 0.8125rem; color: var(--ink-muted); grid-row: span 2; padding-top: 2px; min-width: 9.5em; }
.incidente strong { color: var(--heading); }
.incidente .tag { font-size: 0.8125rem; color: var(--ink-muted); margin-left: var(--space-2); }
.incidente .dur { color: var(--ink-muted); font-size: 0.9375rem; }
.incidente .dur[data-aberto] { color: var(--danger-fg); font-weight: 600; }
.vazio { padding: var(--space-6) var(--space-5); color: var(--ink-muted); }
.vazio strong { display: block; color: var(--success-fg); margin-bottom: var(--space-1); }

.como p { color: var(--ink-muted); max-width: 68ch; margin-top: var(--space-3); }

.rodape { border-top: 1px solid var(--line); padding-block: var(--space-6); color: var(--ink-muted); font-size: 0.875rem; }
.rodape .miolo { display: flex; justify-content: space-between; gap: var(--space-4); }

/* ---- única animação: a marca viva do hero, desligada se o usuário pedir ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero[data-estado="ok"] .pingo { animation: pulso 2.4s ease-out infinite; }
  @keyframes pulso { 0% { box-shadow: 0 0 0 0 var(--deep-accent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
}

@media (max-width: 560px) {
  .hero { padding-block: var(--space-8) 40px; }
  .servico > summary { padding: var(--space-4); }
  .barras { height: 28px; }
  .incidente { grid-template-columns: 1fr; }
  .incidente .quando { grid-row: auto; }
  .rodape .miolo { flex-direction: column; }
}