@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Schibsted+Grotesk:wght@500;600;700;800&display=swap");
/* PIA · tema (Fase 2) — tokens + componentes de uso geral.
   Origem: docs/superpowers/prototipo-pia/v3.css (sem .proto, sem telas de demonstração, sem login).
   Ícones: <svg class="i"><use href="assets/pia-icones.svg#i-gota"/></svg> */

/* ---------- tokens ---------- */
:root{
  --g950:#001f1d; --g900:#002c29; --g850:#04332f; --g800:#0a3a36; --g700:#18403c; --g600:#335a65;
  --em:#62ad9e; --em-d:#2f7d6f; --em-l:#d6ebe5;
  --gold:#cdb67e; --gold-2:#dcc796; --gold-3:#e8d8ad; --gold-txt:#7d6630;
  --paper:#f4f7f5; --paper-2:#e9f0ed; --surface:#fff;
  --ink:#132b28; --ink-2:#3f5d58; --ink-3:#55716c; --line:#dbe6e2; --line-2:#e9f0ed; --line-in:#78948d;
  --ok:#1f7a58; --ok-bg:#e5f3ec; --warn:#94600f; --warn-bg:#fbf0d9; --crit:#b42318; --crit-bg:#fdebe9;
  --r:8px; --r-sm:6px; --r-lg:12px;
  --sh-1:0 1px 2px rgba(0,44,41,.05),0 1px 1px rgba(0,44,41,.03);
  --sh-2:0 1px 2px rgba(0,44,41,.05),0 8px 24px -14px rgba(0,44,41,.28);
  --sh-3:0 24px 60px -24px rgba(0,31,29,.45);
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.4,.64,1);
  --t1:120ms; --t2:180ms; --t3:280ms;
  --display:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:'kern' 1}
h1,h2,h3,h4{font-family:var(--display)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--gold-3);color:var(--g950)}
:focus-visible{outline:2px solid var(--em-d);outline-offset:2px;border-radius:4px}

/* ícone: traço único; tamanho padrão 18px (sobrescreva com width/height) */
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* números alinhados em coluna */
.num{font-variant-numeric:tabular-nums}

/* ---------- entrada em sequência (use --d: 0,1,2… para escalonar) ---------- */
.entra{opacity:0;transform:translateY(10px);animation:pia-entra 520ms var(--ease) forwards;animation-delay:calc(var(--d,0) * 60ms)}
@keyframes pia-entra{to{opacity:1;transform:none}}
@keyframes pia-fade{from{opacity:0}to{opacity:1}}

/* ---------- botões ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;border-radius:var(--r);border:1px solid transparent;font-weight:600;font-size:13.5px;line-height:1;text-decoration:none;white-space:nowrap;transition:background var(--t2),border-color var(--t2),box-shadow var(--t2),transform var(--t1) var(--ease),color var(--t2)}
.btn:active{transform:scale(.97)}
/* [disabled] não dispara clique sozinho, então mantém o cursor; .off (âncora) precisa bloquear o clique */
.btn[disabled],.btn.off{opacity:.55;cursor:not-allowed}
.btn[disabled]:active,.btn.off:active{transform:none}
.btn.off{pointer-events:none}
.btn-pri{background:var(--g900);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,31,29,.2)}
.btn-pri:hover{background:var(--g800)}
.btn-sec{background:#fff;border-color:var(--line-in);color:var(--ink)}
.btn-sec:hover{border-color:var(--g600);background:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--paper-2);color:var(--ink)}
.btn-lg{height:48px;width:100%;font-size:15px}
.btn .seta{transition:transform var(--t2) var(--ease)}
.btn:hover .seta{transform:translateX(3px)}
.btn .spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:pia-spin 700ms linear infinite}
.btn.busy{pointer-events:none}
.btn.busy .spin{display:block}
.btn.busy .lbl,.btn.busy .seta{display:none}
@keyframes pia-spin{to{transform:rotate(360deg)}}
.link{background:none;border:0;padding:0;color:var(--em-d);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(47,125,111,.3);transition:text-decoration-color var(--t2)}
.link:hover{text-decoration-color:currentColor}

/* ---------- campos ---------- */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
/* :where() zera a especificidade do :not(), para .campo-in conseguir sobrescrever o input interno */
.campo input:where(:not([type=checkbox]):not([type=radio])),.campo select,.campo textarea{width:100%;height:42px;border:1px solid var(--line-in);background:#fff;border-radius:var(--r);padding:0 12px;outline:0;transition:border-color var(--t2),box-shadow var(--t2)}
.campo textarea{height:auto;min-height:110px;padding:10px 12px;resize:vertical}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--ink-3)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--em-d);box-shadow:0 0 0 4px rgba(47,125,111,.13)}
.campo input:disabled,.campo select:disabled,.campo textarea:disabled{background:var(--paper-2);color:var(--ink-3);border-color:var(--line);cursor:not-allowed;box-shadow:none}
.campo input[readonly],.campo textarea[readonly]{background:var(--paper);color:var(--ink-2);border-color:var(--line)}
.campo .dica{margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.campo .erro{display:none;margin-top:6px;gap:6px;align-items:center;font-size:12.5px;color:var(--crit)}
.campo.bad input,.campo.bad select,.campo.bad textarea{border-color:var(--crit);box-shadow:0 0 0 4px rgba(180,35,24,.1)}
.campo.bad .erro{display:flex}
/* campo com ícone/ação embutida: <div class="campo"><label/><div class="campo-in"><svg class="i"/><input/></div></div> */
.campo-in{display:flex;align-items:center;gap:8px;height:46px;border:1px solid var(--line-in);background:#fff;border-radius:var(--r);padding:0 12px;transition:border-color var(--t2),box-shadow var(--t2)}
.campo-in:hover{border-color:var(--ink-3)}
.campo-in:focus-within{border-color:var(--em-d);box-shadow:0 0 0 4px rgba(47,125,111,.13)}
.campo .campo-in input,.campo .campo-in input:hover,.campo .campo-in input:focus,.campo .campo-in input:disabled,.campo.bad .campo-in input{border:0;box-shadow:none;outline:0;background:transparent;flex:1;height:100%;min-width:0;padding:0}
.campo .campo-in input:disabled{cursor:not-allowed;color:var(--ink-3)}
.campo-in:has(input:disabled){background:var(--paper-2);border-color:var(--line);cursor:not-allowed}
.campo-in:has(input[readonly]){background:var(--paper);border-color:var(--line)}
.campo-in>svg.i{color:var(--ink-3);transition:color var(--t2)}
.campo-in:focus-within>svg.i{color:var(--em-d)}
.campo-in button{background:none;border:0;color:var(--ink-3);padding:6px;display:grid;border-radius:6px}
.campo-in button:hover{background:var(--paper-2);color:var(--ink)}
.campo.bad .campo-in{border-color:var(--crit);box-shadow:0 0 0 4px rgba(180,35,24,.1)}
.chk{display:flex;gap:8px;align-items:center;color:var(--ink-2)}
.chk input{accent-color:var(--g900);width:16px;height:16px}

/* ---------- painéis ---------- */
.painel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.painel-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.painel-h h3{margin:0;font-size:15px;font-weight:700;color:var(--g900);letter-spacing:-.005em}
.painel-h .dir{margin-left:auto;display:flex;gap:8px;align-items:center}
.painel-c{padding:16px 18px}
.barra-f{display:flex;gap:8px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;margin-bottom:18px;box-shadow:var(--sh-1);overflow:hidden}
.kpi{position:relative;padding:16px 18px;border-right:1px solid var(--line-2)}
.kpi:last-child{border:0}
.kpi .l{font-size:12px;color:var(--ink-3);font-weight:500}
.kpi .v{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--g900);margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .v small{font-size:13px;color:var(--ink-3);font-weight:500;margin-left:4px}
.kpi .s{font-size:12px;color:var(--ink-3)}
.kpi.crit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--crit)}
.kpi.crit .v{color:var(--crit)}

/* ---------- abas ---------- */
.abas{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.abas button,.abas a{flex:none;display:inline-flex;align-items:center;height:42px;padding:0 14px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--ink-3);font-weight:600;font-size:13.5px;text-decoration:none;transition:color var(--t2),border-color var(--t2)}
.abas button:hover,.abas a:hover{color:var(--ink)}
.abas [aria-selected=true],.abas [aria-current=page]{color:var(--g900);border-bottom-color:var(--g900)}

/* ---------- tabela densa ---------- */
.tabela-w{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.tabela th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:10px 18px;background:#fbfcfc;border-bottom:1px solid var(--line);white-space:nowrap}
.tabela td{padding:0 18px;height:44px;border-bottom:1px solid var(--line-2);white-space:nowrap;transition:background var(--t1)}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:hover td{background:#f6faf8}
.tabela tr.clic{cursor:pointer}
.tabela .r{text-align:right;font-variant-numeric:tabular-nums}
.tabela .c{text-align:center}
.tabela tr.crit td{color:var(--crit);font-weight:600}
.tabela-rod{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;color:var(--ink-3);font-size:12.5px}

/* ---------- selos ---------- */
.selo{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;line-height:18px;background:var(--paper-2);color:var(--ink-2)}
.selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.selo.ok{background:var(--ok-bg);color:var(--ok)}
.selo.alerta{background:var(--warn-bg);color:var(--warn)}
.selo.crit{background:var(--crit-bg);color:var(--crit)}
.selo.mut::before{display:none}

/* ---------- estado vazio ---------- */
.vazio{padding:44px 16px;text-align:center;color:var(--ink-3)}
.vazio svg.i{width:34px;height:34px;color:#a9c0b9;margin-bottom:8px}
.vazio h3{margin:0 0 4px;font-size:16px;color:var(--g900)}
.vazio p{margin:0 auto;max-width:380px}

/* ---------- avisos ---------- */
.aviso{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:var(--paper-2);color:var(--ink-2);font-size:13px;margin-bottom:18px}
.aviso.ok{background:var(--ok-bg);color:var(--ok)}
.aviso.alerta{background:var(--warn-bg);color:var(--warn)}
.aviso.err{background:var(--crit-bg);color:var(--crit)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:22px;left:50%;z-index:90;display:flex;gap:10px;align-items:center;background:var(--g950);color:#fff;padding:11px 16px 13px;border-radius:10px;font-size:13px;box-shadow:var(--sh-3);transform:translate(-50%,24px);opacity:0;transition:transform 360ms var(--spring),opacity var(--t2);overflow:hidden;pointer-events:none}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast svg.i{color:var(--gold)}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.toast.on::after{animation:pia-toast-barra 2.6s linear forwards}
@keyframes pia-toast-barra{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- paleta de comandos (Ctrl+K) ---------- */
.paleta{position:fixed;inset:0;z-index:80;display:none;place-items:start center;padding-top:13vh;background:rgba(0,31,29,.38);backdrop-filter:blur(2px)}
.paleta.on{display:grid;animation:pia-fade var(--t2)}
.paleta .caixa{width:min(580px,92vw);background:#fff;border-radius:14px;box-shadow:var(--sh-3);overflow:hidden;animation:pia-paleta-in 240ms var(--spring)}
@keyframes pia-paleta-in{from{transform:translateY(-8px) scale(.97);opacity:0}}
.paleta .q{display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid var(--line);color:var(--ink-3)}
.paleta input{flex:1;height:54px;border:0;font-size:15px;outline:0;color:var(--ink);background:transparent}
.paleta .grp{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:10px 14px 4px}
.paleta ul{list-style:none;margin:0;padding:0 6px 6px}
.paleta li button,.paleta li a{width:100%;display:flex;gap:12px;align-items:center;padding:10px 12px;border:0;background:transparent;border-radius:8px;text-align:left;color:inherit;text-decoration:none;transition:background var(--t1)}
.paleta li .on,.paleta li button:hover,.paleta li a:hover{background:var(--paper-2)}
.paleta li small{margin-left:auto;color:var(--ink-3);font-size:11px}
.paleta .rod{display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--ink-3);background:#fbfcfc}

/* ---------- esqueleto de carregamento ---------- */
.esq{height:12px;border-radius:4px;background:linear-gradient(90deg,#e7eeeb 0%,#f4f8f6 50%,#e7eeeb 100%);background-size:200% 100%;animation:pia-esq 1.1s linear infinite;margin:14px 18px}
@keyframes pia-esq{to{background-position:-200% 0}}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(2){border-right:0}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
}

/* ---------- movimento reduzido: nada anima, tudo continua legível ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .esq{animation:none}
  .btn:active{transform:none}
  .btn.busy .spin{display:none}
  .btn.busy .lbl{display:inline;opacity:.6}
}