/* =========================================================================
Status da Rapid Cloud — css/site.css (vai para public/css/site.css)
Base: tokens.css + global.css do site novo (copiados literalmente onde dá).
Sem dependência de JS: tudo aparece sem script. O JS só ACRESCENTA (classe
.rc-js no recolhe grupos; site.js marca .rc-ready).
0. Índice de camadas de movimento (orçamento)
1. Tokens: marca, neutros, ESTADOS, tipografia, raios, sombras, movimento
2. Tema escuro (prefers-color-scheme + [data-theme=dark])
3. Base / reset / utilitários
4. Movimento: keyframes, entrada (.enter), revelação no scroll (.reveal), .loop
5. Botões, pills, chips, ícones de estado
6. Cabeçalho, faixa de estado global, rodapé
7. Hero (aurora + orb + painel + frota)
8. Cards de evento: incidente, manutenção, aviso
9. Encontre seu servidor
10. Grupos, linhas, barra de 90 dias, tooltip, "Como calculamos"
11. Histórico (lista curta da home + página /historico + calendário)
12. Bloco de ajuda
13. Modal e formulário de inscrição, árvore de servidores
14. Página de incidente
15. Página de servidor
16. Páginas de inscrição (confirmar, gerenciar, sair…)
17. Toast
18. Responsivo
19. Movimento reduzido, pausa manual, alto contraste, impressão
========================================================================= */
/* ---------- 0. Orçamento de movimento -------------------------------------
Infinitas (todas com a classe .loop, pausáveis): degradê da palavra-chave,
orb (2 anéis + núcleo + halo), ponto "atualizado", luz do botão principal,
2 chips + 1 card flutuando (só no "tudo ok"), traço afetado da frota, dia de
hoje com problema, listras da manutenção. Pausam: fora da tela (hero),
botão "Pausar animações" (WCAG 2.2.2) e prefers-reduced-motion. */
/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
/* Marca (tokens.css do site) */
--brand: #841be9;
--brand-2: #7300bf;
--brand-3: #5a0099;
--brand-ink: #3a0066;
--brand-50: #f6f2ff;
--brand-100: #ede4ff;
--brand-200: #dcc6ff;
--brand-300: #c39bff;
--brand-400: #a463f5;
--grad-brand: linear-gradient(135deg, #841be9 0%, #7300bf 100%);
--grad-aurora: radial-gradient(60% 80% at 15% 10%, rgba(164,99,245,.45), transparent 60%),
radial-gradient(55% 75% at 90% 20%, rgba(115,0,191,.40), transparent 60%),
radial-gradient(70% 90% at 50% 110%, rgba(132,27,233,.35), transparent 55%);
/* Neutros (levemente arroxeados) */
--ink: #15102a;
--ink-2: #3b3556;
--muted: #6a6588;
--muted-2: #6e6a86;
--line: #ece8f6;
--line-2: #ded8ee;
--surface: #ffffff;
--surface-2: #faf8ff;
--surface-3: #f3eefc;
--bg: #ffffff;
--accent-ink: #7300bf; /* texto/link na cor da marca (AA) */
--glass: rgba(255,255,255,.8);
/* ESTADOS (ARQUITETURA §3 — fixos; nunca o roxo da marca) */
--st-ok: #15a06a;
--st-maint: #2563eb;
--st-deg: #d98a00;
--st-par: #ea6a12;
--st-maj: #e23b5a;
--st-nd: #a8a3bd;
/* apelidos curtos dos preenchimentos para o gradiente inline das barras de 90 dias (--ub: ~35 barras por página) */
--o: var(--st-ok); --mt: var(--st-maint); --dg: var(--st-deg); --pa: var(--st-par); --mj: var(--st-maj); --nd: var(--st-nd);
/* versões para TEXTO: ≥ 4,5:1 sobre branco e sobre o fundo do pill */
--st-ok-ink: #0b7a4f;
--st-maint-ink: #1d4fd8;
--st-deg-ink: #975a00;
--st-par-ink: #b24605;
--st-maj-ink: #c0213f;
--st-nd-ink: #6b6684;
/* Tipografia */
--font-display: "Sora", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
--font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--fs-xs: clamp(.75rem, .72rem + .15vw, .8125rem);
--fs-sm: clamp(.8125rem, .78rem + .2vw, .875rem);
--fs-base: clamp(.9375rem, .9rem + .25vw, 1rem);
--fs-md: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
--fs-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
--fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
--fs-2xl: clamp(2rem, 1.55rem + 1.9vw, 2.85rem);
--lh-tight: 1.08;
--lh-base: 1.65;
/* Layout */
--container: 1200px;
--gutter: clamp(1rem, .4rem + 2.5vw, 2rem);
--header-h: 68px;
--cols: minmax(0, 1fr) minmax(220px, 1.25fr) 7rem; /* nome · barra · % (grupos, linhas e cabeçalho .cols: o rótulo "Disponibilidade" cabe na coluna) */
/* Raios */
--r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
/* Sombras (tonalizadas no roxo) */
--shadow-xs: 0 1px 2px rgba(21,16,42,.06);
--shadow-sm: 0 2px 8px rgba(21,16,42,.07);
--shadow-md: 0 12px 28px -10px rgba(57,0,102,.18);
--shadow-lg: 0 26px 60px -22px rgba(57,0,102,.30);
--shadow-brand: 0 18px 40px -14px rgba(132,27,233,.55);
/* Movimento */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--t-fast: .16s; --t: .28s; --t-slow: .5s;
--z-header: 100; --z-tip: 150; --z-overlay: 200; --z-toast: 300;
/* Tooltip (sempre escuro) */
--tip-bg: #15102a;
--tip-ink: #f5f2ff;
--tip-muted: #b9b2d8;
--tip-line: rgba(255,255,255,.12);
color-scheme: light;
}
/* ---------- 2. Tema escuro ------------------------------------------------
Não é inversão: superfícies roxo-noite, aurora mais acesa, tintas de estado
clareadas para texto (AA medido 7–10:1). Bloco repetido de propósito:
(a) sistema escuro sem escolha manual; (b) escolha manual data-theme=dark. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--brand-ink: #eadcff; --brand-50: rgba(164,99,245,.12); --brand-100: rgba(164,99,245,.20);
--grad-aurora: radial-gradient(60% 80% at 15% 10%, rgba(132,27,233,.42), transparent 60%),
radial-gradient(55% 75% at 90% 20%, rgba(115,0,191,.38), transparent 60%),
radial-gradient(70% 90% at 50% 110%, rgba(164,99,245,.22), transparent 55%);
--ink: #f5f2ff; --ink-2: #d2cbec; --muted: #a59ec8; --muted-2: #958eb9;
--line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
--surface: #141024; --surface-2: #100c1e; --surface-3: #1d1636; --bg: #0b0815;
--accent-ink: #c7a2ff; --glass: rgba(20,16,36,.74);
--st-ok-ink: #3fd69b; --st-maint-ink: #86adff; --st-deg-ink: #f4b740; --st-par-ink: #ff9a52; --st-maj-ink: #ff7d93; --st-nd-ink: #b8b3cf;
--shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
--shadow-md: 0 16px 40px -14px rgba(0,0,0,.6); --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.75);
--shadow-brand: 0 20px 50px -16px rgba(132,27,233,.6);
--tip-bg: #231b42; --tip-line: rgba(255,255,255,.14);
color-scheme: dark;
}
:root:not([data-theme="light"]) .logo-l { display: none; }
:root:not([data-theme="light"]) .logo-d { display: block; }
}
:root[data-theme="dark"] {
--brand-ink: #eadcff; --brand-50: rgba(164,99,245,.12); --brand-100: rgba(164,99,245,.20);
--grad-aurora: radial-gradient(60% 80% at 15% 10%, rgba(132,27,233,.42), transparent 60%),
radial-gradient(55% 75% at 90% 20%, rgba(115,0,191,.38), transparent 60%),
radial-gradient(70% 90% at 50% 110%, rgba(164,99,245,.22), transparent 55%);
--ink: #f5f2ff; --ink-2: #d2cbec; --muted: #a59ec8; --muted-2: #958eb9;
--line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
--surface: #141024; --surface-2: #100c1e; --surface-3: #1d1636; --bg: #0b0815;
--accent-ink: #c7a2ff; --glass: rgba(20,16,36,.74);
--st-ok-ink: #3fd69b; --st-maint-ink: #86adff; --st-deg-ink: #f4b740; --st-par-ink: #ff9a52; --st-maj-ink: #ff7d93; --st-nd-ink: #b8b3cf;
--shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
--shadow-md: 0 16px 40px -14px rgba(0,0,0,.6); --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.75);
--shadow-brand: 0 20px 50px -16px rgba(132,27,233,.6);
--tip-bg: #231b42; --tip-line: rgba(255,255,255,.14);
color-scheme: dark;
}
:root[data-theme="dark"] .logo-l { display: none; }
:root[data-theme="dark"] .logo-d { display: block; }
/* Classes de estado: --st (preenchimento) e --st-i (texto). Usadas em tudo. */
.s-ok { --st: var(--st-ok); --st-i: var(--st-ok-ink); }
.s-maint { --st: var(--st-maint); --st-i: var(--st-maint-ink); }
.s-deg { --st: var(--st-deg); --st-i: var(--st-deg-ink); }
.s-par { --st: var(--st-par); --st-i: var(--st-par-ink); }
.s-maj { --st: var(--st-maj); --st-i: var(--st-maj-ink); }
.s-nd { --st: var(--st-nd); --st-i: var(--st-nd-ink); }
/* ---------- 3. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
overflow-x: clip; /* nada decorativo estoura a largura (falha do conceito C) */
}
body {
font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base);
color: var(--ink); background: var(--bg); min-height: 100vh; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 70%, white); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--brand) 28%, white); color: var(--brand-ink); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; font-weight: 700; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
main { display: block; }
main:focus { outline: none; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: var(--z-toast); background: var(--brand); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-sm); transition: top var(--t); }
.skip-link:focus { top: 1rem; }
.i { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--font-mono); font-size: .92em; }
.muted { color: var(--muted); }
.flag { display: inline-block; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(15,8,30,.16); }
.flag svg { width: 100%; height: 100%; }
.lbl-short { display: none; }
.logo-d { display: none; }
/* controles que só fazem sentido com JS ficam escondidos sem ele */
html:not(.rc-js) .theme-btn, html:not(.rc-js) .chev { display: none; }
/* Texto em degradê animado (global.css do site) */
.gradient-flow {
background-image: linear-gradient(100deg, #7300bf 0%, #c98bff 14%, #841be9 28%, #7300bf 50%, #841be9 72%, #c98bff 86%, #7300bf 100%);
background-size: 200% auto; -webkit-text-fill-color: transparent; animation: gradientFlow 7s linear infinite; will-change: background-position;
}
/* Palavra-chave do título no degradê da COR DO ESTADO: a assinatura do site com semântica.
Flui SEMPRE (7 s, em todos os estados); só para com prefers-reduced-motion, "Pausar animações" ou o hero fora
da tela (e volta ao rolar de volta). Sem will-change: conferido no WebKit do macOS 26 (motor do Safari,
scripts/qa-webkit.swift) e no Chromium, com e sem ele, fluindo nos dois; não faz falta aqui (05/10). */
.sw {
--a: var(--st-i); --b: color-mix(in srgb, var(--st) 70%, white);
background-image: linear-gradient(100deg, var(--a) 0%, var(--b) 25%, var(--a) 50%, var(--b) 75%, var(--a) 100%);
background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--st-i);
animation: gradientFlow 7s linear infinite;
padding-bottom: .06em;
}
/* Parada clara no limite de 3:1 sobre o branco (texto grande; o fundo do hero chega a branco puro): a faixa
precisa de amplitude para o fluxo ser VISÍVEL. Com #128a5a o verde do OK variava ≤ 16 por canal e parecia
parado no tema claro (04/10). Luminância da parada clara ≈ 1,8× a da tinta em todos os estados. */
.s-ok.sw { --b: #15a06a; } /* 3,35:1 */
.s-deg.sw { --a: #975a00; --b: #c47800; } /* 3,48:1 */
.s-par.sw { --b: #e2641a; } /* 3,46:1 */
.s-maj.sw { --b: #ea5677; } /* 3,45:1 */
.s-maint.sw { --b: #4d84f5; } /* 3,55:1 */
.s-nd.sw { --b: #8c87a6; } /* 3,43:1 ("Verificando os serviços": a mistura padrão dava 1,8:1 e a palavra sumia no branco) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sw { --b: color-mix(in srgb, var(--st-i) 55%, white); } }
:root[data-theme="dark"] .sw { --b: color-mix(in srgb, var(--st-i) 55%, white); }
/* ---------- 4. Movimento ------------------------------------------------- */
@keyframes gradientFlow { from { background-position: 0% 50%; } to { background-position: -200% 50%; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pulseGlow { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes dash { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes blip { 50% { opacity: .3; } }
@keyframes livePing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
/* barra entra só por opacidade + escala vertical: NUNCA encurta no eixo do tempo (barra curta = parece dado faltando) */
@keyframes ubIn { 0% { opacity: 0; transform: scaleY(.3); } 70% { opacity: 1; transform: scaleY(1.06); } 100% { opacity: 1; transform: scaleY(1); } }
@keyframes hl { 0%, 40% { background: color-mix(in srgb, var(--brand) 14%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); } 100% { background: transparent; box-shadow: none; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
/* Entrada (acima da dobra): SÓ CSS, com fill both. Não depende de JS: se o
script falhar, o conteúdo aparece igual (correção da falha fatal do conceito A). */
.enter { animation: rise .7s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms); }
/* Revelação no scroll (abaixo da dobra): scroll-driven animation, também só CSS.
Navegador sem suporte = conteúdo simplesmente visível.
Regra: a animação TERMINA enquanto o elemento entra na tela. Quem para de rolar nunca vê
card meio transparente nem barra pela metade (as faixas são curtas de propósito). */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* min(90px, 100%): seção mais baixa que 90 px (cabeçalho de seção) termina ao entrar inteira, nunca fica a 80% parada */
.reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry min(90px, 100%); }
.reveal .ub-fill { animation: ubIn linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; transform-origin: 50% 100%; }
}
}
/* ---------- 5. Botões, pills, chips -------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); line-height: 1;
padding: .95rem 1.6rem; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t);
white-space: nowrap; text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .i { width: 1.15em; height: 1.15em; }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { box-shadow: 0 22px 50px -14px rgba(132,27,233,.7); }
.btn-outline { background: var(--surface); color: var(--accent-ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-50); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger { background: var(--surface); color: var(--st-maj-ink); border-color: color-mix(in srgb, var(--st-maj) 40%, var(--line-2)); }
.btn-danger:hover { background: color-mix(in srgb, var(--st-maj) 8%, var(--surface)); border-color: var(--st-maj); }
.btn-lg { padding: 1.05rem 1.9rem; font-size: var(--fs-md); }
.btn-sm { padding: .65rem 1.1rem; font-size: var(--fs-sm); }
.btn-xs { padding: .5rem .85rem; font-size: var(--fs-xs); gap: .4rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
/* Luz percorrendo só a borda (global.css .btn-rayglow), SEMPRE fluindo (2,8 s), em todos os estados.
Marcação: ….
.ray = o anel de 3 px (máscara + overflow); .ray::before = um conic-gradient MAIOR que o botão girando por
transform: roda no compositor e não congela (a versão com @property --rc-ray parava no Chrome/Safari).
O drop-shadow fica no anel, antes da máscara, como no original. */
.btn-rayglow { position: relative; }
.btn-rayglow .ray {
position: absolute; inset: -1px; border-radius: inherit; padding: 3px; overflow: hidden; pointer-events: none;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
filter: drop-shadow(0 0 4px rgba(168,85,247,.7));
}
.btn-rayglow .ray::before {
content: ""; position: absolute; left: 50%; top: 50%; width: calc(100% + 6rem); aspect-ratio: 1;
background: conic-gradient(rgba(224,196,255,.3) 0deg 165deg, rgba(230,205,255,.85) 235deg, #ffffff 290deg, rgba(230,205,255,.85) 345deg, rgba(224,196,255,.3) 360deg);
transform: translate(-50%, -50%); will-change: transform;
animation: rc-ray-spin 2.8s linear infinite;
}
@keyframes rc-ray-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--accent-ink); background: var(--brand-50); border: 1px solid var(--line-2);
padding: .4rem .85rem; border-radius: var(--r-pill);
}
.eyebrow .live::after { display: none; } /* o ponto pulsante fica só no "Atualizado" */
/* Pill de estado: cor + ícone + texto, sempre */
.pill {
display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
font-size: var(--fs-xs); font-weight: 700; line-height: 1.1;
padding: .32rem .7rem .32rem .55rem; border-radius: var(--r-pill);
color: var(--st-i, var(--ink-2));
background: color-mix(in srgb, var(--st, var(--muted)) 12%, var(--surface));
border: 1px solid color-mix(in srgb, var(--st, var(--muted)) 30%, transparent);
}
.pill .i { width: 14px; height: 14px; stroke-width: 2.2; }
.pill-n { --st: var(--muted-2); --st-i: var(--ink-2); background: var(--surface-3); border-color: var(--line-2); }
.pill-lg { font-size: var(--fs-sm); padding: .45rem .9rem .45rem .7rem; }
.pill-lg .i { width: 16px; height: 16px; }
/* Ícone redondo de estado */
.si {
display: inline-grid; place-items: center; flex: 0 0 auto;
width: 22px; height: 22px; border-radius: 50%;
color: #fff; background: var(--st);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 16%, transparent);
}
.si .i { width: 13px; height: 13px; stroke-width: 2.6; }
/* Ponto "ao vivo" */
.live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--st, var(--st-ok)); flex: 0 0 auto; }
.live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--st, var(--st-ok)); opacity: 0; animation: livePing 2.2s var(--ease-out) infinite; }
/* Chip de componente (link) */
.cchip {
display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
font-size: var(--fs-sm); font-weight: 650; color: var(--ink);
background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill);
padding: .3rem .75rem .3rem .35rem; transition: border-color var(--t), transform var(--t), background var(--t);
}
.cchip:hover { border-color: color-mix(in srgb, var(--st, var(--brand)) 60%, transparent); transform: translateY(-1px); }
.cchip .si { width: 18px; height: 18px; box-shadow: none; }
.cchip .si .i { width: 11px; height: 11px; }
.cchip small { color: var(--st-i); font-weight: 700; font-size: var(--fs-xs); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
/* selo de contagem: texto na tinta do estado sobre fundo claro do estado (≥ 4,5:1 nos dois temas), em linha com o texto */
.count { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding-inline: .45em; border-radius: 999px; font-size: .55em; font-family: var(--font-body); font-weight: 800; letter-spacing: 0; vertical-align: .2em; color: var(--st-i, var(--accent-ink)); background: color-mix(in srgb, var(--st, var(--brand)) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--st, var(--brand)) 40%, transparent); }
.link { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent-ink); font-weight: 700; font-size: var(--fs-sm); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link .i { transition: transform var(--t); }
.link:hover .i:last-child { transform: translateX(3px); }
/* ---------- 6. Cabeçalho, faixa global e rodapé -------------------------- */
.hdr {
position: sticky; top: 0; z-index: var(--z-header);
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
border-bottom: 1px solid transparent; transition: border-color var(--t), box-shadow var(--t);
}
.hdr.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.hdr-bar { display: flex; align-items: center; gap: .9rem; height: var(--header-h); }
/* a marca nunca encolhe nem fica embaixo de outro elemento: quem cede espaço é o resto da barra */
.brand { display: inline-flex; align-items: center; gap: .85rem; flex: 0 0 auto; }
.brand img { height: 28px; width: auto; max-width: 100%; }
.brand .logo-ic { display: none; height: 24px; }
.brand-tag { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--muted); padding-left: .85rem; border-left: 1px solid var(--line-2); line-height: 1.2; }
/* pílula de estado que aparece ao rolar (o hero saiu da tela) */
.hdr-state {
display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .8rem .38rem .7rem; border-radius: var(--r-pill);
font-size: var(--fs-xs); font-weight: 800; color: var(--st-i); white-space: nowrap;
background: color-mix(in srgb, var(--st) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--st) 32%, transparent);
animation: rise .35s var(--ease-out) both;
}
.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav-link { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); padding: .6rem .85rem; border-radius: var(--r-sm); transition: color var(--t), background var(--t); }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--accent-ink); background: var(--surface-3); }
.nav-ic, .theme-btn {
display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
color: var(--ink-2); border: 1px solid var(--line-2); background: var(--surface);
transition: transform var(--t), color var(--t), border-color var(--t);
}
.nav-ic { display: none; }
.theme-btn:hover, .nav-ic:hover { color: var(--accent-ink); border-color: var(--brand); }
.theme-btn:hover { transform: rotate(-12deg); }
.theme-btn .i, .nav-ic .i { width: 19px; height: 19px; }
.theme-btn [data-ic] { display: none; }
.theme-btn[data-mode="auto"] [data-ic="auto"], .theme-btn[data-mode="light"] [data-ic="light"], .theme-btn[data-mode="dark"] [data-ic="dark"] { display: block; }
.hdr .btn { margin-left: .35rem; }
/* Faixa de estado global (páginas internas) */
.gbar { border-bottom: 1px solid color-mix(in srgb, var(--st) 28%, var(--line)); background: color-mix(in srgb, var(--st) 9%, var(--bg)); }
.gbar-in { display: flex; align-items: center; gap: .65rem; padding-block: .6rem; font-size: var(--fs-sm); color: var(--ink-2); }
.gbar .si { width: 20px; height: 20px; }
.gbar .si .i { width: 12px; height: 12px; }
.gbar p { flex: 1; min-width: 0; }
.gbar p b { color: var(--st-i); }
.gbar .link { white-space: nowrap; }
.ftr { background: var(--surface-2); border-top: 1px solid var(--line); margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem 1.5rem; padding-block: clamp(2.5rem, 2rem + 3vw, 3.75rem) 2rem; }
.ftr-brand img { height: 26px; width: auto; max-width: none; }
.ftr-brand p { margin-top: 1rem; color: var(--muted); font-size: var(--fs-sm); max-width: 38ch; }
.ftr-col h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--ink); margin-bottom: .9rem; }
.ftr-col ul { display: grid; gap: .55rem; }
.ftr-col li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; color: var(--muted); font-size: var(--fs-sm); }
.ftr-col a { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: var(--fs-sm); transition: color var(--t); }
.ftr-col a:hover { color: var(--accent-ink); }
.ftr-col .i { width: 15px; height: 15px; }
.ftr-bottom { border-top: 1px solid var(--line); }
.ftr-bottom .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.1rem; font-size: var(--fs-xs); color: var(--muted-2); }
.ftr-bottom span, .ftr-bottom a { display: inline-flex; align-items: center; gap: .4rem; }
.ftr-bottom a { color: inherit; text-decoration: none; }
.ftr-bottom a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.motion-btn { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); padding: .35rem .7rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); }
.motion-btn:hover { color: var(--accent-ink); border-color: var(--brand); }
.motion-btn .i { width: 14px; height: 14px; }
/* ---------- 7. Hero ------------------------------------------------------- */
/* O hero NÃO recorta (overflow visível): sombra do painel e brilho do botão podem passar da borda.
Quem recorta são só os anéis, dentro de .hero-deco. Aurora e brilho de estado esmaecem até sumir
(máscara), então o fim do hero nunca vira uma linha dura. */
.hero { position: relative; isolation: isolate; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) 0 clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.hero::before, .hero::after { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--grad-aurora); opacity: .5; pointer-events: none; }
/* brilho da cor do estado: a página "respira" o estado; a aurora perde força em problema */
.hero::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(38% 55% at 76% 46%, color-mix(in srgb, var(--st) 20%, transparent), transparent 70%);
}
.hero:not(.s-ok)::before { opacity: .32; }
/* com problema, o hero encolhe: o card do incidente precisa aparecer na primeira dobra (1440×900) */
.hero:not(.s-ok) { padding-bottom: 1.75rem; }
.hero:not(.s-ok) .hero-visual { padding-block: .25rem; }
.hero:not(.s-ok) .orb-stage { padding: .75rem 0 .55rem; }
.hero:not(.s-ok) .orb-stage .orb { --s: 124px; }
.hero + .sec { padding-top: .25rem; }
.hero:not(.s-ok) + .sec-first { padding-top: 1.5rem; }
.hero-deco { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.hero-rings { position: absolute; top: -30%; right: -10%; width: 720px; height: 720px; pointer-events: none; }
.hero-rings::before, .hero-rings::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.hero-rings::after { inset: 18%; border-color: color-mix(in srgb, var(--brand) 12%, transparent); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero-copy { min-width: 0; }
.hero-title { display: flex; align-items: center; gap: 1rem; margin-block: 1rem .85rem; }
.hero-title h1 { font-size: clamp(2.05rem, 1.35rem + 2.75vw, 3.75rem); letter-spacing: -.025em; }
.hero-title .orb { display: none; }
.hero-title h1.h-long { font-size: clamp(1.9rem, 1.2rem + 2.3vw, 2.95rem); } /* "Manutenção programada" cabe em 2 linhas */
.hero-lead { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.6; max-width: 54ch; }
.hero-lead strong { color: var(--ink); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.hero-meta > span { display: inline-flex; align-items: center; }
.hero-meta > span > .i { margin-right: .4rem; }
.hero-meta .live { margin: 0 .55rem 0 2px; }
/* §14.2: texto relativo que se atualiza sozinho não empurra os vizinhos. Algarismos tabulares em todos; o "Atualizado"
(muda a cada segundo) reserva a largura da variante mais longa usual ("agora mesmo" = 11,02ch medido; "atualizando…" 10,5ch). */
time[data-rel], [data-since], [data-countdown] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.upd time { display: inline-block; min-width: 11.2ch; text-align: left; }
.upd[data-refreshing] time { background: linear-gradient(90deg, var(--muted) 30%, var(--accent-ink) 50%, var(--muted) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 1.1s linear infinite; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.15rem, 2.4vh, 1.8rem); }
.hero-help { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.hero-help > span { text-wrap: balance; }
.hero-help .i { color: var(--accent-ink); }
.hero-help u { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.hero-help:hover u { text-decoration: underline; text-underline-offset: 3px; }
/* Painel com orb (equivalente ao "Performance ao vivo" da home do site) */
.hero-visual { position: relative; display: grid; place-items: center; padding-block: 1.5rem; }
.panel {
position: relative; z-index: 2; width: min(420px, 100%);
background: var(--glass); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 1.1rem 1.2rem 1rem;
}
.panel-head { display: flex; align-items: center; gap: .5rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.panel-head .i { color: var(--accent-ink); }
.panel-head .on { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; color: var(--st-i); }
.panel-head .on .live::after { display: none; }
.orb-stage { display: grid; place-items: center; padding: 1.3rem 0 1rem; }
.orb { --s: 150px; position: relative; width: var(--s); height: var(--s); display: grid; place-items: center; flex: 0 0 auto; }
.orb::before {
content: ""; position: absolute; inset: -14%; border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0 10%, color-mix(in srgb, var(--st) 55%, transparent) 25%, transparent 42%, color-mix(in srgb, var(--brand) 35%, transparent) 62%, transparent 78%, color-mix(in srgb, var(--st) 40%, transparent) 92%, transparent);
filter: blur(16px); opacity: .85; animation: spinSlow 10s linear infinite; will-change: transform;
}
.orb-ring { position: absolute; inset: 19%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--st) 55%, transparent); opacity: 0; animation: orbPulse 3.6s var(--ease-out) infinite; }
.orb-ring:nth-child(2) { animation-delay: 1.8s; }
@keyframes orbPulse { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.85); opacity: 0; } }
.orb-core {
position: relative; width: 62%; height: 62%; border-radius: 50%; display: grid; place-items: center; color: #fff;
background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--st) 30%, white) 0%, var(--st) 46%, color-mix(in srgb, var(--st) 62%, #120625) 100%);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--st) 14%, transparent), 0 22px 50px -10px color-mix(in srgb, var(--st) 70%, transparent),
inset 0 -12px 26px rgba(10,0,30,.25), inset 0 10px 20px rgba(255,255,255,.35);
animation: orbBreath 4.8s var(--ease) infinite;
}
.orb-core::after { content: ""; position: absolute; inset: 8% 30% 52% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent); filter: blur(2px); }
.orb-core svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.orb-core svg * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dash 1s .35s var(--ease-out) forwards; }
@keyframes orbBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
/* ritmo por estado: fora do ar acelera; manutenção = anel tracejado girando (trabalho em andamento) */
.orb.s-maj .orb-ring { animation-duration: 2.2s; }
.orb.s-maj .orb-ring:nth-child(2) { animation-delay: 1.1s; }
.orb.s-maint .orb-ring { opacity: .7; border-style: dashed; animation: spinSlow 14s linear infinite; }
.orb.s-maint .orb-ring:nth-child(2) { inset: 8%; opacity: .35; animation-duration: 22s; animation-direction: reverse; }
.orb-sm { --s: 64px; }
.orb-sm .orb-core { box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 16%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--st) 70%, transparent), inset 0 -6px 12px rgba(10,0,30,.25), inset 0 5px 10px rgba(255,255,255,.35); }
.orb-sm::before { filter: blur(8px); }
.orb.s-nd .orb-ring { display: none; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; }
.kpi b { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.kpi span { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.kpi .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st); }
.kpi.zero b { color: var(--muted-2); }
.kpi:not(.zero):not(.s-ok) b { color: var(--st-i); } /* "com problema" leva a classe do PIOR estado entre os problemas (fora do ar = vermelho) */
.panel-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.panel-row b { font-family: var(--font-display); color: var(--ink); font-size: var(--fs-sm); }
.panel-fleet { margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.panel-foot { margin-top: .85rem; padding-top: .8rem; border-top: 1px solid var(--line); }
/* frota: um traço por servidor/serviço, agrupado por produto; o afetado pisca */
.fleet { display: flex; flex-wrap: wrap; gap: 6px 11px; margin-top: .55rem; }
.fleet-sec { display: flex; flex-wrap: wrap; gap: 3px; }
.fleet i { width: 8px; height: 22px; border-radius: 3px; background: var(--st); }
.fleet i.loop { animation: blip 1.6s var(--ease) infinite; box-shadow: 0 0 0 2px color-mix(in srgb, var(--st) 30%, transparent); }
.fleet-txt { margin-top: .5rem; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 650; }
/* chips flutuando (HomeHero do site) — só no "tudo ok" */
.fchip {
position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .45rem;
background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px;
padding: .5rem .85rem; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink); box-shadow: var(--shadow-sm); white-space: nowrap;
}
/* posições escolhidas sobre áreas vazias do painel (borda do cabeçalho e o vão à direita do orb):
nenhum enfeite cobre dado. O shots.mjs reprova se .fchip/.fcard cruzar KPI, frota ou o rodapé do painel. */
.fchip-1 { top: 0; right: 2%; animation: float 5s var(--ease) infinite; }
.fchip-2 { top: 37%; right: -5%; animation: float 6s var(--ease) infinite .5s; }
.fcard {
position: absolute; left: -7%; top: 15%; z-index: 3; display: flex; align-items: center; gap: .7rem;
background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: .7rem .95rem;
}
.fcard.loop { animation: float 6s var(--ease) infinite .2s; }
.fcard .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--grad-brand); color: #fff; }
.fcard small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.fcard b { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1.02rem; }
/* ---------- 8. Seções e cards de evento ---------------------------------- */
.sec { padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.sec-first { padding-top: 0; }
.sec-tight { padding-top: 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.15rem; }
.sec-head h2 { font-size: var(--fs-xl); }
.sec-head h2 .count { margin-left: .35rem; }
.sec-head p { color: var(--muted); font-size: var(--fs-sm); margin-top: .35rem; }
.ev-list { display: grid; gap: 1rem; }
.ev {
position: relative; overflow: hidden; isolation: isolate;
background: var(--surface); border: 1px solid color-mix(in srgb, var(--st) 26%, var(--line));
border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 1.3rem 1.4rem 1.3rem 1.65rem;
}
.ev::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--st), color-mix(in srgb, var(--st) 55%, transparent)); }
.ev::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--st) 9%, transparent), transparent 70%); }
.ev-notice { --st: var(--accent-ink); --st-i: var(--accent-ink); }
.ev-notice::after { background: radial-gradient(60% 120% at 100% 0%, var(--brand-50), transparent 70%); }
.ev-text { color: var(--ink-2); font-size: var(--fs-sm); max-width: 80ch; }
.ev-top { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.ev-top .when { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.ev-title { font-size: var(--fs-lg); margin: .75rem 0 .5rem; letter-spacing: -.015em; }
.ev-title a:hover { color: var(--accent-ink); }
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--muted); font-size: var(--fs-sm); }
.ev-meta > span { display: inline-flex; align-items: center; }
.ev-meta > span > .i { margin-right: .4rem; }
.ev-grid { display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; align-items: start; margin-top: 1rem; }
.ev-grid-0 { margin-top: 0; }
.ev-upd { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: .85rem 1rem; }
.ev-upd-h { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-bottom: .3rem; }
.ev-upd-h b { color: var(--st-i); }
.ev-upd p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ev-side { display: grid; gap: .6rem; justify-items: end; min-width: 220px; }
.next { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px dashed color-mix(in srgb, var(--st) 45%, var(--line-2)); border-radius: var(--r-pill); padding: .45rem .85rem; }
.next .i { color: var(--st-i); }
.next small { color: var(--muted); font-weight: 600; }
.ev-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.1rem; }
.ev-foot > .ev-actions:only-child { margin-left: auto; } /* sem a frase "Os demais…" (há outras ocorrências) */
.scope { display: inline-flex; align-items: flex-start; gap: .45rem; flex: 1 1 320px; max-width: 62ch; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 650; line-height: 1.5; }
.scope .i { color: var(--st-ok-ink); margin-top: .15rem; }
.scope > span { text-wrap: pretty; }
.ev-auto .ev-text { margin-top: .1rem; }
.ev-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Estágios: pontos numa trilha + horário de cada estágio */
.stepper { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); max-width: 560px; margin-top: 1rem; font-size: var(--fs-xs); color: var(--muted-2); }
.stepper li { position: relative; display: flex; flex-direction: column; gap: .15rem; min-width: 0; line-height: 1.2; }
.stepper li:not(:last-child)::after { content: ""; position: absolute; top: 4px; left: 16px; right: 6px; height: 2px; border-radius: 2px; background: var(--line-2); }
.stepper .dot { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); margin-bottom: .3rem; }
.stepper b { font-weight: 700; }
.stepper time { font-size: .7rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.stepper .st-done { color: var(--ink-2); }
.stepper .st-done::after { background: var(--st) !important; }
.stepper .st-done .dot { background: var(--st); border-color: var(--st); }
.stepper .st-cur { color: var(--st-i); }
.stepper .st-cur .dot { background: var(--st); border-color: var(--st); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 22%, transparent); }
/* Manutenção: progresso, contagem, "o que esperar" */
.prog { position: relative; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--st) 14%, var(--surface-3)); overflow: hidden; margin-top: .9rem; }
.prog i {
position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit;
background: repeating-linear-gradient(-45deg, var(--st) 0 10px, color-mix(in srgb, var(--st) 75%, white) 10px 20px);
background-size: 28px 28px; animation: barber 1.2s linear infinite; transition: width 1s var(--ease);
}
@keyframes barber { to { background-position: 28px 0; } }
.prog-row { display: flex; justify-content: space-between; gap: 1rem; margin-top: .45rem; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.cd { display: inline-flex; align-items: baseline; gap: .3rem; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cd-big { display: grid; justify-items: end; gap: .15rem; }
.cd-big small { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cd-big .cd { font-size: 1.35rem; letter-spacing: -.01em; }
.cd-big .cd i { font-style: normal; font-size: .62em; color: var(--muted); font-weight: 700; margin-right: .2rem; }
.todo { margin-top: .9rem; display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); background: color-mix(in srgb, var(--st) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--st) 20%, var(--line)); border-radius: var(--r-md); padding: .7rem .9rem; }
.todo .i { color: var(--st-i); margin-top: .2rem; }
.todo b { color: var(--ink); }
/* Menu "Adicionar à agenda" ( nativo: funciona sem JS) */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 250px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: .4rem; animation: rise .25s var(--ease-out); }
.menu-pop a { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.menu-pop a:hover { background: var(--surface-3); color: var(--accent-ink); }
/* Vazio tranquilo */
.calm { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.calm .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-3); color: var(--accent-ink); flex: 0 0 auto; }
.calm b { color: var(--ink); display: block; font-size: var(--fs-base); }
.calm > div { flex: 1 1 220px; min-width: 0; }
.calm .link { margin-left: auto; }
/* ---------- 9. Encontre seu servidor ------------------------------------- */
.finder {
position: relative; overflow: hidden; isolation: isolate;
display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.5rem 2.5rem; align-items: start;
padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border-radius: var(--r-xl);
background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-md);
}
.finder::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-aurora); opacity: .22; }
.finder > div { min-width: 0; }
.finder h2 { font-size: var(--fs-xl); margin-top: .8rem; }
.finder > div > p:not(.eyebrow) { color: var(--muted); font-size: var(--fs-sm); margin-top: .5rem; max-width: 46ch; }
.finder-form { margin-top: 3rem; }
.field {
display: flex; align-items: center; gap: .4rem; padding: .35rem .35rem .35rem 1.1rem;
background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
transition: border-color var(--t), box-shadow var(--t);
}
.field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.field > .i { color: var(--muted); width: 20px; height: 20px; }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: .7rem .2rem; font-size: var(--fs-base); color: var(--ink); }
.field input::placeholder { color: var(--muted-2); }
.finder-tip { margin-top: .55rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; padding-left: 1.1rem; }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .65rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.examples button { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-ink); background: var(--brand-50); border: 1px solid var(--line-2); border-radius: 999px; padding: .25rem .6rem; }
.examples button:hover { border-color: var(--brand); }
/* sugestões ao vivo quando se digita um NOME ("dh server", "cloud 1") */
.suggest { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.suggest small { width: 100%; font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.suggest button { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 650; padding: .3rem .7rem .3rem .35rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.suggest button:hover { border-color: var(--brand); }
.suggest .si { width: 18px; height: 18px; box-shadow: none; }
.suggest .si .i { width: 11px; height: 11px; }
.found { margin-top: 1rem; border-radius: var(--r-lg); padding: 1rem 1.1rem; background: var(--surface); border: 1px solid color-mix(in srgb, var(--st, var(--brand)) 30%, var(--line-2)); box-shadow: var(--shadow-sm); animation: rise .4s var(--ease-out); }
.found-h { display: flex; gap: .75rem; align-items: flex-start; }
.found-h > div { min-width: 0; }
.found-h .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; color: var(--st-i, var(--accent-ink)); background: color-mix(in srgb, var(--st, var(--brand)) 13%, var(--surface)); }
.found-h .ic .i { width: 20px; height: 20px; }
.found p { color: var(--ink-2); font-size: var(--fs-sm); }
.found p + p { margin-top: .35rem; }
.found p strong { color: var(--ink); }
.found-k, .found-sub { color: var(--muted) !important; }
.found-srv { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .1rem 0 .15rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--ink); letter-spacing: -.01em; }
.found-inc { display: inline-flex !important; margin-top: .5rem; line-height: 1.5; }
.found .ev-actions { margin-top: .85rem; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); border-top-color: var(--brand); animation: spinSlow .8s linear infinite; }
/* ---------- 10. Grupos, linhas, barras, tooltip --------------------------- */
.tools { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.seg-f { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: var(--r-pill); background: var(--surface-3); }
.seg-f button { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .85rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.seg-f button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg-f .count { font-size: .68rem; height: 1.5em; min-width: 1.5em; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: .35rem; }
.legend .si { width: 16px; height: 16px; box-shadow: none; }
.legend .si .i { width: 10px; height: 10px; }
.legend-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; margin-top: 1rem; }
/* cabeçalho de colunas alinhado com as barras (desktop) */
.cols { display: grid; grid-template-columns: var(--cols); gap: .5rem 1.4rem; padding: 0 1.2rem .5rem; font-size: .7rem; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; }
.cols-bar { display: flex; justify-content: space-between; }
.cols > span:last-child { text-align: right; }
.groups { display: grid; gap: .85rem; }
.grp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--t), border-color var(--t); }
.grp:hover { box-shadow: var(--shadow-md); }
.grp:not(.s-ok) { border-color: color-mix(in srgb, var(--st) 35%, var(--line)); }
.grp-head { position: relative; display: grid; grid-template-columns: var(--cols); gap: .5rem 1.4rem; align-items: center; padding: 1rem 1.2rem; }
.grp-head h3 { min-width: 0; }
.grp-toggle { display: flex; align-items: center; gap: .85rem; text-align: left; width: 100%; min-width: 0; padding: 0; }
.grp-toggle::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); } /* linha inteira clicável */
.grp-toggle:focus-visible { outline: none; }
.grp-toggle:focus-visible::after { outline: 3px solid color-mix(in srgb, var(--brand) 70%, white); outline-offset: -3px; }
.grp-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; color: var(--accent-ink); background: var(--brand-50); border: 1px solid var(--line-2); position: relative; }
.grp-ic .si { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; box-shadow: 0 0 0 2px var(--surface); }
.grp-ic .si .i { width: 11px; height: 11px; }
.grp-ic > .i { width: 21px; height: 21px; }
.grp-txt { min-width: 0; display: grid; gap: .1rem; }
.grp-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink); letter-spacing: -.01em; }
.grp-sum { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; font-family: var(--font-body); overflow-wrap: break-word; min-width: 0; }
.grp-sum b { color: var(--st-i); }
.chev { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin-left: auto; color: var(--muted); background: var(--surface-3); transition: transform var(--t-slow) var(--ease-out), background var(--t); flex: 0 0 auto; }
.chev .i { width: 16px; height: 16px; }
.grp[data-open] .chev { transform: rotate(180deg); }
.grp-bar { position: relative; z-index: 1; min-width: 0; }
.upct { text-align: right; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.upct small { display: block; font-family: var(--font-body); font-size: .7rem; color: var(--muted); font-weight: 600; }
/* "parede de pílulas": o grupo fechado mostra o nome de cada servidor (só com JS; sem JS o grupo fica aberto) */
.grp-peek { display: none; flex-wrap: wrap; gap: .35rem; padding: 0 1.2rem 1rem calc(1.2rem + 42px + .85rem); position: relative; z-index: 1; }
.rc-js .grp:not([data-open]) .grp-peek { display: flex; }
.peek { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 650; color: var(--ink-2); padding: .22rem .6rem .22rem .25rem; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); transition: border-color var(--t), color var(--t); max-width: 100%; min-width: 0; overflow-wrap: break-word; } /* nome longo quebra dentro da pílula, nunca alarga o card */
.peek:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line-2)); color: var(--accent-ink); }
.peek::before { content: ""; width: 8px; height: 8px; margin-left: .3rem; border-radius: 50%; background: var(--st); }
.peek:has(.si)::before { display: none; }
.peek small { color: var(--st-i); font-weight: 700; }
.peek .si { width: 16px; height: 16px; box-shadow: none; }
.peek .si .i { width: 10px; height: 10px; }
/* corpo recolhível: sem JS fica aberto; .rc-js recolhe os que não têm data-open */
.grp-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-slow) var(--ease-out), visibility 0s; }
.grp-body > div { overflow: clip; min-height: 0; } /* clip (não hidden): não vira contêiner de rolagem, senão a animação de scroll das barras para no meio */
.rc-js .grp:not([data-open]) .grp-body { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--t-slow) var(--ease-out), visibility 0s var(--t-slow); }
.grp-inner { border-top: 1px solid var(--line); padding: .35rem 1.2rem .9rem; }
.loc { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; padding: .85rem 0 .35rem; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.loc b { color: var(--ink-2); }
.loc > span { font-weight: 600; }
.loc::after { content: ""; flex: 1 1 40px; height: 1px; background: var(--line); order: 9; }
.loc .pill { text-transform: none; letter-spacing: 0; padding: .15rem .55rem .15rem .45rem; }
.row {
position: relative; display: grid; grid-template-columns: var(--cols); gap: .35rem 1.4rem; align-items: center;
padding: .55rem .6rem; margin-inline: -.6rem; border-radius: var(--r-md); transition: background var(--t);
}
.row:hover { background: var(--surface-2); }
.row.hl { animation: hl 2.4s var(--ease-out); }
.row-name { display: flex; align-items: center; gap: .65rem; min-width: 0; font-weight: 650; color: var(--ink); }
.row-name .t { min-width: 0; overflow-wrap: break-word; line-height: 1.3; } /* quebra nos espaços (anywhere partia "Dispo|nibilidade") */
a.row-name:hover .t { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.row-name .pill { padding: .2rem .55rem .2rem .45rem; }
.row .upct { font-size: var(--fs-xs); }
.retired-note { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; padding: .6rem .8rem; font-size: var(--fs-xs); color: var(--muted); border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--line-2); }
.retired-note .i { margin-top: .1rem; }
.retired-note a { color: var(--accent-ink); font-weight: 700; }
/* filtro "Com problema": esconde o que está operacional */
.rc-js .f-off { display: none !important; }
/* Barra de 90 dias: UM elemento; o gradiente pinta as corridas de dias; a máscara recorta 90 traços.
HTML pequeno, nítida, funciona sem JS. O JS acrescenta tooltip e teclado. */
.ub { --n: 90; --gap: 2px; --h: 30px; position: relative; height: var(--h); border-radius: 5px; touch-action: pan-y; }
.ub-fill {
position: absolute; inset: 0; background: var(--ub, var(--st-ok)); border-radius: inherit;
-webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--n) - var(--gap)), transparent 0 calc(100% / var(--n)));
mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--n) - var(--gap)), transparent 0 calc(100% / var(--n)));
}
.ub-sm { --h: 22px; --gap: 1.5px; }
.ub-lg { --h: 56px; --gap: 3px; }
.ub[tabindex] { cursor: crosshair; }
.ub:focus-visible { outline-offset: 4px; }
.ub-cur {
position: absolute; top: -4px; bottom: -4px; width: calc(100% / var(--n) - var(--gap) + 4px);
left: calc(var(--i) * 100% / var(--n) - 2px); border-radius: 4px; pointer-events: none;
background: var(--c, var(--st-ok)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink), 0 6px 16px -4px rgba(0,0,0,.35);
transition: left .09s linear;
}
/* hoje com pulso suave enquanto o problema/manutenção continua (o servidor só marca data-today-alert nesse caso) */
.ub[data-today-alert]::after {
content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: calc(100% / var(--n) - var(--gap));
border-radius: 2px; background: var(--today); animation: pulseGlow 1.6s var(--ease) infinite; pointer-events: none;
}
/* Tooltip do dia: role=tooltip em hover/foco; vira diálogo não modal quando fixado (toque/Enter) */
.tip {
position: absolute; z-index: var(--z-tip); width: min(310px, calc(100vw - 24px));
background: var(--tip-bg); color: var(--tip-ink); border-radius: var(--r-md); padding: .85rem .95rem .8rem;
box-shadow: 0 24px 50px -16px rgba(10,0,30,.55), 0 0 0 1px var(--tip-line);
font-size: var(--fs-sm); line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(6px) scale(.98);
transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.tip.on { opacity: 1; transform: none; }
.tip.pinned { pointer-events: auto; }
.tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--tip-bg); transform: rotate(45deg); border-radius: 2px; }
.tip.below::after { bottom: auto; top: -6px; }
.tip-h { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.tip-h b { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.tip-h small { color: var(--tip-muted); font-weight: 600; }
.tip-up { display: flex; align-items: center; gap: .45rem; margin-top: .35rem; font-weight: 700; }
.tip .sq { width: 10px; height: 10px; border-radius: 3px; background: var(--st); flex: 0 0 auto; }
.tip-sev { display: grid; gap: .25rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--tip-line); }
.tip-sev li { display: flex; align-items: center; gap: .45rem; color: var(--tip-ink); }
.tip-sev li .v { margin-left: auto; padding-left: .75rem; color: var(--tip-muted); font-weight: 600; white-space: nowrap; }
.tip-sev .note { color: var(--tip-muted); font-size: .75rem; }
.tip-inc { margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--tip-line); display: grid; gap: .3rem; }
.tip-inc small { color: var(--tip-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; }
.tip-inc a { color: #e2ceff; font-weight: 650; display: flex; gap: .35rem; align-items: flex-start; }
.tip-inc a:hover { text-decoration: underline; }
.tip-inc a .i { margin-top: .15rem; width: 14px; height: 14px; }
.tip-none { color: var(--tip-muted); margin-top: .4rem; }
.tip-hint { margin-top: .5rem; font-size: .7rem; color: var(--tip-muted); }
/* "Como calculamos" (details nativo) */
.como { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.como summary { cursor: pointer; display: flex; align-items: center; gap: .55rem; padding: .85rem 1.1rem; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); list-style: none; }
.como summary::-webkit-details-marker { display: none; }
.como summary .i { color: var(--accent-ink); }
.como summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; line-height: 1; color: var(--muted); transition: transform var(--t); }
.como[open] summary::after { transform: rotate(45deg); }
.como .md { padding: 0 1.1rem 1rem; font-size: var(--fs-sm); }
.formula { display: inline-block; margin: .2rem 0; padding: .35rem .7rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: .85em; color: var(--ink); }
/* ---------- 11. Histórico ------------------------------------------------- */
.hist { border-top: 1px solid var(--line); }
.hist-calm { display: flex; align-items: center; gap: .6rem; padding: 1rem 0; font-weight: 650; color: var(--ink-2); font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.hist-calm .si, .m-empty .si { width: 20px; height: 20px; }
.hist-item { position: relative; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem 1.4rem; align-items: start; padding: 1.1rem 0 1.1rem 1rem; border-bottom: 1px solid var(--line); }
.hist-item::before { content: ""; position: absolute; left: 0; top: 1.15rem; bottom: 1.15rem; width: 3px; border-radius: 3px; background: var(--st); opacity: .85; }
.hist-date { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--fs-md); line-height: 1.15; }
.hist-date small { display: block; font-family: var(--font-body); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.hist-main { min-width: 0; }
.hist-main h3 { font-size: var(--fs-md); font-weight: 650; letter-spacing: -.01em; margin: .45rem 0 .3rem; line-height: 1.3; }
.hist-main h3 a:hover { color: var(--accent-ink); }
.hist-main p { color: var(--muted); font-size: var(--fs-sm); }
.more { display: flex; justify-content: center; margin-top: 1.6rem; }
/* página /historico */
.page-hero-plain::after { background: linear-gradient(to bottom, transparent 60%, var(--bg)); }
.page-lead { color: var(--muted); font-size: var(--fs-md); margin-top: .35rem; max-width: 60ch; }
.hist-page { padding-top: 1.5rem; }
.hfilters { display: grid; grid-template-columns: auto auto minmax(240px, 1fr) auto; gap: 1rem 1.6rem; align-items: end; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.hf { display: grid; gap: .4rem; min-width: 0; }
.hf-l { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.pchip { display: inline-flex; align-items: center; padding: .45rem .85rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); background: var(--surface); transition: border-color var(--t), background var(--t); }
.pchip:hover { border-color: var(--brand); }
.pchip[aria-current="true"] { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }
.hf-sel { display: flex; gap: .5rem; }
.hf-sel .inp { padding: .55rem .8rem; font-size: var(--fs-sm); }
.rc-js [data-nojs-submit] { display: none; }
.seg-v { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: var(--r-pill); background: var(--surface-3); }
.seg-v a { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .85rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.seg-v a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg-v .i { width: 16px; height: 16px; }
.hist-sum { margin: 1.3rem 0 .4rem; font-size: var(--fs-sm); color: var(--muted); }
.hist-sum b { color: var(--ink); }
.hist-sum .link { vertical-align: middle; }
.month { border-bottom: 1px solid var(--line); }
.month > summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 280px) 15rem 28px; gap: .5rem 1.4rem; align-items: center; padding: 1.15rem 0; cursor: pointer; list-style: none; }
.month > summary .m-bar { grid-column: 2; }
.month > summary .m-up { grid-column: 3; }
.month > summary .chev { grid-column: 4; grid-row: 1; }
.month > summary::-webkit-details-marker { display: none; }
.m-name { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.m-name h2 { font-size: var(--fs-lg); }
.m-count { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.m-bar { display: grid; grid-template-columns: repeat(31, 1fr); gap: 2px; height: 22px; }
.m-bar i { background: var(--st); border-radius: 2px; }
.m-bar i.m-x { background: var(--surface-3); }
.hist-note { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.hist-note .i { width: 14px; height: 14px; }
.m-up { text-align: right; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.m-up b { font-family: var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.m-nd { font-size: var(--fs-xs); }
.month[open] .chev { transform: rotate(180deg); }
.m-body { padding-bottom: 1rem; }
.m-body .hist-item:last-child { border-bottom: 0; }
.m-empty { display: flex; align-items: center; gap: .6rem; padding: .3rem 0 .6rem; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.m-empty .si { flex: 0 0 auto; }
.m-note { padding-top: .8rem; color: var(--muted); }
.m-count.m-q, .cal-none.m-q { color: var(--st-i); }
.hist-fim { display: none; }
/* calendário */
.cal-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .3rem 0 1rem; }
.cl-nd { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.cl-nd i { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-3); border: 1px solid var(--line-2); }
.cals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1rem .9rem; box-shadow: var(--shadow-sm); }
.cal-h { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .65rem; }
.cal-h h2 { font-size: var(--fs-md); }
.cal-h span { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cwd { font-size: .66rem; font-weight: 800; color: var(--muted-2); text-align: center; padding-bottom: .15rem; }
.cday { display: grid; place-items: center; aspect-ratio: 1; border-radius: 7px; font-size: .74rem; font-weight: 700; color: var(--ink-2); /* dígito neutro (AA); a cor do estado fica no fundo e no anel */ background: color-mix(in srgb, var(--st) 16%, var(--surface)); font-variant-numeric: tabular-nums; transition: transform var(--t); }
.cday:not(.s-ok):not(.cday-nd):not(.cday-fut):not(.cday-pad) { background: color-mix(in srgb, var(--st) 30%, var(--surface)); }
.cday-pad { background: transparent; }
.cday-nd { background: var(--surface-3); color: var(--muted); border: 1px solid var(--line); }
.cday-fut { background: transparent; color: var(--muted-2); border: 1px dashed var(--line-2); }
.cday.has-ev { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--st); position: relative; z-index: 1; }
.cday.has-ev:hover { transform: scale(1.08); }
.cal-ev { margin-top: .7rem; display: grid; gap: .3rem; font-size: var(--fs-xs); }
.cal-ev li { display: flex; gap: .45rem; align-items: baseline; }
.cal-ev i { width: 8px; height: 8px; border-radius: 2px; background: var(--st); flex: 0 0 auto; transform: translateY(-1px); }
.cal-ev a { color: var(--ink-2); font-weight: 650; }
.cal-ev a:hover { color: var(--accent-ink); text-decoration: underline; }
.cal-none { margin-top: .7rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
/* meses sem dado e sem ocorrência: uma linha só, em vez de seis grades de "—" */
.cal-gap { grid-column: 1 / -1; display: flex; align-items: center; gap: .55rem; padding: .8rem 1rem; border: 1px dashed var(--line-2); border-radius: var(--r-lg); font-size: var(--fs-sm); color: var(--muted); font-weight: 600; background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-gap b { color: var(--ink-2); }
.cal-gap .i { color: var(--muted); }
.cal-nd .cal-h { flex-direction: column; align-items: flex-start; gap: .15rem; }
.cal-nd .cal-h .m-nd { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.cal-nd .cal-ev { margin-top: .2rem; }
/* ---------- 12. Ajuda ---------------------------------------------------- */
.help { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-md); }
.help::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-aurora); opacity: .28; }
.help-head { display: flex; gap: 1rem; align-items: flex-start; max-width: 64ch; }
.help-head .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--grad-brand); color: #fff; flex: 0 0 auto; box-shadow: var(--shadow-brand); }
.help-head .ic .i { width: 22px; height: 22px; }
.help h2 { font-size: var(--fs-xl); }
.help-head p { color: var(--ink-2); margin-top: .45rem; }
.checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-top: 1.5rem; counter-reset: ck; }
.check { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1.1rem 1.1rem 1rem; background: var(--glass); border: 1px solid var(--line-2); border-radius: var(--r-lg); backdrop-filter: blur(8px); }
.check::before { counter-increment: ck; content: counter(ck); position: absolute; top: .85rem; right: 1rem; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: color-mix(in srgb, var(--brand) 22%, transparent); line-height: 1; }
.check .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--accent-ink); background: var(--brand-50); border: 1px solid var(--line-2); }
.check .ic .i { width: 19px; height: 19px; }
.check h3 { font-size: var(--fs-base); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; padding-right: 1.5rem; }
.check p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.check .link { margin-top: auto; padding-top: .3rem; }
.help-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.5rem; }
.help-cta p { font-weight: 700; color: var(--ink); margin-right: .25rem; }
/* texto livre do painel (Configurações → Texto de ajuda da home) */
.help-note { margin-top: 1.25rem; max-width: 72ch; font-size: var(--fs-sm); }
.help-note > :first-child { margin-top: 0; }
/* ---------- 13. Modal e formulário de inscrição ------------------------- */
.sheet {
width: min(620px, calc(100vw - 24px)); max-width: none; max-height: min(90vh, 880px); padding: 0; border: 0; border-radius: var(--r-xl);
background: var(--surface); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(20,0,50,.6), 0 0 0 1px var(--line-2);
overflow: hidden; margin: auto;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheetIn .38s var(--ease-out); }
.sheet::backdrop { background: rgba(15,8,32,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .3s var(--ease); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.sheet-head { position: relative; isolation: isolate; padding: 1.3rem 1.5rem 1rem; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.sheet-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-aurora); opacity: .3; }
.sheet-head h2 { font-size: var(--fs-lg); display: flex; align-items: center; gap: .6rem; padding-right: 2.5rem; }
.sheet-head h2 .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); flex: 0 0 auto; }
.sheet-head p { color: var(--muted); font-size: var(--fs-sm); margin-top: .45rem; }
.x { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line-2); }
.x:hover { color: var(--ink); border-color: var(--brand); }
.sheet-body { padding: 1.2rem 1.5rem 1.3rem; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
/* rodapé do modal FIXO: o botão de enviar nunca fica escondido sob a árvore (falha do conceito A) */
.sheet-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: .6rem; padding: .85rem 1.5rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.feeds-line { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--line-2); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.feeds-line a { display: inline-flex; align-items: center; gap: .25rem; color: var(--accent-ink); font-weight: 700; }
.feeds-line .i { width: 13px; height: 13px; }
.sub-form { display: grid; gap: 1.05rem; }
.lbl { display: block; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); margin-bottom: .45rem; }
.lbl small { font-weight: 600; color: var(--muted); }
.inp { width: 100%; padding: .8rem 1rem; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: var(--fs-base); transition: border-color var(--t), box-shadow var(--t); }
.inp:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.inp[aria-invalid="true"] { border-color: var(--st-maj); }
.err { color: var(--st-maj-ink); font-size: var(--fs-xs); font-weight: 700; margin-top: .35rem; }
.hint, .detect { font-size: var(--fs-xs); color: var(--muted); margin-top: .4rem; }
.detect { color: var(--st-ok-ink); font-weight: 700; display: flex; align-items: center; gap: .35rem; }
/* canal: e-mail em destaque + chips para os canais da equipe (um só grupo de rádio "canal") */
.chan { display: grid; gap: .55rem; }
.chan-main { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t), background var(--t); }
.chan-main:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.chan-main .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--grad-brand); color: #fff; flex: 0 0 auto; }
.chan-main b { display: block; font-size: var(--fs-sm); }
.chan-main small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.45; margin-top: .1rem; }
.chan-main input, .opt input { accent-color: var(--brand); width: 18px; height: 18px; flex: 0 0 auto; }
.chan-alt { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; padding: .6rem .75rem; border: 1px solid var(--line-2); border-radius: var(--r-md); transition: border-color var(--t), background var(--t); }
.chan-alt:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.chan-alt > span { width: 100%; margin-bottom: .1rem; }
@media (min-width: 600px) {
.chan, .opts { grid-template-columns: 1fr 1fr; }
}
.chip-r { position: relative; cursor: pointer; }
.chip-r input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-r span { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .75rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); background: var(--surface); transition: border-color var(--t), background var(--t); }
.chip-r .i { width: 14px; height: 14px; }
.chip-r:hover span { border-color: color-mix(in srgb, var(--brand) 50%, var(--line-2)); }
.chip-r input:checked + span { border-color: var(--brand); background: var(--brand-50); color: var(--accent-ink); }
.chip-r input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 70%, white); outline-offset: 2px; }
.rc-js [data-canal="email"] [data-when="hook"], .rc-js [data-canal="hook"] [data-when="email"] { display: none; }
.rc-js [data-when="hook"] .lbl small { display: none; }
.opts { display: grid; gap: .55rem; }
.opt { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t), background var(--t); }
.opt:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line-2)); }
.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.opt input { margin-top: .15rem; }
.opt b { display: block; font-size: var(--fs-sm); }
.opt small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.45; margin-top: .15rem; }
.tree { border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.tree:empty { display: none; }
.rc-js .tree[data-off] { display: none; }
/* quebra linha: no celular o filtro ocupa a largura toda e os dois botões descem, alinhados à direita (nada cortado pelo overflow da .tree) */
.tree-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: flex-end; padding: .55rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.field-sm { flex: 1 1 200px; min-width: 0; box-shadow: none; padding: .1rem .2rem .1rem .8rem; }
@media (max-width: 600px) { .field-sm { flex-basis: 100%; } .tree-tools { row-gap: .25rem; } }
.field-sm input { padding: .45rem .2rem; font-size: var(--fs-sm); }
.field-sm > .i { width: 17px; height: 17px; }
.tree-tools button { font-size: var(--fs-xs); font-weight: 700; color: var(--accent-ink); padding: .45rem .55rem; border-radius: var(--r-sm); white-space: nowrap; }
.tree-tools button:hover { background: var(--surface-3); }
.tree-list { position: relative; max-height: 260px; overflow-y: auto; padding: .35rem .55rem .55rem; overscroll-behavior: contain; }
.auth .tree-list { max-height: 380px; }
.tree-sec { padding: .25rem 0; }
.tree-sec + .tree-sec { border-top: 1px solid var(--line); }
.tree label { display: flex; align-items: center; gap: .55rem; padding: .36rem .45rem; border-radius: var(--r-sm); font-size: var(--fs-sm); cursor: pointer; }
.tree label:hover { background: var(--surface-2); }
.tree input[type="checkbox"] { accent-color: var(--brand); width: 16px; height: 16px; flex: 0 0 auto; }
.tree .lv1 { display: block; width: 100%; padding: .45rem .45rem .2rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.tree .lv2 { font-weight: 700; color: var(--ink-2); }
.tree .lv2 span { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.tree .lv2 small { font-weight: 600; color: var(--muted); font-size: .7rem; }
.tree .lv3 { padding-left: 2.1rem; }
.tree .lv3 .si { width: 14px; height: 14px; box-shadow: none; }
.tree .lv3 .si .i { width: 9px; height: 9px; }
.tree-empty { padding: .8rem .45rem; font-size: var(--fs-sm); color: var(--muted); }
.tree-count { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; padding: .5rem .8rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.tree-count:empty { display: none; }
.what { display: flex; gap: .6rem; font-size: var(--fs-sm); color: var(--ink-2); padding: .8rem .95rem; border-radius: var(--r-md); background: var(--brand-50); border: 1px solid var(--line-2); }
.what .i { color: var(--accent-ink); margin-top: .2rem; }
.adv { font-size: var(--fs-sm); }
.adv summary { cursor: pointer; color: var(--accent-ink); font-weight: 700; width: fit-content; }
.adv-row { display: grid; gap: .45rem; margin-top: .6rem; }
.adv label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ink-2); }
.adv input { accent-color: var(--brand); width: 16px; height: 16px; }
.turnstile { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; width: fit-content; }
.turnstile .ok { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); transition: background var(--t), color var(--t); }
.turnstile .ok .i { width: 12px; height: 12px; stroke-width: 2.5; }
.turnstile.is-ok .ok { background: var(--st-ok); color: #fff; } /* só com o token do Turnstile (antes: escudo neutro) */
.turnstile.is-ok .ok .i { stroke-width: 3; }
/* o widget invisível não ocupa altura (o iframe inline criava uma linha de ~17 px) e fica colado na caixa quando aparece */
.ts-wrap { display: grid; justify-items: start; }
.cf-turnstile, [data-ts-slot] { line-height: 0; font-size: 0; }
.cf-turnstile iframe, [data-ts-slot] iframe { display: block; }
.legal { font-size: var(--fs-xs); color: var(--muted); }
.legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.sub-done { text-align: center; padding: 1.4rem .5rem .6rem; }
.sub-done .env { position: relative; width: 92px; height: 92px; margin: 0 auto 1.1rem; display: grid; place-items: center; border-radius: 28px; background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); animation: pop .55s var(--ease-out) both; }
.sub-done .env .i { width: 44px; height: 44px; stroke-width: 1.6; }
.sub-done .env::after { content: ""; position: absolute; inset: -10px; border-radius: 34px; border: 2px solid color-mix(in srgb, var(--brand) 40%, transparent); animation: livePing 2.4s var(--ease-out) infinite; }
.sub-done h3 { font-size: var(--fs-xl); }
.sub-done h3:focus { outline: none; }
.sub-done p { color: var(--muted); margin: .6rem auto 0; max-width: 44ch; font-size: var(--fs-sm); }
.sub-done p strong { color: var(--ink); }
.sub-done .note { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; padding: .4rem .8rem; border-radius: var(--r-pill); background: var(--surface-3); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.sub-done .ev-actions { justify-content: center; margin-top: 1.3rem; }
/* ---------- 14. Página de incidente -------------------------------------- */
.page-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 clamp(1.75rem, 1rem + 2.5vw, 2.75rem); border-bottom: 1px solid var(--line); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--grad-aurora); opacity: .3; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 80% at 88% 20%, color-mix(in srgb, var(--st) 16%, transparent), transparent 70%), linear-gradient(to bottom, transparent 60%, var(--bg)); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.crumbs a { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent-ink); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs .i { width: 14px; height: 14px; }
.page-hero h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); margin: .9rem 0 .7rem; max-width: 30ch; }
.page-meta { display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.page-meta > span > .i { display: inline-block; vertical-align: -.22em; margin-right: .4rem; }
.page-meta b { color: var(--ink-2); }
.inc-head { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 1.1rem; }
.inc-head .orb { margin-top: .2rem; }
.inc-head h1 { margin-top: .75rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 2rem; align-items: start; padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.layout-main { min-width: 0; }
.aside { display: grid; gap: 1rem; position: sticky; top: calc(var(--header-h) + 16px); }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 1.1rem 1.15rem; }
.box > h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .8rem; }
.now { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--st) 30%, var(--line)); border-radius: var(--r-lg); padding: 1.15rem 1.25rem 1.15rem 1.5rem; background: var(--surface); box-shadow: var(--shadow-md); }
.now::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--st); }
.now-h { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; }
.now-h small { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.now-next { margin-top: .9rem; }
.now-done { display: flex; gap: .85rem; align-items: center; background: color-mix(in srgb, var(--st-ok) 6%, var(--surface)); }
.now-done .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--st-ok); color: #fff; flex: 0 0 auto; box-shadow: 0 0 0 5px color-mix(in srgb, var(--st-ok) 18%, transparent); }
.now-done .ic .i { width: 20px; height: 20px; stroke-width: 2.6; }
.now-done p { color: var(--ink-2); font-size: var(--fs-md); }
.now-done b { color: var(--ink); }
.md p { color: var(--ink-2); margin-top: .65rem; line-height: 1.7; }
.md ul { margin-top: .5rem; display: grid; gap: .3rem; padding-left: 1.2rem; }
.md li { list-style: disc; color: var(--ink-2); }
.md a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.md strong { color: var(--ink); }
.h2s { font-size: var(--fs-lg); margin-top: 2.2rem; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.h2s small { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; letter-spacing: 0; }
.tl { position: relative; margin-top: 1.25rem; }
.tl::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--line-2), var(--line)); }
.tl-item { position: relative; padding: 0 0 1.6rem 2.35rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--st); color: var(--st-i); }
.tl-dot .i { width: 12px; height: 12px; stroke-width: 2.6; }
.tl-item:first-child .tl-dot { background: var(--st); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--st) 18%, transparent); }
.tl-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem; }
.tl-h b { font-family: var(--font-display); font-size: var(--fs-base); color: var(--st-i); }
.tl-h time { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 650; }
.tl-h small { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.trans { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.trans span { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: .22rem .6rem; }
.trans .i { width: 12px; height: 12px; color: var(--muted); }
.trans em { font-style: normal; color: var(--st-i); }
.affect { display: grid; gap: .8rem; }
.aff { display: grid; gap: .4rem; }
.aff-h { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.aff-h a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: var(--fs-sm); }
.aff-h a:hover { color: var(--accent-ink); }
.aff-h .si { width: 18px; height: 18px; box-shadow: none; }
.aff-h .si .i { width: 11px; height: 11px; }
.mini-tl { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; display: flex; }
.mini-tl i { height: 100%; background: var(--st); }
.mini-axis { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted-2); font-weight: 600; }
.mini-leg { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .72rem; font-weight: 600; color: var(--muted); }
.mini-leg li { display: inline-flex; align-items: center; }
.mini-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--st); margin-right: .35rem; }
.unaff, .unaff-txt { font-size: var(--fs-sm); color: var(--ink-2); }
.unaff summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; font-weight: 600; list-style: none; }
.unaff summary::-webkit-details-marker { display: none; }
.unaff summary .si { width: 18px; height: 18px; box-shadow: none; }
.unaff summary .si .i { width: 11px; height: 11px; }
.unaff summary u { color: var(--accent-ink); text-decoration: none; font-weight: 700; margin-left: auto; font-size: var(--fs-xs); white-space: nowrap; }
.unaff ul { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.unaff li { font-size: var(--fs-xs); color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: .15rem .55rem; }
.unaff li[class] { color: var(--st-i); font-weight: 650; border-color: color-mix(in srgb, var(--st) 40%, var(--line)); } /* com outra ocorrência agora */
.unaff li a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.follow .lbl { display: flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-size: var(--fs-base); }
.follow .lbl .i { color: var(--accent-ink); }
.follow-txt { font-size: var(--fs-sm); color: var(--ink-2); margin: -.15rem 0 .7rem; }
.follow-row { display: grid; gap: .5rem; }
.follow .legal { margin-top: .6rem; }
.follow-ok { display: flex; gap: .6rem; align-items: flex-start; margin-top: .7rem; padding: .7rem .8rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--st-ok) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--st-ok) 30%, var(--line)); font-size: var(--fs-sm); color: var(--ink-2); }
.follow-ok .i { color: var(--st-ok-ink); margin-top: .15rem; }
.share { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.share .btn { width: 100%; padding-inline: .6rem; }
.share .btn[hidden] + .btn { grid-column: 1 / -1; }
.pm { margin-top: 2.2rem; }
.pm-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.pm-h h2 { font-size: var(--fs-lg); display: flex; align-items: center; gap: .55rem; }
.pm-h h2 .i { color: var(--accent-ink); }
.pm-h p { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-top: 1rem; }
.pm-grid li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.05rem 1.15rem; box-shadow: var(--shadow-sm); }
.pm-n { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pm-grid h3 { font-size: var(--fs-base); margin-top: .5rem; }
.pm-grid p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: .35rem; line-height: 1.65; }
/* ---------- 15. Página de servidor --------------------------------------- */
.svc-head { display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem; }
.svc-id { min-width: 0; }
.svc-head h1 { margin: 0 0 .4rem; }
.svc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }
.svc-sub > span { display: inline-flex; align-items: center; gap: .4rem; }
.svc-cta { margin-left: auto; display: flex; flex-wrap: wrap; gap: .6rem; }
.paste { display: flex; align-items: center; gap: .8rem; margin-top: 1.3rem; padding: .7rem .8rem .7rem 1rem; max-width: 640px; border-radius: var(--r-md); background: var(--glass); border: 1px dashed var(--line-2); backdrop-filter: blur(6px); }
.paste .ic { color: var(--accent-ink); }
.paste > div { flex: 1; min-width: 0; }
.paste small { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.paste code { display: block; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
.tile { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; }
.tile small { display: block; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; } /* sem caixa alta: "Últimas 24 h" (o símbolo de hora é minúsculo) */
.tile b { display: block; font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); letter-spacing: -.02em; margin-top: .3rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile span { display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad-brand); opacity: .75; }
.blocks, .bigbar { margin-top: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.15rem 1.25rem 1rem; box-shadow: var(--shadow-sm); }
.bigbar-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.bigbar-h h2 { font-size: var(--fs-md); }
.bigbar-h .muted { font-size: var(--fs-xs); font-weight: 600; }
.blk { display: grid; grid-template-columns: repeat(96, minmax(0, 1fr)); gap: 2px; height: 34px; }
.blk i { background: var(--st); border-radius: 2px; }
.hours, .months { position: relative; height: 1.2rem; margin-top: .45rem; font-size: .7rem; font-weight: 700; color: var(--muted-2); letter-spacing: .05em; }
.months { text-transform: uppercase; }
.hours span, .months span { position: absolute; top: 0; border-left: 1px solid var(--line-2); padding-left: .35rem; line-height: 1.2; }
.axis { display: flex; justify-content: space-between; font-size: .7rem; font-weight: 600; color: var(--muted-2); margin-top: .35rem; }
.banner-retired { display: flex; gap: .85rem; align-items: flex-start; margin-top: 1.2rem; padding: 1rem 1.15rem; border-radius: var(--r-lg); background: var(--surface-2); border: 1px dashed var(--line-2); color: var(--ink-2); font-size: var(--fs-sm); }
.banner-retired .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--surface-3); color: var(--muted); flex: 0 0 auto; }
.banner-retired a { color: var(--accent-ink); font-weight: 700; }
/* ---------- 16. Páginas de inscrição ------------------------------------- */
.auth-wrap { position: relative; isolation: isolate; padding: clamp(2rem, 1rem + 4vw, 4rem) 0 1rem; }
.auth-wrap::before { content: ""; position: absolute; inset: 0 0 30% 0; z-index: -1; background: var(--grad-aurora); opacity: .35; -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); }
.auth { max-width: 560px; margin-inline: auto; text-align: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); }
.auth-wide { max-width: 760px; text-align: left; }
.auth-ic { width: 72px; height: 72px; margin: 0 auto 1.1rem; display: grid; place-items: center; border-radius: 22px; background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.auth-ic .i { width: 34px; height: 34px; stroke-width: 1.7; }
.auth-wide .auth-ic { margin-inline: 0; }
.auth-ic.s-ok, .auth-ic.s-deg, .auth-ic.s-nd { background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--st) 30%, white) 0%, var(--st) 50%, color-mix(in srgb, var(--st) 70%, #120625) 100%); box-shadow: 0 0 0 8px color-mix(in srgb, var(--st) 14%, transparent), 0 18px 40px -12px color-mix(in srgb, var(--st) 70%, transparent); }
.auth-ic.burst { animation: pop .6s var(--ease-out) both; border-radius: 50%; }
.auth-ic.burst .i { stroke-width: 2.4; }
.auth h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.auth-lead { color: var(--ink-2); font-size: var(--fs-md); margin-top: .6rem; }
.auth-lead .pill { vertical-align: middle; margin-left: .3rem; }
.auth-note { display: flex; gap: .5rem; align-items: flex-start; justify-content: center; max-width: 46ch; margin-inline: auto; margin-top: 1.2rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-align: left; }
.auth-note .i { margin-top: .1rem; flex: 0 0 auto; }
.auth-note a { color: var(--accent-ink); text-decoration: underline; }
.auth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
.auth-actions-l { justify-content: flex-start; }
.auth-form .sub-form { margin-top: 1.4rem; }
.facts { display: grid; gap: 0; margin: 1.3rem auto 0; max-width: 420px; text-align: left; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .9rem; font-size: var(--fs-sm); }
.facts li + li { border-top: 1px solid var(--line); }
.facts span { color: var(--muted); font-weight: 600; }
.facts b { color: var(--ink); text-align: right; }
.next-list { display: grid; gap: .55rem; margin: 1.2rem auto 0; max-width: 440px; text-align: left; }
.next-list li { display: flex; gap: .6rem; font-size: var(--fs-sm); color: var(--ink-2); }
.next-list .i { color: var(--accent-ink); margin-top: .2rem; }
.alt { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px dashed var(--line-2); font-size: var(--fs-sm); }
.alt p { color: var(--muted); margin: .2rem 0 .4rem; }
.manage-h { display: flex; gap: 1rem; align-items: center; }
.manage-h .auth-ic { margin: 0; width: 60px; height: 60px; border-radius: 18px; }
.manage-h .auth-ic .i { width: 28px; height: 28px; }
.manage-h .auth-lead { margin-top: .25rem; font-size: var(--fs-base); }
.saved { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .65rem .9rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--st-ok) 9%, var(--surface)); color: var(--st-ok-ink); font-weight: 700; font-size: var(--fs-sm); }
.types { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.types legend { grid-column: 1 / -1; }
.followed .lbl { margin-bottom: .35rem; }
.followed p { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .65rem .9rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); }
.followed .i { color: var(--accent-ink); }
.followed a { font-weight: 700; color: var(--ink); }
.followed a:hover { color: var(--accent-ink); }
.followed small { color: var(--muted); font-weight: 600; margin-left: auto; }
.danger { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 1.8rem; padding: 1.1rem 1.2rem; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--st-maj) 22%, var(--line-2)); background: color-mix(in srgb, var(--st-maj) 4%, var(--surface)); }
.danger > div:first-child { flex: 1 1 320px; }
.danger b { font-family: var(--font-display); }
.danger p { font-size: var(--fs-sm); color: var(--muted); margin-top: .25rem; }
.danger-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* ---------- 17. Toast ---------------------------------------------------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); transform: translate(-50%, 20px); opacity: 0; display: inline-flex; align-items: center; gap: .5rem; background: var(--tip-bg); color: var(--tip-ink); padding: .7rem 1.1rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 650; box-shadow: var(--shadow-lg); transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast .i { color: #3fd69b; }
.toast .link { color: #e2ceff; margin-left: .35rem; }
/* ---------- 18. Responsivo ----------------------------------------------- */
@media (max-width: 1180px) {
.fchip-2 { right: -4%; }
.fcard { left: -6%; }
}
@media (max-width: 1060px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-visual { display: none; } /* ilustração nunca acima do status no celular */
.hero-title .orb { display: grid; }
.checks { grid-template-columns: repeat(2, 1fr); }
.layout { grid-template-columns: 1fr; }
.aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ftr-grid { grid-template-columns: 1fr 1fr 1fr; }
.ftr-brand { grid-column: 1 / -1; }
.hfilters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.cols { display: none; }
.grp-head { grid-template-columns: minmax(0, 1fr) auto; gap: .7rem .9rem; }
.grp-head > h3 { grid-column: 1 / -1; }
.grp-bar { grid-column: 1; grid-row: 2; }
.grp-head > .upct { grid-column: 2; grid-row: 2; }
.grp-head > .upct small { display: none; }
.grp-peek { padding-left: 1.2rem; }
.month > summary { grid-template-columns: minmax(0, 1fr) auto 28px; }
.month > summary .m-bar { grid-column: 1 / -1; grid-row: 2; }
.month > summary .m-up { grid-column: 2; grid-row: 1; }
.month > summary .chev { grid-column: 3; }
}
@media (max-width: 860px) {
/* com a pílula de estado visível (rolou a página), o logo completo vira o ícone: a marca nunca fica cortada */
.hdr:has(.hdr-state:not([hidden])) .brand .logo-l, .hdr:has(.hdr-state:not([hidden])) .brand .logo-d,
.hdr:has(.hdr-state:not([hidden])) .brand-tag { display: none; }
.hdr:has(.hdr-state:not([hidden])) .brand .logo-ic { display: block; }
.finder { grid-template-columns: 1fr; }
.finder-form { margin-top: 0; }
.ev-grid { grid-template-columns: 1fr; }
.ev-side { justify-items: start; min-width: 0; }
.tiles { grid-template-columns: repeat(2, 1fr); }
.svc-head { flex-wrap: wrap; }
.svc-cta { margin-left: 0; width: 100%; }
}
@media (max-width: 720px) {
:root { --header-h: 60px; }
.brand img { height: 17px; }
.brand-tag { display: none; }
.nav { gap: .3rem; }
.nav .nav-link { display: none; }
.nav-ic { display: inline-grid; }
.nav-ic, .theme-btn { width: 34px; height: 34px; }
.nav-ic .i, .theme-btn .i { width: 17px; height: 17px; }
.hdr-bar { gap: .5rem; }
.hdr .btn { margin-left: 0; padding: .55rem .72rem; gap: .3rem; font-size: .78rem; }
.hdr .btn .i { width: 15px; height: 15px; }
.hdr-state { padding: .32rem .6rem; }
.hdr:has(.hdr-state:not([hidden])) .nav-ic { display: none; }
.hdr:has(.hdr-state:not([hidden])) .hdr-bar { gap: .4rem; }
.inc-head .orb, .svc-head .orb { display: none; }
.paste code { white-space: normal; overflow-wrap: anywhere; font-size: var(--fs-xs); }
.hero { padding-top: 1.25rem; }
.hero .eyebrow { display: none; } /* no celular o orb ao lado do título já diz "ao vivo": o card do incidente sobe */
.hero-title { margin-block: .75rem .55rem; gap: .85rem; }
.hero-title h1 { font-size: clamp(1.75rem, 1.1rem + 3.6vw, 2.25rem); }
.orb-sm { --s: 56px; }
.hero-lead { font-size: var(--fs-base); }
.hero-meta { gap: .35rem .9rem; font-size: var(--fs-xs); }
.hero-meta > span:nth-child(2) { display: none; } /* "Horário de Brasília" já está no rodapé e nas datas */
.hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.hero-cta .btn { padding: .85rem .7rem; font-size: var(--fs-sm); gap: .4rem; }
.lbl-long { display: none; }
.lbl-short { display: inline; }
.grp-head { padding: .9rem 1rem; }
.grp-ic { width: 38px; height: 38px; }
.grp-inner { padding: .2rem 1rem .8rem; }
.grp-peek { padding: 0 1rem .9rem; gap: .3rem; }
.peek { font-size: .72rem; padding: .16rem .5rem .16rem .2rem; }
.row { grid-template-columns: minmax(0, 1fr) auto; gap: .45rem .75rem; padding: .7rem .5rem; margin-inline: -.5rem; }
.row .row-bar { grid-column: 1 / -1; grid-row: 2; }
.row .upct { grid-row: 1; grid-column: 2; }
.ub { --gap: 1px; --h: 24px; }
.ub-sm { --h: 18px; }
.ub-lg { --h: 44px; --gap: 1.5px; }
.blk { gap: 1px; height: 28px; }
.ev { padding: 1.1rem 1.05rem 1.1rem 1.3rem; }
.ev-top .when { margin-left: 0; width: 100%; }
.ev-foot { flex-direction: column; align-items: stretch; }
.ev-foot .scope { flex: none; max-width: none; } /* em coluna, a base de 320 px viraria altura */
.ev-actions .btn, .ev-actions .menu, .ev-actions .menu > summary { flex: 1; }
.ev-actions .menu > summary { width: 100%; }
.menu-pop { left: 0; right: auto; }
.cd-big { justify-items: start; }
.stepper { font-size: .68rem; letter-spacing: -.01em; }
.stepper li { padding-right: .2rem; }
.hist-item { grid-template-columns: 1fr; gap: .25rem; }
.hist-date { display: flex; gap: .4rem; align-items: baseline; font-size: var(--fs-sm); }
.hist-date small { display: inline; }
.hist-item .m-hide { display: none; }
.hist-fim { display: inline; }
.checks { grid-template-columns: 1fr; }
.help-head { flex-direction: column; }
.calm { flex-wrap: wrap; }
.calm .link { margin-left: 0; }
.ftr-grid { grid-template-columns: 1fr 1fr; }
.tools { width: 100%; justify-content: space-between; }
.pm-grid { grid-template-columns: 1fr; }
.page-hero h1 { font-size: clamp(1.5rem, 1.1rem + 2.5vw, 2rem); }
.gbar-in { flex-wrap: wrap; gap: .2rem .6rem; }
.gbar p { flex: 1 1 calc(100% - 30px); }
.gbar .link { margin-left: calc(20px + .6rem); }
.hfilters { grid-template-columns: 1fr; padding: 1rem; }
.month > summary { grid-template-columns: minmax(0, 1fr) 28px; }
.month > summary .m-up { text-align: left; grid-column: 1 / -1; grid-row: auto; }
.month > summary .chev { grid-row: 1; grid-column: 2; }
.types { grid-template-columns: 1fr; }
.facts li { flex-direction: column; gap: .1rem; }
.facts b { text-align: left; }
/* modal vira "sheet" de baixo no celular */
.sheet { width: 100%; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; margin: auto 0 0; }
.sheet-head, .sheet-body { padding-inline: 1.1rem; }
.sheet-foot { padding: .75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom)); }
.sheet-foot .btn { flex: 1; }
.tiles { gap: .6rem; }
}
/* tela pequena com densidade baixa (≤ 1,5x): 90 traços em ~330 px viram moiré → faixa contínua */
@media (max-width: 720px) and (max-resolution: 1.5dppx) {
.ub { --gap: 0px; border-radius: 6px; overflow: hidden; }
}
@media (max-width: 380px) {
.nav-ic { display: none; }
.hdr:has(.hdr-state:not([hidden])) .theme-btn { display: none; } /* 360 px: pílula + "Receber avisos" cabem sem tocar no ícone da marca */
.hero-cta { grid-template-columns: 1fr; }
}
/* ---------- 19. Movimento reduzido, pausa manual, alto contraste, impressão -- */
/* pausa: fora da tela (o JS marca data-offscreen no hero) */
[data-offscreen] .loop, [data-offscreen] .loop::before, [data-offscreen] .loop::after, [data-offscreen] .orb::before,
[data-offscreen] .btn-rayglow .ray::before { animation-play-state: paused; } /* volta a correr quando o hero reaparece */
/* pausa manual (botão no rodapé, WCAG 2.2.2) e prefers-reduced-motion */
html[data-motion="off"] .loop, html[data-motion="off"] .loop::before, html[data-motion="off"] .loop::after,
html[data-motion="off"] .orb::before, html[data-motion="off"] .btn-rayglow .ray::before,
html[data-motion="off"] .ub[data-today-alert]::after, html[data-motion="off"] .sub-done .env::after { animation: none !important; }
html[data-motion="off"] .orb-ring { display: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.orb-ring, .live::after { display: none; }
.btn-rayglow .ray::before, .orb::before { animation: none; }
}
/* Alto contraste do Windows: as cores de estado continuam (são informação), bordas visíveis */
@media (forced-colors: active) {
.ub-fill, .si, .fleet i, .blk i, .m-bar i, .cday, .mini-tl i, .live, .kpi .dot, .tip .sq { forced-color-adjust: none; }
.pill, .cchip, .peek, .chip-r span, .opt, .chan-main { border: 1px solid CanvasText; }
.btn { border: 1px solid ButtonText; }
.sw { -webkit-text-fill-color: CanvasText; background: none; }
}
/* Impressão: só o conteúdo, sem animação nem cabeçalho fixo */
@media print {
.hdr, .ftr, .hero-visual, .sheet, .finder, .help, .tools, .share, .follow, .skip-link { display: none !important; }
.reveal, .enter { animation: none !important; opacity: 1 !important; transform: none !important; }
.grp-body { grid-template-rows: 1fr !important; visibility: visible !important; }
body { background: #fff; color: #000; }
}