/*
  Sistema de design compartilhado pelas telas.
  Um arquivo so para as paginas nao sairem do lugar quando uma muda.
*/

:root{
  /* Neutros com leve vies azulado - cinza puro parece "sem escolha" */
  --bg:#F5F6FA;
  --bg-2:#EEF0F7;
  --surface:#FFFFFF;
  --surface-2:#F2F4F9;
  --surface-3:#E6E9F2;
  --text:#12151F;
  --text-2:#535C71;
  --text-3:#8A92A6;
  --line:#E3E7F0;
  --line-2:#CBD2E1;

  /* Principal: indigo profundo, com um violeta para dar volume nos gradientes */
  --prim:#4739C4;
  --prim-2:#6B5CE7;
  --prim-3:#8B7BF5;
  --prim-soft:#EEEBFD;
  --prim-line:#C8C0F7;
  --on-prim:#FFFFFF;

  /* Semanticas */
  --ok:#08795A;      --ok-soft:#DFF5EC;   --ok-line:#95DDC4;
  --warn:#8A5D00;    --warn-soft:#FDF0D9; --warn-line:#F0CB86;
  --bad:#BC2E32;     --bad-soft:#FCE9EA;  --bad-line:#F2B0B3;
  --zap:#0B7A47;     --zap-soft:#E1F4EA;  --zap-line:#96D8B4;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;
  --sh-1:0 1px 2px rgba(18,21,31,.05), 0 1px 3px rgba(18,21,31,.04);
  --sh-2:0 2px 6px rgba(18,21,31,.07), 0 6px 16px rgba(18,21,31,.06);
  --sh-3:0 8px 20px rgba(18,21,31,.10), 0 20px 44px rgba(18,21,31,.12);
  --sh-prim:0 4px 14px rgba(71,57,196,.25);
  --sans:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

/*
  Tres estados de tema, nao dois: "claro", "escuro" e o padrao (segue o
  sistema). O seletor da media query ignora quem escolheu claro na mao, e o
  bloco [data-tema="escuro"] vence em qualquer situacao.
*/
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --bg:#171A24;
    --bg-2:#1C202B;
    --surface:#212632;
    --surface-2:#282E3C;
    --surface-3:#333A4A;
    --text:#ECEEF5;
    --text-2:#A0A8BD;
    --text-3:#868FA6;
    --line:#333A49;
    --line-2:#454E63;

    --prim:#8E82F5;
    --prim-2:#A99EF9;
    --prim-3:#BDB4FB;
    --prim-soft:#1F1B3D;
    --prim-line:#3B3475;
    --on-prim:#0E0B22;

    --ok:#45CE9B;     --ok-soft:#082C1F;   --ok-line:#155943;
    --warn:#E2B75F;   --warn-soft:#2B2211; --warn-line:#5C4820;
    --bad:#F0898D;    --bad-soft:#2D1418;  --bad-line:#5E272C;
    --zap:#45CB8C;    --zap-soft:#08291A;  --zap-line:#175639;

    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 2px 8px rgba(0,0,0,.45);
    --sh-3:0 10px 34px rgba(0,0,0,.6);
    --sh-prim:0 4px 16px rgba(110,95,240,.35);
  }
}

:root[data-tema="escuro"]{
    --bg:#171A24;
    --bg-2:#1C202B;
    --surface:#212632;
    --surface-2:#282E3C;
    --surface-3:#333A4A;
    --text:#ECEEF5;
    --text-2:#A0A8BD;
    --text-3:#868FA6;
    --line:#333A49;
    --line-2:#454E63;

    --prim:#8E82F5;
    --prim-2:#A99EF9;
    --prim-3:#BDB4FB;
    --prim-soft:#1F1B3D;
    --prim-line:#3B3475;
    --on-prim:#0E0B22;

    --ok:#45CE9B;     --ok-soft:#082C1F;   --ok-line:#155943;
    --warn:#E2B75F;   --warn-soft:#2B2211; --warn-line:#5C4820;
    --bad:#F0898D;    --bad-soft:#2D1418;  --bad-line:#5E272C;
    --zap:#45CB8C;    --zap-soft:#08291A;  --zap-line:#175639;

    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 2px 8px rgba(0,0,0,.45);
    --sh-3:0 10px 34px rgba(0,0,0,.6);
    --sh-prim:0 4px 16px rgba(110,95,240,.35);
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text);
  background:var(--bg);
  /* Brilho sutil no topo: tira o "fundo chapado" sem virar decoracao. */
  background-image:radial-gradient(1100px 380px at 50% -160px,
    color-mix(in srgb, var(--prim) 9%, transparent), transparent 70%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  font:400 15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* --- Cabecalho ------------------------------------------------------------ */
.topo{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
  padding:0 26px; position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:22px; min-height:64px; flex-wrap:wrap;
}
.marca{display:flex; align-items:center; gap:11px; font-weight:700; font-size:16px;
  letter-spacing:-.02em; padding:13px 0}
.marca .logo{
  width:32px; height:32px; border-radius:10px; flex:none;
  background:linear-gradient(140deg,var(--prim) 0%,var(--prim-2) 55%,var(--prim-3) 100%);
  display:grid; place-items:center; color:#fff; font-size:15px; font-weight:800;
  box-shadow:var(--sh-prim);
}
.abas{display:flex; gap:3px; align-items:center}
.aba{
  font-size:14px; font-weight:550; color:var(--text-2); text-decoration:none;
  padding:8px 15px; border-radius:var(--r-full);
  transition:background .18s, color .18s;
}
.aba:hover{background:var(--surface-2); color:var(--text)}
.aba.on{
  background:linear-gradient(140deg,var(--prim) 0%,var(--prim-2) 100%);
  color:var(--on-prim); font-weight:600; box-shadow:var(--sh-prim);
}
.cresce{flex:1}
.bt-tema{
  width:36px; height:36px; flex:none; margin-left:auto; cursor:pointer;
  font-size:15px; line-height:1; border-radius:var(--r-full);
  background:var(--surface-2); color:var(--text-2);
  border:1px solid var(--line); transition:all .18s;
}
.bt-tema:hover{background:var(--prim-soft); color:var(--prim);
  border-color:var(--prim-line); transform:rotate(-15deg)}

/* --- Formularios ---------------------------------------------------------- */
input,select,textarea{
  font:inherit; font-size:14px; color:var(--text); background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:0 13px; height:42px; width:100%;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
textarea{height:auto; padding:11px 13px; line-height:1.55; resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:hover,select:hover,textarea:hover{border-color:var(--text-3)}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--prim);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--prim) 16%, transparent);
}
select{cursor:pointer; appearance:none; padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
label.rot{display:block; font-size:11.5px; font-weight:650; color:var(--text-2);
  margin-bottom:6px; letter-spacing:.03em; text-transform:uppercase}

/* --- Botoes --------------------------------------------------------------- */
.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font:inherit; font-size:14px; font-weight:600; height:42px; padding:0 21px;
  border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer;
  white-space:nowrap; letter-spacing:-.01em;
  transition:transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .18s, filter .18s;
  background:linear-gradient(140deg,var(--prim) 0%,var(--prim-2) 100%);
  color:var(--on-prim); box-shadow:var(--sh-prim);
}
.bt:hover{transform:translateY(-1px); filter:saturate(115%)}
.bt:active{transform:translateY(0)}
.bt:disabled{opacity:.5; cursor:not-allowed; box-shadow:none; transform:none}
.bt.sec{background:var(--surface); color:var(--text); border-color:var(--line-2);
  box-shadow:var(--sh-1)}
.bt.sec:hover{background:var(--surface-2); border-color:var(--prim-line)}
.bt.fantasma{background:transparent; color:var(--text-2); box-shadow:none}
.bt.fantasma:hover{background:var(--surface-2); color:var(--text)}
.bt.peq{height:34px; padding:0 14px; font-size:13px}
.bt.mini{height:28px; padding:0 10px; font-size:12px; font-weight:600}
.bt.perigo{background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line);
  box-shadow:none}
.bt.perigo:hover{background:var(--bad); color:#fff}

/* --- Superficies ---------------------------------------------------------- */
.painel{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2)}
.chip{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:550;
  padding:8px 15px; border-radius:var(--r-full); cursor:pointer; user-select:none;
  background:var(--surface); border:1px solid var(--line-2); color:var(--text-2);
  transition:all .18s;
}
.chip:hover{border-color:var(--prim-line); color:var(--text); transform:translateY(-1px)}
.chip.on{
  background:linear-gradient(140deg,var(--prim) 0%,var(--prim-2) 100%);
  border-color:transparent; color:var(--on-prim); font-weight:600;
  box-shadow:var(--sh-prim);
}
.chip.on::before{content:"✓"; font-size:11px; font-weight:800}

.selo{
  display:inline-flex; align-items:center; font-size:10.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:4px 10px;
  border-radius:var(--r-full); border:1px solid transparent; white-space:nowrap;
}
.selo.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line)}
.selo.neutro{background:var(--surface-2); color:var(--text-2); border-color:var(--line-2)}
.selo.aviso{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line)}
.selo.ruim{background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line)}

/* --- Metricas ------------------------------------------------------------- */
.metricas{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px}
.metrica{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--sh-1); position:relative; overflow:hidden;
  transition:transform .18s, box-shadow .18s;
}
.metrica:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.metrica::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--prim),var(--prim-2));
}
.metrica.v::before{background:linear-gradient(180deg,var(--ok),var(--ok))}
.metrica.a::before{background:linear-gradient(180deg,var(--warn),var(--warn))}
.metrica.r::before{background:linear-gradient(180deg,var(--bad),var(--bad))}
.metrica .rot{font-size:11.5px; color:var(--text-2); font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; margin-bottom:5px}
.metrica .num{font-size:27px; font-weight:750; letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums}

/* --- Tabela --------------------------------------------------------------- */
.tabela-wrap{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-2); overflow:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
thead th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3); padding:13px 15px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:2; white-space:nowrap;
}
tbody td{padding:12px 15px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .14s}
tbody tr:hover{background:var(--prim-soft)}
.mono{font-family:var(--mono); font-size:12.5px; color:var(--text-2)}

/* --- Avatar --------------------------------------------------------------- */
.avatar{
  width:24px; height:24px; border-radius:50%; flex:none; display:grid;
  place-items:center; font-size:10px; font-weight:750; color:#fff;
  background:linear-gradient(140deg,var(--prim) 0%,var(--prim-2) 100%);
  letter-spacing:.02em;
}

/* --- Modal ---------------------------------------------------------------- */
.modal{
  position:fixed; inset:0; background:rgba(10,12,20,.6); backdrop-filter:blur(5px);
  display:none; align-items:center; justify-content:center; padding:20px; z-index:60;
}
.modal.on{display:flex; animation:aparecer .18s ease-out}
.modal-box{
  background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-3);
  width:100%; max-width:660px; max-height:88vh; overflow-y:auto; padding:28px;
  border:1px solid var(--line); animation:subir .22s cubic-bezier(.2,.8,.3,1);
}
.modal-box h3{margin:0 0 4px; font-size:20px; font-weight:700; letter-spacing:-.02em}
@keyframes aparecer{from{opacity:0} to{opacity:1}}
@keyframes subir{from{opacity:0; transform:translateY(12px) scale(.985)}
                 to{opacity:1; transform:none}}

/* --- Utilitarios ---------------------------------------------------------- */
.linha{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.g2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.campo{margin-bottom:14px}
.aviso{padding:14px 17px; border-radius:var(--r); font-size:14px;
  border:1px solid transparent}
.aviso.erro{background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line)}
.aviso.info{background:var(--prim-soft); color:var(--prim); border-color:var(--prim-line)}
.dica{font-size:12.5px; color:var(--text-3)}
.vazio{padding:60px 26px; text-align:center; color:var(--text-2)}
.vazio .ic{font-size:38px; margin-bottom:12px; opacity:.4}

@keyframes girar{to{transform:rotate(360deg)}}
.girando{
  width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:girar .7s linear infinite; display:inline-block;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}