/* radar-pracas · app.css · só tokens (var(--…)), nunca hex */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:400 var(--text-base)/var(--leading-base) var(--font-sans);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;min-height:100vh}
img,svg{max-width:100%}
a{color:var(--color-accent-2)}
:root[data-tema="claro"] a{color:var(--color-accent)}
h1,h2,h3{margin:0;color:var(--color-text)}
h1{font-size:var(--text-h1);line-height:1.04;font-weight:300;letter-spacing:-.025em;text-wrap:balance}
.h2,h2{font-size:var(--text-h2);line-height:1.14;font-weight:300;letter-spacing:-.02em}
.h3,h3{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:700}
h1 em,h2 em,.em{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:1.02em;color:var(--color-accent-2)}
:root[data-tema="claro"] h1 em,:root[data-tema="claro"] h2 em,:root[data-tema="claro"] .em{color:var(--color-accent)}
p{margin:0}
.cont{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter)}
.centro{text-align:center}
.lead{color:var(--color-text-muted);font-size:var(--text-md);line-height:var(--leading-md);max-width:640px}
.lead.centro{margin:0 auto}
.mut{color:var(--color-text-muted)} .pequeno{font-size:var(--text-sm);line-height:var(--leading-sm)}
.acento{color:var(--color-accent-2);font-weight:700} :root[data-tema="claro"] .acento{color:var(--color-accent)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:12px;top:-60px;background:var(--color-accent);color:var(--color-on-accent);padding:8px 14px;border-radius:var(--radius-sm);z-index:60;font-weight:800;text-decoration:none}
.pular:focus{top:12px}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
.linha{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.entre{justify-content:space-between}
.inline{display:inline}
.divisor{height:1px;background:var(--color-border);margin:var(--space-5) 0}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:700 var(--text-xs)/var(--leading-xs) var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-2)}
:root[data-tema="claro"] .eyebrow{color:var(--color-accent)}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.eyebrow.sem-traco::before{display:none}
.f{display:block;font:700 var(--text-xs)/var(--leading-xs) var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:6px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 28px;border-radius:var(--radius-md);font:700 15px/1 var(--font-sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background var(--motion-base) var(--ease),border-color var(--motion-base),color var(--motion-base),transform var(--motion-fast);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-accent);color:var(--color-on-accent);border-color:var(--color-accent)}
.btn-primary:hover{background:var(--color-accent-2);border-color:var(--color-accent-2)}
.btn-secondary{background:transparent;color:var(--color-accent-2);border-color:var(--color-accent)}
:root[data-tema="claro"] .btn-secondary{color:var(--color-accent)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-accent) 12%,transparent)}
.btn-ghost{background:transparent;color:var(--color-text);border-color:var(--color-border-strong)}
.btn-ghost:hover{border-color:var(--color-text-faint)}
.btn-link{background:none;border:0;color:var(--color-accent-2);height:auto;padding:0;font-weight:600;text-decoration:underline;text-underline-offset:3px}
:root[data-tema="claro"] .btn-link{color:var(--color-accent)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-sm{height:36px;padding:0 16px;font-size:14px} .btn-lg{height:52px;padding:0 36px;font-size:16px;width:100%}
.btn[aria-busy="true"]::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* badges, notas */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--radius-pill);font:700 11px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-investir,.cor-investir{color:var(--color-faixa-investir)} .badge-testar,.cor-testar{color:var(--color-faixa-testar)} .badge-evitar,.cor-evitar{color:var(--color-faixa-evitar)}
.badge-warn{color:var(--color-warning)}
.nota{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 6px;border-radius:6px;font-weight:700;color:var(--color-on-faixa);font-size:13px}
.nota-investir{background:var(--color-faixa-investir)} .nota-testar{background:var(--color-faixa-testar)} .nota-evitar{background:var(--color-faixa-evitar)}
.nota-sem{background:var(--color-surface-2);color:var(--color-text-muted)}

/* cards, campos */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:border-color var(--motion-base),box-shadow var(--motion-base)}
.card:hover{border-color:var(--color-border-strong)}
.card.ind{padding:var(--space-5)}
.stat{font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:600;letter-spacing:-.01em}
.lbl{font:700 var(--text-xs)/var(--leading-xs) var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin-top:8px}
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.select,.input{height:44px;width:100%;border:1px solid var(--color-border-input);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:500 15px var(--font-sans);padding:0 14px}
.select-sm{height:36px;width:auto;font-size:14px}
.select:focus-visible,.input:focus-visible{border-color:var(--color-accent)}
.input-codigo{font:700 28px/1 var(--font-mono);letter-spacing:.4em;text-align:center;height:60px}
.seg{display:inline-flex;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:3px;height:40px}
.seg button,.seg a{border:0;background:transparent;color:var(--color-text);font:600 14px var(--font-sans);padding:0 14px;border-radius:7px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.seg [aria-selected="true"],.seg [aria-checked="true"]{background:var(--color-accent);color:var(--color-on-accent)}
.seg.abas{width:100%;margin-top:var(--space-5)} .seg.abas button{flex:1;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--color-border-strong);background:transparent;color:var(--color-text);font:600 14px var(--font-sans);cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--color-accent);color:var(--color-accent-2)}
.chip[aria-pressed="true"]::before{content:"✓"}
:root[data-tema="claro"] .chip[aria-pressed="true"]{color:var(--color-accent)}
.slider{width:100%;accent-color:var(--color-accent)}
.aviso{border:1px solid;border-radius:var(--radius-md);padding:var(--space-4);font-size:var(--text-sm);line-height:22px;margin-top:var(--space-4)}
.aviso-ok{border-color:var(--color-success);background:color-mix(in srgb,var(--color-success) 10%,transparent)}
.aviso-warn{border-color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 10%,transparent)}
.aviso-neutro{border-color:var(--color-border-strong);background:var(--color-surface-2)}
.erro{color:var(--color-danger);font-size:var(--text-sm);font-weight:600}
.vazio{padding:var(--space-6);text-align:center;color:var(--color-text-muted);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md)}
.skeleton{height:14px;border-radius:6px;background:var(--color-surface-2);animation:pulsa 1.2s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.5}}
.tabela{border-collapse:collapse;width:100%;font-size:var(--text-sm)}
.tabela th{text-align:left;font:700 var(--text-xs)/var(--leading-xs) var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);padding:10px 10px;border-bottom:1px solid var(--color-border);white-space:nowrap}
.tabela td{padding:10px;border-bottom:1px solid var(--color-border);vertical-align:middle}
.tabela tbody tr[tabindex]:hover,.tabela tbody tr[tabindex]:focus-visible{background:var(--color-surface-2);cursor:pointer}
.tabela-rolagem{overflow-x:auto;margin:var(--space-3) 0}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--color-surface-2);border:1px solid var(--color-border-strong);color:var(--color-text);padding:12px 18px;border-radius:var(--radius-md);box-shadow:var(--shadow-pop);z-index:70;max-width:90vw}
.tema-btn{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text);cursor:pointer;display:grid;place-items:center;z-index:60}
details.como{margin-top:var(--space-5)} details.como summary{cursor:pointer;font-weight:600;color:var(--color-text-muted)}

/* marca */
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-text)}
.marca-simbolo{width:22px;height:22px;border-radius:50%;border:2px solid var(--color-accent);position:relative}
.marca-simbolo::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--color-accent)}
.marca-nome{font:800 15px var(--font-sans);letter-spacing:.14em;text-transform:uppercase}

/* login */
.pagina-login{display:grid;place-items:center;padding:var(--space-8) var(--gutter-sm)}
.login-caixa{width:100%;max-width:440px;margin:0 auto}
.card.login{display:grid;gap:var(--space-4);justify-items:center;text-align:center;min-width:0;overflow-wrap:anywhere}
.card.login .form{min-width:0;max-width:100%}
.card.login .btn-link{white-space:normal}
.card.login .form{display:grid;gap:var(--space-3);width:100%;text-align:left}
.card.login .form .h3{text-align:left}

/* cabeçalho do app */
.app-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
.app-header-in{height:var(--app-header-h);display:flex;align-items:center;gap:var(--space-5)}
.estado-base{white-space:nowrap;font-size:var(--text-sm);color:var(--color-text-muted);display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--color-border);border-radius:var(--radius-pill)}
.ponto{width:8px;height:8px;border-radius:50%;display:inline-block} .ponto-ok{background:var(--color-success)} .ponto-warn{background:var(--color-warning)}
.app-nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm)}
.faixa-parcial{background:color-mix(in srgb,var(--color-warning) 14%,transparent);border-bottom:1px solid var(--color-warning);text-align:center;font-size:var(--text-sm);padding:8px var(--gutter)}

/* painel */
.app-hero{padding:var(--space-10) 0 var(--space-8)}
.app-hero h1{margin:var(--space-4) auto}
.busca{position:relative;display:flex;align-items:center;gap:12px;height:52px;border:1px solid var(--color-border-input);border-radius:var(--radius-md);background:var(--color-surface);padding:0 16px;max-width:620px;margin:var(--space-6) auto var(--space-2);text-align:left}
.busca input{flex:1;border:0;background:transparent;color:var(--color-text);font:500 16px var(--font-sans);outline:none;min-width:0}
.busca svg{color:var(--color-text-faint);flex:none}
.busca-lista{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);z-index:40;max-height:320px;overflow:auto}
.busca-lista li{padding:10px 12px;border-radius:7px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.busca-lista li[aria-selected="true"],.busca-lista li:hover{background:var(--color-surface-2)}
.busca-pequena{height:44px;margin:0;max-width:320px}
.app-grade{display:grid;grid-template-columns:var(--app-grid, minmax(0,1.45fr) minmax(320px,1fr));gap:var(--app-gap);padding-top:var(--space-7);padding-bottom:var(--space-11)}
.coluna{display:grid;gap:var(--app-gap);align-content:start}
.filtros{display:grid;gap:var(--space-4)}
.grade-filtros{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5) var(--space-6)}
.radar{aspect-ratio:1/1;width:100%;border-radius:var(--radius-lg);background:var(--color-bg-deep);border:1px solid var(--color-border);margin-top:var(--space-4);position:relative;overflow:hidden}
.radar svg{display:block;width:100%;height:100%}
.radar circle.comarca{cursor:pointer;opacity:.85;transition:opacity var(--motion-base)}
.radar circle.comarca:hover,.radar circle.comarca:focus{opacity:1;stroke:var(--color-text);stroke-width:1.5}
.radar circle.dl{fill-opacity:.25;stroke-dasharray:3 3;stroke-width:1.5}
.radar text{font:600 10px var(--font-sans);fill:var(--color-text-faint);pointer-events:none}
.radar .grade{stroke:var(--color-border);fill:none}
.legenda{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:var(--space-3)}
.tooltip{position:absolute;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:8px 10px;font-size:var(--text-sm);pointer-events:none;box-shadow:var(--shadow-pop);z-index:30}
.radar-caixa{position:relative}
.resumo-faixas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:var(--space-4) 0}
.resumo-faixas div{background:var(--color-surface-2);border-radius:var(--radius-md);padding:10px;text-align:center;display:grid}
.resumo-faixas b{font-size:22px;line-height:1.1} .resumo-faixas span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.lista-pracas{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:8px}
.lista-pracas li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--color-border)}
.ranking-caixa .tabela td:first-child{color:var(--color-text-faint)}

/* ficha */
.ficha{padding:var(--space-7) var(--gutter) var(--space-11)}
.migalha{margin-bottom:var(--space-4);font-size:var(--text-sm)}
.ficha-cabeca{display:flex;justify-content:space-between;gap:var(--space-6);align-items:flex-start;margin-top:var(--space-4)}
.nome-praca{font-size:clamp(32px,4vw,48px);line-height:1;font-weight:300;letter-spacing:-.02em}
.serifa{font-size:22px;margin-top:4px}
.ficha-cabeca form{margin-top:var(--space-4)}
.anel{position:relative;width:112px;height:112px;display:grid;place-items:center;flex:none}
.anel svg{position:absolute;inset:0;transform:rotate(-90deg)}
.anel-centro{text-align:center} .anel .n{font:700 34px/1 var(--font-sans);letter-spacing:-.02em} .anel .t{font:700 10px var(--font-sans);letter-spacing:.14em;color:var(--color-text-muted)}
.indicadores{margin-top:var(--space-5)}
.card.ind.tempo{margin-top:var(--space-4);display:flex;gap:var(--space-5);align-items:center}
.comparativa th a{color:inherit}

@media (max-width:1024px){.app-grade{grid-template-columns:1fr}.grade-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.estado-base{display:none}.app-nav .email{display:none}}
@media (max-width:640px){.cont{padding:0 var(--gutter-sm)}.grade-filtros{grid-template-columns:1fr}.grade-3{grid-template-columns:1fr}.ficha-cabeca{flex-direction:column}.resumo-faixas{grid-template-columns:repeat(2,1fr)}.app-hero{padding:var(--space-7) 0 var(--space-6)}.btn-lg{padding:0 16px}.ficha{padding-left:var(--gutter-sm);padding-right:var(--gutter-sm)}.card{padding:var(--space-4)}}
/* celular: nada vaza */
.app-grade>*,.coluna,.card{min-width:0}
@media (max-width:640px){
  .app-header-in{flex-wrap:wrap;height:auto;padding:8px 0;gap:8px}
  .app-nav{margin-left:0;width:100%;justify-content:space-between;gap:8px}
  .seg{flex-wrap:wrap;height:auto}
  .tabela{display:block;overflow-x:auto;white-space:nowrap}
  .tabela-rolagem .tabela{display:table;white-space:normal}
  .ficha-cabeca form .select-sm{width:100%}
}