/* ===== BAR DO BASTIÃO — Painel administrativo ===== */
:root{
  --preto:#141210; --preto2:#1e1b17; --carvao:#26221c; --creme:#f6efdf;
  --ambar:#f0a71c; --ambar-esc:#c9840f; --dourado:#e8b64a;
  --verde:#3f9d5a; --vermelho:#c0442e; --azul:#3b7bd4; --roxo:#7b5bd4;
  --linha:#e7ddc6; --texto:#221f1a; --cinza:#8c8478; --fundo:#f2ebda;
  --font-tit:"Anton",Impact,sans-serif; --font-txt:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-txt);background:var(--fundo);color:var(--texto);line-height:1.5}
button,input,select,textarea{font-family:inherit;font-size:14px}
button{cursor:pointer;border:none}
a{color:inherit;text-decoration:none}
.tit{font-family:var(--font-tit);letter-spacing:.5px}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- LOGIN ---------- */
.gate{position:fixed;inset:0;background:linear-gradient(160deg,#201c17,#0d0b09);display:none;
  align-items:center;justify-content:center;z-index:200;padding:20px}
.gate.on{display:flex}
.gate .card{background:var(--creme);border-radius:18px;padding:34px;max-width:380px;width:100%;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.gate img{width:84px;margin:0 auto 12px;display:block}
.gate h1{font-family:var(--font-tit);font-size:26px;margin-bottom:2px}
.gate .sub{color:var(--cinza);font-size:13.5px;margin-bottom:20px}
.gate input{width:100%;padding:12px 14px;border:1.5px solid var(--linha);border-radius:10px;margin-bottom:10px;background:#fff}
.gate input:focus{outline:none;border-color:var(--ambar)}
.gate button{width:100%;padding:13px;background:var(--ambar);color:#241a06;font-weight:800;border-radius:10px;font-size:15px}
.gate button:disabled{opacity:.6;cursor:wait}
.gate .err{color:var(--vermelho);font-size:13px;min-height:20px;margin-bottom:4px}
.gate .pe{font-size:12px;color:var(--cinza);margin-top:14px}

/* ---------- LAYOUT ---------- */
.app{display:none;min-height:100vh;grid-template-columns:236px 1fr}
.app.on{display:grid}
.side{background:var(--preto);color:var(--creme);padding:16px 12px;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;overflow-y:auto}
.side .logo{display:flex;gap:10px;align-items:center;padding:6px 8px 16px;
  border-bottom:1px solid rgba(240,167,28,.25);margin-bottom:12px}
.side .logo img{width:38px}
.side .logo b{font-family:var(--font-tit);font-size:17px;line-height:.95;display:block}
.side .logo span{font-size:10px;color:var(--dourado);letter-spacing:1.6px;text-transform:uppercase}
.side nav{display:flex;flex-direction:column;gap:3px}
.side nav button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;
  color:var(--creme);padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;opacity:.82}
.side nav button:hover{background:rgba(255,255,255,.07);opacity:1}
.side nav button.on{background:var(--ambar);color:#241a06;opacity:1;font-weight:800}
.side nav button .badge{margin-left:auto;background:var(--vermelho);color:#fff;font-size:11px;
  padding:1px 7px;border-radius:20px;font-weight:800}
.side nav button.on .badge{background:#241a06;color:var(--ambar)}
.side .sep{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#6e675c;padding:14px 12px 6px}
.side .bottom{margin-top:auto;padding:12px 10px 4px;font-size:12px;color:#7a7266;border-top:1px solid rgba(255,255,255,.08)}
.side .bottom .u{color:var(--creme);font-weight:700;font-size:13px}
.side .bottom a{color:var(--dourado);display:inline-block;margin:8px 0}
.side .bottom button{background:none;color:#a99;padding:0;font-size:12px;text-decoration:underline}

.main{padding:26px 30px 60px;max-width:1400px;overflow-x:hidden}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head h1{font-family:var(--font-tit);font-size:30px;line-height:1.1}
.page-head .sub{color:var(--cinza);font-size:13.5px}
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- BOTOES / CAMPOS ---------- */
.btn{background:var(--ambar);color:#241a06;font-weight:800;padding:9px 15px;border-radius:9px;font-size:13.5px}
.btn:hover{background:var(--ambar-esc)}
.btn.sec{background:#fff;color:var(--texto);border:1.5px solid var(--linha);font-weight:700}
.btn.sec:hover{border-color:var(--ambar);background:#fffdf7}
.btn.dan{background:var(--vermelho);color:#fff}
.btn.mini{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.verde{background:var(--verde);color:#fff}
input,select,textarea{padding:9px 11px;border:1.5px solid var(--linha);border-radius:9px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ambar)}
label{display:block;font-size:12px;font-weight:700;color:#6b6459;margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
.campo{margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:14px 16px;border-left:5px solid var(--cinza)}
.kpi .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--cinza);font-weight:700}
.kpi .val{font-family:var(--font-tit);font-size:26px;line-height:1.15;margin:3px 0}
.kpi small{color:var(--cinza);font-size:11.5px}
.kpi.g{border-left-color:var(--verde)} .kpi.r{border-left-color:var(--vermelho)}
.kpi.b{border-left-color:var(--azul)}  .kpi.a{border-left-color:var(--ambar)}
.kpi.x{border-left-color:var(--roxo)}

/* ---------- CARDS / TABELAS ---------- */
.card2{background:#fff;border:1px solid var(--linha);border-radius:14px;margin-bottom:18px;overflow:hidden}
.ch{padding:14px 16px;border-bottom:1px solid var(--linha);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.ch h2{font-family:var(--font-tit);font-size:18px}
.ch .mini{font-size:12px;color:var(--cinza)}
.cb{padding:0;overflow-x:auto}
.cb.pad{padding:16px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;padding:10px 14px;background:#faf6ec;color:#6b6459;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--linha);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid #f2ece0;vertical-align:middle}
tbody tr:hover{background:#fffdf6}
tbody tr:last-child td{border-bottom:none}
.vazio{text-align:center;color:var(--cinza);padding:26px}

.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:800;white-space:nowrap}
.pill.ok{background:#e4f3e8;color:#26663b} .pill.warn{background:#fdeed2;color:#8a5a05}
.pill.bad{background:#f9e2dd;color:#8f2d1a} .pill.info{background:#e2ecfb;color:#1f4a8f}
.pill.neutro{background:#eee9dd;color:#6b6459}

/* ---------- MODAL ---------- */
.ovl{position:fixed;inset:0;background:rgba(15,12,9,.6);display:none;z-index:150;
  align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto}
.ovl.on{display:flex}
.modal{background:var(--fundo);border-radius:16px;width:100%;max-width:680px;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.modal.lg{max-width:900px}
.modal .mh{padding:16px 20px;border-bottom:1px solid var(--linha);display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:16px 16px 0 0}
.modal .mh h3{font-family:var(--font-tit);font-size:20px}
.modal .mh button{background:none;font-size:22px;color:var(--cinza);line-height:1}
.modal .mb{padding:20px}
.modal .mf{padding:14px 20px;border-top:1px solid var(--linha);display:flex;gap:8px;justify-content:flex-end;background:#fff;border-radius:0 0 16px 16px}

/* ---------- TOAST ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--preto);
  color:var(--creme);padding:12px 20px;border-radius:30px;font-size:14px;font-weight:600;opacity:0;
  pointer-events:none;transition:.25s;z-index:300;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--vermelho)}

/* ---------- ESPECIFICOS ---------- */
.abas{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.abas button{background:#fff;border:1.5px solid var(--linha);padding:7px 14px;border-radius:20px;font-weight:700;font-size:13px;color:#6b6459}
.abas button.on{background:var(--preto);color:var(--creme);border-color:var(--preto)}
.busca{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.busca input,.busca select{width:auto;min-width:180px}

.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.col{background:#efe8d7;border-radius:14px;padding:10px;min-height:120px}
.col h3{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:#6b6459;margin-bottom:8px;padding:0 4px;display:flex;justify-content:space-between}
.ped{background:#fff;border:1px solid var(--linha);border-radius:11px;padding:11px 12px;margin-bottom:8px;cursor:pointer}
.ped:hover{border-color:var(--ambar)}
.ped .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ped b{font-size:14px}
.ped .val{font-family:var(--font-tit);font-size:16px}
.ped small{color:var(--cinza);font-size:11.5px;display:block}
.ped .itens{font-size:12px;color:#6b6459;margin-top:5px;line-height:1.35}

.fichalinha{display:grid;grid-template-columns:1fr 110px 90px 34px;gap:8px;align-items:center;margin-bottom:8px}
.fichalinha .custo{font-size:13px;color:var(--cinza);text-align:right;font-variant-numeric:tabular-nums}
.fichalinha button{background:#f7ebe8;color:var(--vermelho);border-radius:8px;padding:8px 0;font-weight:800}
.resumoficha{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:14px;margin-top:14px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.resumoficha div b{display:block;font-family:var(--font-tit);font-size:20px}
.resumoficha div span{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza);font-weight:700}

.barra{height:7px;background:#eee6d6;border-radius:6px;overflow:hidden;min-width:70px}
.barra i{display:block;height:100%;background:var(--verde)}
.barra i.warn{background:var(--ambar)} .barra i.bad{background:var(--vermelho)}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .dh{font-size:11px;text-transform:uppercase;color:var(--cinza);font-weight:800;text-align:center;padding:4px 0}
.cal .d{background:#fff;border:1px solid var(--linha);border-radius:9px;min-height:88px;padding:5px 6px;font-size:12px;cursor:pointer}
.cal .d:hover{border-color:var(--ambar)}
.cal .d.fora{background:#f7f2e6;opacity:.5}
.cal .d.hoje{border-color:var(--ambar);border-width:2px}
.cal .d .n{font-weight:800;color:#6b6459;font-size:12px}
.cal .ev{background:#fdeed2;border-radius:5px;padding:1px 5px;margin-top:3px;font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .ev.evento{background:#e2ecfb} .cal .ev.tarefa{background:#e9e2fb} .cal .ev.fornecedor{background:#e4f3e8}

.barrasmes{display:flex;align-items:flex-end;gap:3px;height:110px;padding:10px 0}
.barrasmes div{flex:1;background:var(--ambar);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.barrasmes div:hover{background:var(--ambar-esc)}

@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:column}
  .side nav{display:grid;grid-template-columns:repeat(2,1fr)}
  .main{padding:18px 14px 50px}
  .grid2,.grid3{grid-template-columns:1fr}
}
