/* Infraestrutura e Sistemas · Flix Fibra
   Direcao visual: clara e sobria, inspirada nas interfaces da Apple. Fonte do sistema, muito respiro, hierarquia por peso e tamanho,
   cor so' para estado. Segue o tema do aparelho (claro/escuro). Os ids e classes usados pelo app.js nao mudam. */
:root{
  color-scheme:light;
  --bg:#f5f5f7;--surf:#fff;--surf2:#fafafc;--sunk:#efeff2;
  --txt:#1d1d1f;--txt2:#6e6e73;--txt3:#8e8e93;
  --linha:rgba(0,0,0,.08);--linha2:rgba(0,0,0,.14);
  --azul:#0071e3;--link:#0066cc;
  --ok:#248a3d;--warn:#b25000;--bad:#d70015;--info:#0071e3;
  --ok-bg:rgba(52,199,89,.14);--warn-bg:rgba(255,159,10,.16);--bad-bg:rgba(255,59,48,.12);--mut-bg:rgba(120,120,128,.14);
  --ok-dot:#34c759;--warn-dot:#ff9f0a;--bad-dot:#ff3b30;
  --serie1:#0071e3;--serie2:#86868b;
  --vidro:rgba(245,245,247,.72);--sombra:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);--sombra-alta:0 20px 60px rgba(0,0,0,.18);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",system-ui,Roboto,"Helvetica Neue",sans-serif;
  --r:18px;--r2:12px;--mola:cubic-bezier(.32,.72,0,1);
}
/* escuro: o tema.js marca <html data-tema="escuro"> (escolha da pessoa ou, no automatico, o aparelho) */
:root[data-tema="escuro"]{
  color-scheme:dark;
  --bg:#000;--surf:#1c1c1e;--surf2:#242426;--sunk:#2c2c2e;
  --txt:#f5f5f7;--txt2:#a1a1a6;--txt3:#7c7c82;
  --linha:rgba(255,255,255,.1);--linha2:rgba(255,255,255,.18);
  --azul:#0a84ff;--link:#2997ff;
  --ok:#30d158;--warn:#ff9f0a;--bad:#ff453a;--info:#0a84ff;
  --ok-bg:rgba(48,209,88,.16);--warn-bg:rgba(255,159,10,.18);--bad-bg:rgba(255,69,58,.18);--mut-bg:rgba(235,235,245,.12);
  --ok-dot:#30d158;--warn-dot:#ff9f0a;--bad-dot:#ff453a;
  --serie1:#0a84ff;--serie2:#98989d;
  --vidro:rgba(0,0,0,.66);--sombra:none;--sombra-alta:0 20px 60px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:400 15px/1.47 var(--sans);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{margin:0;font-weight:600}
h2{font-size:1.65rem;line-height:1.12;letter-spacing:-.022em;margin:0 0 18px}
h3{font-size:1.02rem;letter-spacing:-.01em;margin:26px 0 12px;color:var(--txt)}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:3px solid color-mix(in srgb,var(--azul) 55%,transparent);outline-offset:2px;border-radius:8px}
.pular{position:absolute;left:-999px;top:0;background:var(--azul);color:#fff;padding:8px 12px;z-index:100;border-radius:0 0 10px 0}.pular:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- cabecalho em vidro ---------- */
.cabeca{display:grid;grid-template-columns:1fr auto;grid-template-areas:"marca acoes" "abas info";align-items:center;column-gap:24px;padding:12px max(24px,calc((100% - 1132px)/2)) 0;position:sticky;top:0;z-index:30;background:var(--vidro);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid var(--linha)}
.faixa-dev{grid-column:1/-1;margin:-12px calc(-1 * max(24px,(100% - 1132px)/2)) 8px;background:var(--warn-bg);color:var(--warn);text-align:center;font-weight:600;padding:6px 12px;font-size:.82rem}
.topo{display:contents}
.marca{grid-area:marca;display:flex;gap:14px;align-items:center;min-width:0}.logo{height:30px;width:auto;object-fit:contain}
.marca h1{font-size:1rem;letter-spacing:-.01em}.sub,.meta,.nota{color:var(--txt2);font-size:.8rem;margin:0}
.topo-info{grid-area:info;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;justify-content:flex-end;padding-bottom:8px}
.topo-acoes{grid-area:acoes;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.conexao{display:inline-flex;gap:8px;align-items:center;font-size:.8rem;font-weight:600;padding:5px 12px 5px 10px;border-radius:999px;background:var(--mut-bg)}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--txt3);display:inline-block;transition:background .3s}
.conexao.ok{background:var(--ok-bg);color:var(--ok)}.conexao.velho{background:var(--warn-bg);color:var(--warn)}.conexao.perdida{background:var(--bad-bg);color:var(--bad)}
.conexao.ok .ponto{background:var(--ok-dot)}.conexao.velho .ponto{background:var(--warn-dot)}.conexao.perdida .ponto{background:var(--bad-dot)}
.rot{font-size:.8rem;color:var(--txt2);display:inline-flex;gap:8px;align-items:center;max-width:100%;flex-wrap:wrap}

/* ---------- controles ---------- */
.btn,select,input{background:var(--surf);color:var(--txt);border:1px solid var(--linha2);border-radius:10px;padding:7px 14px;font:inherit;font-size:.85rem;min-height:36px;max-width:100%;min-width:0;transition:background .15s,border-color .15s,transform .1s}
input[type=search]{min-width:240px;border-radius:999px;padding-left:16px}
select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.btn{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-weight:500}
.btn:hover{background:var(--sunk);text-decoration:none}
.btn:active{transform:scale(.97);transition-duration:.05s}
.btn.primario{background:var(--txt);color:var(--bg);border-color:transparent;font-weight:600;border-radius:999px;padding:7px 18px}
.btn.primario:hover{background:var(--txt);opacity:.86}
.btn[disabled]{opacity:.5;cursor:progress}
button,.btn,select,summary,.seg button{touch-action:manipulation}
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--mut-bg);border-radius:10px}
.seg button{background:transparent;color:var(--txt2);border:0;padding:5px 14px;cursor:pointer;font:inherit;font-size:.82rem;font-weight:500;border-radius:8px;min-height:30px;transition:background .2s var(--mola),color .2s}
.seg button.on{background:var(--surf);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg button:hover:not(.on){color:var(--txt)}
.ferramentas{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin-bottom:16px}.ferramentas>*{max-width:100%}

/* ---------- abas ---------- */
.abas{grid-area:abas;display:flex;gap:2px;overflow-x:auto;margin:0 -12px;padding:0;scrollbar-width:none;min-width:0}.abas::-webkit-scrollbar{display:none}
.abas a{color:var(--txt2);padding:9px 12px 11px;white-space:nowrap;font-size:.85rem;font-weight:500;border-bottom:2px solid transparent;transition:color .15s}
.abas a:hover{color:var(--txt);text-decoration:none}
.abas a.ativa{color:var(--txt);border-bottom-color:var(--txt)}

/* ---------- avisos ---------- */
.aviso{max-width:1132px;margin:18px auto 0;padding:14px 18px;border-radius:var(--r2);background:var(--bad-bg);color:var(--bad);font-weight:500;font-size:.9rem}
.aviso.amarelo{background:var(--warn-bg);color:var(--warn)}
.aviso[hidden]{display:none}
@media (max-width:1180px){.aviso{margin-left:16px;margin-right:16px}}

/* ---------- pagina ---------- */
main{max-width:1180px;margin:0 auto;padding:0 24px 56px}
section{margin-top:64px}
.hero{padding:56px 0 8px}
.hero-rotulo{display:inline-flex;gap:8px;align-items:center;font-size:.82rem;font-weight:600;color:var(--txt2);margin:0 0 10px}
.hero-rotulo i{width:9px;height:9px;border-radius:50%;background:var(--txt3);transition:background .4s}
.hero-titulo{font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.04;letter-spacing:-.034em;font-weight:700;margin:0 0 10px}
.hero-sub{font-size:1.1rem;color:var(--txt2);margin:0;max-width:46rem;letter-spacing:-.012em}
.hero.ok .hero-rotulo i{background:var(--ok-dot)}.hero.ok .hero-rotulo{color:var(--ok)}
.hero.warn .hero-rotulo i{background:var(--warn-dot)}.hero.warn .hero-rotulo{color:var(--warn)}
.hero.bad .hero-rotulo i{background:var(--bad-dot)}.hero.bad .hero-rotulo{color:var(--bad)}
#resumo{margin-top:36px}#resumo>h2{display:none}

/* ---------- cartoes ---------- */
.grade-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:14px}
.card{background:var(--surf);border-radius:var(--r);padding:20px 22px;min-width:0;position:relative;box-shadow:var(--sombra);border:1px solid var(--linha)}
.card .rotulo{color:var(--txt2);font-size:.82rem;font-weight:500;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;letter-spacing:0}
.card .valor{font:600 2rem/1.1 var(--sans);letter-spacing:-.03em;margin:10px 0 6px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.card .unid{font-size:.9rem;color:var(--txt2);font-weight:500;letter-spacing:0}
.card .rodape-card{color:var(--txt3);font-size:.75rem;line-height:1.4}
.card[class*="saude-"] .rotulo{padding-left:16px}
.card[class*="saude-"]::before{content:"";position:absolute;left:22px;top:26px;width:7px;height:7px;border-radius:50%}
.card.saude-ok::before{background:var(--ok-dot)}.card.saude-warn::before{background:var(--warn-dot)}.card.saude-bad::before{background:var(--bad-dot)}
.card.saude-bad .valor{color:var(--bad)}.card.saude-warn .valor{color:var(--warn)}
.tt{all:unset;cursor:help;color:var(--txt3);border:1px solid var(--linha2);border-radius:50%;width:20px;height:20px;text-align:center;font-size:.7rem;line-height:18px;flex:none;box-sizing:border-box;transition:color .15s,border-color .15s}
.tt:hover,.tt:focus-visible{color:var(--azul);border-color:var(--azul)}
.tip{position:fixed;z-index:60;max-width:300px;background:var(--txt);color:var(--bg);padding:9px 12px;border-radius:10px;font-size:.8rem;line-height:1.4;pointer-events:none;box-shadow:var(--sombra-alta)}
.esqueleto{height:2rem;margin:10px 0;border-radius:8px;background:linear-gradient(90deg,var(--sunk) 25%,var(--surf2) 50%,var(--sunk) 75%);background-size:200% 100%;animation:brilho 1.6s linear infinite}
@keyframes brilho{to{background-position:-200% 0}}
.vazio,.erro{color:var(--txt2);font-size:.9rem}.erro{color:var(--bad)}
.badge{display:inline-flex;gap:5px;align-items:center;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:600;white-space:nowrap;background:var(--mut-bg)}
.b-ok{color:var(--ok);background:var(--ok-bg)}.b-warn{color:var(--warn);background:var(--warn-bg)}.b-bad{color:var(--bad);background:var(--bad-bg)}.b-mut{color:var(--txt2)}.b-info{color:var(--info);background:color-mix(in srgb,var(--info) 14%,transparent)}
.chip{font-size:.72rem;border-radius:999px;padding:2px 10px;color:var(--txt2);font-weight:500;background:var(--mut-bg);vertical-align:middle;margin-left:6px;letter-spacing:0}

/* ---------- sistemas ---------- */
.grade-sis{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.sis{display:flex;flex-direction:column;gap:14px}
.sis .rotulo{align-items:center;color:var(--txt)}
.sis h3{margin:0;font-size:1.08rem;font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
.sis .url{font:.74rem var(--mono);color:var(--txt3);margin-top:-8px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sis-bad{border-color:color-mix(in srgb,var(--bad-dot) 45%,transparent);background:linear-gradient(180deg,var(--bad-bg),transparent 55%),var(--surf)}
.sis .url:hover{color:var(--link)}
.metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);border-radius:12px;overflow:hidden}
.metricas>div{background:var(--surf2);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.metricas b{font-weight:600;font-size:1.05rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.metricas span{font-size:.72rem;color:var(--txt2)}
.sis details{border-top:1px solid var(--linha);padding-top:10px}
.sis summary{cursor:pointer;color:var(--txt2);font-size:.8rem;font-weight:500;list-style:none;display:flex;align-items:center;gap:6px;user-select:none}
.sis summary::-webkit-details-marker{display:none}
.sis summary::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .25s var(--mola)}
.sis details[open] summary::before{transform:rotate(45deg)}
.sis summary:hover{color:var(--txt)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:.82rem;margin:12px 0 0}.kv dt{color:var(--txt2)}.kv dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.sis .acoes .btn{flex:1}

/* ---------- tabelas ---------- */
.tabela-rolagem{overflow-x:auto;border-radius:var(--r);background:var(--surf);border:1px solid var(--linha);box-shadow:var(--sombra)}
table{border-collapse:collapse;width:100%;font-size:.85rem}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--linha);white-space:nowrap}
th{color:var(--txt2);font-weight:500;font-size:.75rem;background:var(--surf2);position:sticky;top:0}
td.num,th.num{text-align:right}tr:last-child td{border-bottom:0}
td.num,.valor,.kv dd{font-variant-numeric:tabular-nums}
tr.clicavel{cursor:pointer;transition:background .15s}tr.clicavel:hover td{background:var(--surf2)}

/* ---------- recursos ---------- */
.grade-rec{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.barra{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;margin:10px 0}
.barra>i{display:block;height:100%;background:var(--azul);border-radius:3px;transition:width .6s var(--mola)}
.barra.warn>i{background:var(--warn-dot)}.barra.bad>i{background:var(--bad-dot)}
.nucleos{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:4px;margin-top:10px}
.nucleos span{font:.72rem var(--mono);text-align:center;padding:4px 0;border-radius:6px;background:var(--sunk);color:var(--txt2)}

/* ---------- graficos ---------- */
.grade-graf{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.graf svg{width:100%;height:170px;display:block}
.graf h3{margin:0 0 6px;font-size:.95rem;display:flex;justify-content:space-between;gap:8px}
.graf .eixo text{fill:var(--txt3);font:10px var(--sans)}
.graf .grade line{stroke:var(--linha);stroke-width:1}
.graf .linha{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.graf .l1{stroke:var(--serie1)}.graf .l2{stroke:var(--serie2);stroke-dasharray:5 3}
.graf .mira{stroke:var(--txt3);stroke-width:1}.graf .dot{fill:var(--serie1);stroke:var(--surf);stroke-width:2}
.leg{display:flex;gap:16px;font-size:.78rem;color:var(--txt2);margin-top:6px}
.leg i{display:inline-block;width:14px;border-top:2px solid var(--serie1);vertical-align:middle;margin-right:6px}.leg i.v{border-top:2px dashed var(--serie2)}

/* ---------- alertas ---------- */
.alerta{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start;padding:18px 22px 18px 18px;border-radius:var(--r);background:var(--surf);border:1px solid var(--linha);box-shadow:var(--sombra);margin-bottom:10px;transition:box-shadow .25s,transform .25s var(--mola)}
.alerta:hover{box-shadow:var(--sombra),0 6px 22px rgba(0,0,0,.06)}
.alerta .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--warn-bg);color:var(--warn)}
.alerta.critico .ic{background:var(--bad-bg);color:var(--bad)}.alerta.resolvido .ic{background:var(--ok-bg);color:var(--ok)}
.alerta .ic svg,.vazio-bloco .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.a-corpo{display:grid;gap:7px;min-width:0}
.a-topo{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between}
.a-titulo{margin:0;font-size:1.02rem;font-weight:600;letter-spacing:-.012em;line-height:1.3}
.a-resumo{margin:0;color:var(--txt2);font-size:.92rem;line-height:1.5;max-width:68ch}
.a-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:.8rem;color:var(--txt3)}
.chip-sis{color:var(--txt);background:var(--mut-bg);border-radius:999px;padding:2px 10px;font-weight:500}
.a-det{font-size:.82rem}.a-det summary{cursor:pointer;color:var(--link);list-style:none;display:inline-flex;gap:6px;align-items:center;width:fit-content}
.a-det summary::-webkit-details-marker{display:none}
.a-det summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--mola)}
.a-det[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.a-det .kv{margin:10px 0 2px;padding:12px 14px;background:var(--surf2);border-radius:var(--r2);border:1px solid var(--linha);overflow-wrap:anywhere}
.dia{margin:26px 0 10px 4px;font-size:.85rem;font-weight:600;color:var(--txt2);letter-spacing:0}
.mais{margin:6px auto 0;display:flex}
.vazio-bloco{display:grid;justify-items:center;text-align:center;gap:6px;padding:44px 20px;border:1px dashed var(--linha2);border-radius:var(--r);background:var(--surf2)}
.vazio-bloco .ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok);margin-bottom:6px}
.vazio-bloco .ic svg{width:28px;height:28px}
.vazio-bloco strong{font-size:1.1rem;letter-spacing:-.015em}.vazio-bloco p{margin:0;color:var(--txt2);font-size:.92rem;max-width:42ch}
.seg .n{font-style:normal;font-size:.72rem;font-weight:600;min-width:18px;padding:1px 6px;margin-left:4px;border-radius:999px;background:var(--mut-bg);color:var(--txt2);display:inline-block;text-align:center}
.seg .n:empty{display:none}.seg button.on .n{background:var(--azul);color:#fff}
@media (max-width:560px){.alerta{grid-template-columns:1fr;padding:16px}.alerta .ic{width:34px;height:34px}}
.pedido{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:4px}

/* ---------- dialogo (folha) ---------- */
.dlg-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.dlg-cab h3{margin:0}
dialog{background:var(--surf);color:var(--txt);border:1px solid var(--linha);border-radius:22px;width:min(760px,94vw);max-height:90vh;padding:24px;box-shadow:var(--sombra-alta);overscroll-behavior:contain}
dialog[open]{animation:sobe .38s var(--mola)}
dialog::backdrop{background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes sobe{from{opacity:0;transform:translateY(14px) scale(.98)}}
pre.logs{background:var(--sunk);border-radius:12px;padding:14px;overflow:auto;max-height:300px;font:.74rem/1.55 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--txt)}
.rodape{max-width:1180px;margin:0 auto;padding:28px 24px 40px;color:var(--txt3);font-size:.76rem;text-align:center;border-top:1px solid var(--linha)}

/* ---------- estados ---------- */
.sem-conexao main section:not(#resumo),.sem-conexao #cards .card:not(#card-saude){opacity:.45;filter:grayscale(.7)}
:fullscreen body,body:fullscreen{overflow:auto}

/* ---------- celular ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .cabeca{position:static;grid-template-columns:1fr;grid-template-areas:"marca" "acoes" "info" "abas";padding:10px 16px 0;row-gap:8px}.faixa-dev{margin:-10px -16px 4px}
  .topo-info{justify-content:flex-start;padding-bottom:0}.logo{height:26px}
  .abas{margin:0 -8px}
  main{padding:0 16px 40px}section{margin-top:48px}.hero{padding-top:36px}
  h2{font-size:1.45rem}
  .grade-graf,.grade-sis{grid-template-columns:1fr}
  .grade-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{padding:16px}.card .valor{font-size:1.5rem}.card[class*="saude-"]::before{left:18px;top:22px}
  .topo-acoes .btn,.topo-acoes select{flex:1 1 auto}
  .tt{width:30px;height:30px;line-height:28px}
  input[type=search]{min-width:0;width:100%}
}
@media (max-width:360px){.grade-cards{grid-template-columns:1fr}}

/* ---------- movimento e transparencia reduzidos ---------- */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce){.cabeca{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}dialog::backdrop{backdrop-filter:none;background:rgba(0,0,0,.6)}}
@media (prefers-contrast:more){:root{--linha:rgba(128,128,128,.5);--linha2:rgba(128,128,128,.7)}.card,.tabela-rolagem,.alerta{box-shadow:none}}

/* ---------- seletor de aparencia (claro / escuro / automatico) ---------- */
.tema{--i:0;position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:34px;padding:3px;border-radius:999px;background:var(--mut-bg);border:1px solid var(--linha)}
.tema::before{content:"";position:absolute;top:3px;left:3px;width:34px;height:34px;border-radius:999px;background:var(--surf);box-shadow:0 1px 3px rgba(0,0,0,.2),0 0 0 .5px var(--linha2);transform:translateX(calc(var(--i)*34px));transition:transform .5s cubic-bezier(.32,.72,0,1),background .4s}
.tema button{position:relative;z-index:1;width:34px;height:34px;padding:0;border:0;background:none;border-radius:999px;color:var(--txt3);cursor:pointer;display:grid;place-items:center;transition:color .25s}
.tema button:hover{color:var(--txt)}
.tema button[aria-checked="true"]{color:var(--txt)}
.tema svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.tema button[aria-checked="true"] svg{transform:scale(1.1)}
.tema button:active svg{transform:scale(.88)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
.trocando,.trocando *,.trocando *::before,.trocando *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease,fill .4s ease,stroke .4s ease!important}
@media (prefers-reduced-motion:reduce){.tema::before,.tema svg{transition:none}::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none}}