/* =====================================================================
   PLATAFORMA EBB — design system
   Identidade: manual "ebb identidade visual vol.3"
   DM Sans + STIX Two Text · amarelo #ffd900 como assinatura · marinho
   #051757 como ênfase · laranja #ff6600 como acento · formas geométricas
   chapadas no lugar de ornamento.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&family=STIX+Two+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap");

:root{
  /* ---- paleta oficial do manual ---- */
  --amarelo:#ffd900;      /* potência e otimismo — a assinatura */
  --amarelo-claro:#fff5c4;
  --laranja:#ff6600;      /* segundo acento */
  --pessego:#ffd1b2;
  --marinho:#051757;      /* profundidade — é a cor da ênfase e do texto forte */
  --azul:#8fbafa;
  --rosa:#f5c2f7;
  --oliva:#d6dbb5;
  --papel:#fafaf0;        /* off-white do manual */
  --preto:#1a1a1a;

  /* ---- papéis na interface ----
     Amarelo puro não passa em contraste como texto: ele é sempre PREENCHIMENTO,
     com tinta preta por cima. A ênfase escrita fica com o marinho. */
  --amber:var(--amarelo); --amber-soft:#ffe98a;
  --amber-wash:var(--amarelo-claro); --amber-deep:var(--marinho);
  --graphite:#57595B;
  --green:#0B7A2A; --green-wash:#E6F4EA;
  --ink:var(--preto); --paper:var(--papel); --card:#FFFFFF;
  --body:#3C3C3A; --muted:#7C7A72; --line:#E5E2D2; --line-soft:#EFEDE0;
  --danger:#B3341F; --danger-wash:#FCECE8;
  --info:var(--marinho); --info-wash:#E8ECF6;
  --chip:#F1EFE1;
  --ok:#0B7A2A;

  /* escala */
  --r:16px; --r-sm:10px; --r-lg:24px;
  --sh:0 1px 2px rgba(26,26,26,.05), 0 8px 24px rgba(26,26,26,.06);
  --sh-lg:0 4px 12px rgba(26,26,26,.08), 0 24px 64px rgba(26,26,26,.14);
  --nav-h:60px;
}

/* A serifa entra só onde o manual usa: uma palavra em itálico dentro de uma
   frase sem serifa. Nunca como corpo de texto. */
.serif{font-family:"STIX Two Text",Georgia,serif}
em.marca,.italico{font-family:"STIX Two Text",Georgia,serif; font-style:italic; font-weight:600}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--body);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{color:var(--ink); margin:0; text-wrap:balance; font-weight:700; letter-spacing:-.01em}
h1{font-size:28px; line-height:1.18}
h2{font-size:21px; line-height:1.24}
h3{font-size:17px}
h4{font-size:15px}
p{margin:0}
a{color:var(--ink)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--marinho); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}

.mono{font-family:"DM Mono",ui-monospace,SFMono-Regular,monospace}
.eyebrow{font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
.center{text-align:center}
.row{display:flex; align-items:center; gap:10px}
.row.wrap{flex-wrap:wrap}
.spread{display:flex; align-items:center; justify-content:space-between; gap:16px}
.grow{flex:1; min-width:0}
.stack{display:flex; flex-direction:column}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}

/* ------------------------------------------------------ marca e elemento */
.chev,.marca{display:inline-flex; align-items:center; flex:none}
.chev svg,.marca svg{display:block}
.marca{color:var(--ink)}
.brand{gap:12px}
.brand>span{border-left:1.5px solid var(--line); padding-left:12px; line-height:1.15}
.brand small{letter-spacing:.1em}

/* ------------------------------------------------------------- megamenu */
.topbar{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:6px; padding:0 18px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); text-decoration:none; padding-right:10px}
.brand small{display:block; font-family:"DM Mono",monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:400}
.nav{display:flex; align-items:center; gap:2px; height:100%}
.navbtn{
  display:flex; align-items:center; gap:7px; height:38px; padding:0 13px;
  background:none; border:0; border-radius:9px; cursor:pointer;
  font-size:14px; font-weight:500; color:var(--body); white-space:nowrap;
}
.navbtn:hover{background:var(--chip); color:var(--ink)}
.navbtn.on{background:var(--amber-wash); color:var(--ink); font-weight:700}
.navbtn .caret{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.5}
/* fixed, não absolute: a barra é sticky, então o painel tem de acompanhar a
   viewport. Com absolute ele abria a 60px do topo do DOCUMENTO e sumia acima
   da tela assim que a página estivesse rolada. */
.mega{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:59;
  background:var(--card); border-bottom:1px solid var(--line); box-shadow:var(--sh-lg);
  padding:26px 26px 30px;
  max-height:calc(100vh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain;
  animation:megaIn .14s ease-out;
}
@keyframes megaIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
/* auto-fit em vez de 4 fixas: grupos com 5 colunas (Clientes, Diagnósticos,
   Administração) cabiam em duas linhas e empurravam metade do menu para
   fora da tela. */
.mega-in{max-width:1180px; margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:24px 22px; align-items:start}
.mega-col h5{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:10px}
.mega-item{
  display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:9px 11px; border-radius:10px; margin-left:-11px;
}
.mega-item:hover{background:var(--amber-wash)}
.mega-item b{display:block; color:var(--ink); font-size:14px; font-weight:600}
.mega-item span{display:block; font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:2px}
.mega-note{
  grid-column:1/-1; margin-top:6px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:13px; color:var(--muted);
}
.scrim{position:fixed; inset:var(--nav-h) 0 0; background:rgba(10,12,27,.16); z-index:58}

/* ------------------------------------------------------------- layout */
.page{max-width:1180px; margin:0 auto; padding:26px 22px 80px}
.page.narrow{max-width:880px}
.pagehead{margin-bottom:22px}
.pagehead .sub{margin-top:6px; color:var(--muted); font-size:14.5px; max-width:70ch}

/* --------------------------------------------------------------- cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.card.pad0{padding:0}
.card.hi{border-radius:8px 44px 8px 44px}
.card h3 + .sub{margin-top:4px}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* --------------------------------------------------------------- botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 18px; border-radius:11px; border:1px solid transparent;
  font-size:14.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  background:var(--chip); color:var(--ink); transition:filter .14s, background .14s;
}
.btn:hover:not(:disabled){filter:brightness(.96)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--amber); color:var(--ink)}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--body)}
.btn.ghost:hover:not(:disabled){background:var(--chip)}
.btn.danger{background:var(--danger-wash); color:var(--danger); border-color:#F0CFC7}
.btn.sm{height:34px; padding:0 12px; font-size:13.5px; border-radius:9px}
.btn.lg{height:50px; padding:0 24px; font-size:16px}
.btn.block{width:100%}

/* -------------------------------------------------------------- campos */
.field{display:flex; flex-direction:column; gap:6px}
.field > label{font-size:13.5px; font-weight:600; color:var(--ink)}
.field .hint{font-size:12.5px; color:var(--muted); line-height:1.45}
.inp, textarea.inp, select.inp{
  width:100%; height:42px; padding:0 13px; border:1px solid var(--line);
  border-radius:11px; background:var(--card); font-size:14.5px; color:var(--ink);
}
textarea.inp{height:auto; min-height:88px; padding:11px 13px; line-height:1.55; resize:vertical}
select.inp{cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2384827D' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px}
.inp:focus{border-color:var(--marinho); outline:none; box-shadow:0 0 0 3px var(--amber-wash)}
.inp.erro{border-color:var(--danger); background:var(--danger-wash)}
.field .erro-msg{font-size:12.5px; color:var(--danger); font-weight:500}

/* ------------------------------------------------------------- pílulas */
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600; background:var(--chip); color:var(--body); white-space:nowrap;
}
.pill.amber{background:var(--amber-wash); color:var(--amber-deep)}
.pill.green{background:var(--green-wash); color:var(--green)}
.pill.red{background:var(--danger-wash); color:var(--danger)}
.pill.info{background:var(--info-wash); color:var(--info)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* -------------------------------------------------------------- tabela */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
table.tbl{border-collapse:collapse; width:100%; font-size:14px}
.tbl th,.tbl td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl th{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:400; background:var(--chip); position:sticky; top:0}
.tbl tbody tr:hover{background:var(--amber-wash)}
.tbl td b{color:var(--ink)}

/* ---------------------------------------------------------------- KPIs */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px}
.kpi .v{font-size:32px; font-weight:700; color:var(--ink); line-height:1.05; font-variant-numeric:tabular-nums}
.kpi .k{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-top:9px}
.kpi .leitura{font-size:12.5px; color:var(--body); margin-top:8px; line-height:1.45}
.kpi.destaque{border-color:var(--amber); background:var(--amber-wash)}

/* --------------------------------------------------------------- modal */
.modal-bg{
  position:fixed; inset:0; background:rgba(10,12,27,.44); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:22px;
  animation:fadein .14s ease;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  width:100%; max-width:560px; max-height:90vh; display:flex; flex-direction:column;
  animation:slideup .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes slideup{from{transform:translateY(12px);opacity:.6}to{transform:none;opacity:1}}
.modal.wide{max-width:900px}
.modal.xwide{max-width:1120px}
.modal-head{padding:22px 24px 16px; border-bottom:1px solid var(--line-soft)}
.modal-head h3{font-size:19px}
.modal-head .sub{margin-top:5px; font-size:13.5px; color:var(--muted); line-height:1.5}
.modal-body{padding:22px 24px; overflow-y:auto; flex:1}
.modal-foot{
  padding:16px 24px 20px; border-top:1px solid var(--line-soft);
  display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap;
}
.modal-foot .left{margin-right:auto; font-size:13px; color:var(--muted)}
.modal.perigo .modal-head{background:var(--danger-wash); border-bottom-color:#F0CFC7}
.modal.perigo .modal-head h3{color:var(--danger)}

/* --------------------------------------------------------------- avisos */
.aviso{
  display:flex; gap:12px; padding:14px 16px; border-radius:12px; font-size:13.5px; line-height:1.55;
  background:var(--amber-wash); border-left:3px solid var(--amber); color:var(--body);
}
.aviso b{color:var(--ink)}
.aviso.erro{background:var(--danger-wash); border-left-color:var(--danger)}
.aviso.ok{background:var(--green-wash); border-left-color:var(--green)}
.aviso.info{background:var(--info-wash); border-left-color:var(--info)}
.aviso .ic{flex:none; font-size:16px; line-height:1.3}

/* --------------------------------------------------------------- toast */
#toasts{position:fixed; right:18px; bottom:18px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:380px}
.toast{
  background:var(--ink); color:#fff; padding:13px 16px; border-radius:12px; font-size:14px;
  box-shadow:var(--sh-lg); animation:slideup .18s ease; display:flex; gap:10px; align-items:flex-start;
}
.toast.ok{background:var(--green)} .toast.erro{background:#8E2A19}
.toast .x{margin-left:auto; cursor:pointer; opacity:.7; background:none; border:0; color:inherit; font-size:16px; line-height:1}

/* ------------------------------------------------------------ progresso */
.steps{display:flex; align-items:center; gap:0; margin-bottom:22px; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:8px; padding:8px 14px 8px 10px; font-size:13.5px; color:var(--muted)}
.step .n{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--chip); font-size:12px; font-weight:700; color:var(--muted);
}
.step.on{color:var(--ink); font-weight:600}
.step.on .n{background:var(--amber); color:var(--ink)}
.step.done .n{background:var(--green-wash); color:var(--green)}
.step-sep{width:14px;height:8px;flex:none;opacity:.35}

/* --------------------------------------------------------------- vazio */
.vazio{text-align:center; padding:52px 24px; color:var(--muted)}
.vazio .chev{margin-bottom:16px; opacity:.5}
.vazio h4{color:var(--ink); margin-bottom:6px}
.vazio p{max-width:44ch; margin:0 auto 18px; font-size:14px; line-height:1.55}

/* ------------------------------------------------------------- filtros */
.filtros{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
}
.filtros .field{min-width:150px}
.filtros .field > label{font-size:11px; font-family:"DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:400}
.filtros .inp{height:38px; font-size:14px}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip-f{
  padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card);
  font-size:13px; cursor:pointer; color:var(--body);
}
.chip-f.on{background:var(--amber); border-color:var(--amber); color:var(--ink); font-weight:600}

/* ------------------------------------------------------------ tutorial */
.tuto-btn{
  display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  color:var(--info); font-size:13px; font-weight:600; padding:4px 2px;
}
.tuto-passo{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft)}
.tuto-passo:last-child{border-bottom:0}
.tuto-passo .n{
  width:28px;height:28px;border-radius:9px;background:var(--amber-wash);color:var(--amber-deep);
  display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;
}
.tuto-passo b{display:block; color:var(--ink); margin-bottom:3px}
.tuto-passo p{font-size:13.5px; line-height:1.55}

/* ------------------------------------------------------------- toggles */
.switch{display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch .tr{width:40px;height:23px;border-radius:999px;background:var(--line);position:relative;transition:background .16s;flex:none}
.switch .tr::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .16s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .tr{background:var(--amber)}
.switch input:checked + .tr::after{transform:translateX(17px)}
.switch input:focus-visible + .tr{outline:2.5px solid var(--amber-deep); outline-offset:2px}
.switch span{font-size:14px}

/* ------------------------------------------------------------- opções */
.opt{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:13px; background:var(--card); transition:border-color .14s, background .14s;
}
.opt:hover{border-color:var(--amber)}
.opt.on{border-color:var(--amber); background:var(--amber-wash)}
.opt input{margin-top:3px; accent-color:var(--amber-deep); width:17px; height:17px; flex:none}
.opt b{display:block; color:var(--ink); font-size:14.5px}
.opt small{display:block; color:var(--muted); font-size:12.5px; line-height:1.5; margin-top:3px}

/* ------------------------------------------------------------ barra */
.bar{height:8px; background:var(--chip); border-radius:999px; overflow:hidden}
.bar > i{display:block; height:100%; background:var(--amber); border-radius:999px; transition:width .3s}
.bar.verde > i{background:var(--green)}
.bar.vermelha > i{background:var(--danger)}

.skel{background:linear-gradient(90deg,var(--chip) 25%,var(--line-soft) 50%,var(--chip) 75%);
  background-size:200% 100%; animation:sk 1.3s infinite; border-radius:8px; height:14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (max-width:900px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .mega-in{grid-template-columns:1fr 1fr}
  .nav{overflow-x:auto}
}
@media (max-height:620px){
  .mega{padding:16px 22px 20px}
  .mega-in{gap:16px}
  .mega-item{padding:7px 10px}
  .mega-item span{display:none}
}
@media (max-width:640px){
  .mega-in{grid-template-columns:1fr}
  .page{padding:18px 14px 70px}
  h1{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}