:root { --petroleo:#182f39; --petroleo2:#22404c; --petroleo3:#2f4953; --lima:#d7ef86; --oliva:#718c39; --papel:#f7f8f2; --suave:#eef1e7; --txt:#1c2b30; --muda:#58676b; --erro:#b3402a; --ok:#2f7d4f; --aviso:#8a4a10; --linha:#dce0d8; --azul:#2f6690; --ambar:#a0741a; --sb:264px; --sb-min:76px; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.5 "DM Sans",system-ui,sans-serif; background:var(--papel); color:var(--txt); }
[hidden] { display:none !important; }
h1,h2,h3 { font-family:Manrope,Arial,sans-serif; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:0; }
button, input, select, textarea { font:inherit; color:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline:3px solid #6aa0ff; outline-offset:2px; }
.marca { font:800 22px/1 Manrope,Arial,sans-serif; letter-spacing:-.06em; } .marca i { color:var(--lima); font-style:normal; } .claro .marca i { color:var(--oliva); }
.ico { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ico.p { width:16px; height:16px; }

/* ---------- login ---------- */
#login { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--petroleo); }
#login form { background:var(--papel); border-radius:16px; padding:32px; width:100%; max-width:380px; display:grid; gap:14px; } #login .marca { font-size:34px; }

/* ---------- shell + sidebar ---------- */
.shell { display:grid; grid-template-columns:var(--sb) 1fr; min-height:100vh; transition:grid-template-columns .2s; }
.shell.min { grid-template-columns:var(--sb-min) 1fr; }
.sidebar { background:var(--petroleo); color:#b9c8cc; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; border-right:1px solid #0f2029; z-index:30; }
.sb-topo { display:flex; align-items:center; justify-content:space-between; padding:20px 18px 14px; gap:8px; min-height:68px; }
.sb-topo .marca { color:#fff; white-space:nowrap; }
.sb-btn { background:none; border:0; color:#9db0b5; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; cursor:pointer; flex:none; }
.sb-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.sb-nav { flex:1; overflow-y:auto; padding:6px 12px 12px; scrollbar-width:thin; scrollbar-color:#2f4953 transparent; }
.sb-grupo { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7f979d; padding:16px 12px 6px; display:flex; align-items:center; gap:8px; }
.sb-item { display:flex; align-items:center; gap:12px; width:100%; padding:10px 14px; border:0; background:none; color:#b9c8cc; border-radius:12px; cursor:pointer; text-align:left; font-size:14.5px; font-weight:500; margin:2px 0; transition:background .15s,color .15s; position:relative; }
.sb-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.sb-item[aria-current=page] { background:var(--lima); color:var(--petroleo); font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.sb-item .badge { margin-left:auto; background:var(--erro); color:#fff; border-radius:99px; font-size:11px; font-weight:700; padding:1px 7px; min-width:20px; text-align:center; }
.sb-rodape { padding:12px; border-top:1px solid #0f2029; }
.sb-user { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06); border-radius:12px; padding:10px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--lima); color:var(--petroleo); font-weight:800; display:grid; place-items:center; font-size:13px; flex:none; font-family:Manrope,sans-serif; }
.sb-user .nome { color:#fff; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sb-user .papel { font-size:12px; color:#9db0b5; }
.sb-user .info { min-width:0; flex:1; }
.shell.min .sb-item span.txt, .shell.min .sb-grupo span, .shell.min .sb-user .info, .shell.min .sb-topo .marca, .shell.min .sb-item .badge { display:none; }
.shell.min .sb-item { justify-content:center; padding:11px 0; } .shell.min .sb-topo { justify-content:center; padding:20px 0 14px; } .shell.min .sb-grupo { justify-content:center; padding:12px 0 4px; } .shell.min .sb-grupo::before { content:""; width:20px; height:1px; background:#2f4953; }
.shell.min .sb-user { justify-content:center; padding:8px 0; flex-direction:column; }
.shell.min .sb-item .dot { position:absolute; top:7px; right:20px; width:8px; height:8px; background:var(--erro); border-radius:50%; }
.sb-item .dot { display:none; } .shell.min .sb-item .dot { display:block; }

.conteudo { min-width:0; display:flex; flex-direction:column; }
.topbar { display:none; align-items:center; gap:12px; padding:10px 16px; background:var(--petroleo); color:#fff; position:sticky; top:0; z-index:20; }
.scrim { display:none; }
main { padding:28px 32px 48px; max-width:1280px; width:100%; margin:0 auto; outline:none; }

/* ---------- blocos comuns ---------- */
.pg-topo { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.pg-topo h2 { font-size:28px; } .pg-topo .sub { color:var(--muda); margin-top:4px; }
.acoes { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:8px; border-radius:10px; border:1px solid var(--petroleo); background:#fff; color:var(--petroleo); padding:8px 14px; cursor:pointer; font-weight:600; font-size:14px; text-decoration:none; }
.btn:hover { background:var(--suave); } .btn.pri { background:var(--petroleo); color:#fff; } .btn.pri:hover { background:var(--petroleo2); }
.btn.lima { background:var(--lima); border-color:var(--lima); } .btn.lima:hover { filter:brightness(.96); } .btn.perigo { border-color:var(--erro); color:var(--erro); } .btn.peq { padding:5px 10px; font-size:13px; } .btn:disabled { opacity:.5; cursor:not-allowed; }
.card { background:#fff; border:1px solid var(--linha); border-radius:16px; padding:20px; }
.card h3 { font-size:16px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card h3 a, .link { color:var(--oliva); font:600 13px "DM Sans"; text-decoration:none; cursor:pointer; background:none; border:0; padding:0; } .card h3 a:hover, .link:hover { text-decoration:underline; }
.grid { display:grid; gap:16px; } .g4 { grid-template-columns:repeat(4,1fr); } .g3 { grid-template-columns:repeat(3,1fr); } .g2 { grid-template-columns:1fr 1fr; } .g21 { grid-template-columns:1.6fr 1fr; } .mb { margin-bottom:16px; }
.kpi { display:flex; gap:14px; align-items:flex-start; }
.kpi .ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--petroleo); color:var(--lima); flex:none; }
.kpi .ic.c2 { background:var(--lima); color:var(--petroleo); } .kpi .ic.c3 { background:#fde8d4; color:var(--aviso); } .kpi .ic.c4 { background:#e3ecf3; color:var(--azul); }
.kpi b { display:block; font:800 30px/1.05 Manrope,sans-serif; letter-spacing:-.03em; } .kpi small { color:var(--muda); display:block; } .kpi .rot { font-size:13px; font-weight:600; color:var(--muda); margin-bottom:2px; }
.muda { color:var(--muda); } .peq { font-size:13px; }
.vazio { color:var(--muda); padding:18px 6px; text-align:center; font-size:14px; }
.vazio .ico { width:30px; height:30px; display:block; margin:0 auto 8px; opacity:.5; }

/* pills / chips */
.pill { display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:700; background:var(--suave); color:var(--txt); white-space:nowrap; }
.pill.ok { background:#d9f0e1; color:var(--ok); } .pill.aviso { background:#fde8d4; color:var(--aviso); } .pill.erro { background:#f8d9d3; color:var(--erro); } .pill.azul { background:#e3ecf3; color:var(--azul); }
.t-compromisso { --c:var(--petroleo); --bg:#e1e9ec; } .t-reuniao { --c:var(--oliva); --bg:#e8f0d4; } .t-prazo { --c:var(--erro); --bg:#f8d9d3; } .t-tarefa { --c:var(--azul); --bg:#e3ecf3; } .t-lembrete { --c:var(--ambar); --bg:#f6ebcc; }

/* listas */
.lista { list-style:none; margin:0; padding:0; } .lista li { display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--linha); } .lista li:last-child { border:0; }
.data-chip { width:46px; text-align:center; border-radius:10px; background:var(--suave); padding:4px 0; flex:none; line-height:1.1; } .data-chip b { display:block; font:800 17px Manrope,sans-serif; } .data-chip span { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muda); }
.data-chip.hoje { background:var(--lima); }
.item-info { min-width:0; flex:1; } .item-info .t { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .item-info .s { font-size:13px; color:var(--muda); }
.item-info .t.feito { text-decoration:line-through; color:var(--muda); }
button.linha { all:unset; display:flex; width:100%; gap:12px; align-items:center; cursor:pointer; border-radius:10px; } button.linha:hover { background:var(--papel); } button.linha:focus-visible { outline:3px solid #6aa0ff; }

/* checklist */
.prog { height:8px; background:var(--suave); border-radius:99px; overflow:hidden; margin:2px 0 14px; } .prog i { display:block; height:100%; background:var(--oliva); border-radius:99px; }
.passo { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px; } .passo .ck { width:22px; height:22px; border-radius:50%; border:2px solid #b9c2b8; display:grid; place-items:center; flex:none; color:#fff; }
.passo.feito .ck { background:var(--oliva); border-color:var(--oliva); } .passo.feito .tx { color:var(--muda); } .passo .ck .ico { width:13px; height:13px; stroke-width:3; }

/* gráficos */
.seg { display:flex; height:14px; border-radius:99px; overflow:hidden; background:var(--suave); margin:4px 0 14px; } .seg i { display:block; height:100%; }
.leg { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; } .leg li { display:flex; align-items:center; gap:8px; } .leg .sw { width:11px; height:11px; border-radius:3px; flex:none; } .leg b { margin-left:auto; font-variant-numeric:tabular-nums; }
.barras { display:flex; align-items:flex-end; gap:12px; height:150px; padding-top:8px; } .barras .col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; }
.barras .b { width:100%; max-width:42px; background:var(--petroleo); border-radius:8px 8px 3px 3px; min-height:3px; } .barras .b.atual { background:var(--oliva); } .barras .v { font:700 13px "DM Sans"; } .barras .m { font-size:12px; color:var(--muda); text-transform:capitalize; }
.atencao { display:flex; gap:12px; align-items:center; padding:12px; border-radius:12px; background:var(--papel); border:1px solid var(--linha); width:100%; text-align:left; cursor:pointer; margin-bottom:8px; }
.atencao:hover { background:var(--suave); } .atencao .n { font:800 22px Manrope,sans-serif; min-width:34px; } .atencao.ok { cursor:default; } .atencao.ruim .n { color:var(--erro); } .atencao.aviso .n { color:var(--aviso); }

/* tabelas */
.tabela { overflow-x:auto; border:1px solid var(--linha); border-radius:16px; background:#fff; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--linha); vertical-align:middle; } tr:last-child td { border-bottom:0; }
th { background:var(--suave); font-size:12px; color:var(--muda); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
tbody tr.clic { cursor:pointer; } tbody tr.clic:hover { background:var(--papel); }
td .sub { font-size:12.5px; color:var(--muda); }
.inativo { opacity:.6; }

/* filtros */
.filtros { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
.campo-busca { position:relative; flex:1; min-width:220px; max-width:380px; } .campo-busca .ico { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muda); width:17px; height:17px; } .campo-busca input { padding-left:36px; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], input[type=time], input[type=tel], input:not([type]), select, textarea { width:100%; padding:9px 11px; border:1px solid #b9c2b8; border-radius:10px; background:#fff; }
.filtros select { width:auto; } .campo-busca input[type=search] { padding-left:36px; }
label { display:block; font-size:13px; color:var(--muda); font-weight:500; } label > input, label > select, label > textarea { display:block; margin-top:4px; color:var(--txt); }
.chip-f { border:1px solid #b9c2b8; background:#fff; border-radius:99px; padding:6px 12px; cursor:pointer; font-size:13px; font-weight:600; } .chip-f[aria-pressed=true] { background:var(--petroleo); color:#fff; border-color:var(--petroleo); }
.form { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 14px; } .form .largo { grid-column:1/-1; } .check { display:flex; gap:9px; align-items:flex-start; color:var(--txt); font-size:14px; } .check input { width:auto; margin:4px 0 0; }

/* modal + gaveta */
dialog { border:0; border-radius:18px; padding:0; max-width:560px; width:calc(100% - 24px); background:var(--papel); color:var(--txt); box-shadow:0 20px 60px rgba(0,0,0,.35); }
dialog::backdrop { background:rgba(15,32,41,.55); }
dialog.gaveta { margin:0 0 0 auto; height:100vh; max-height:100vh; border-radius:18px 0 0 18px; max-width:480px; width:100%; }
.dlg-topo { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:18px 22px; border-bottom:1px solid var(--linha); background:#fff; border-radius:18px 18px 0 0; } .dlg-topo h3 { font-size:18px; }
.dlg-corpo { padding:20px 22px; } .dlg-rodape { padding:14px 22px; border-top:1px solid var(--linha); display:flex; gap:8px; justify-content:flex-end; background:#fff; flex-wrap:wrap; }
dialog.gaveta { display:flex; flex-direction:column; } dialog.gaveta[open] { display:flex; } dialog.gaveta .dlg-corpo { flex:1; overflow-y:auto; }
.ficha dl { display:grid; grid-template-columns:130px 1fr; gap:8px 12px; margin:0 0 18px; } .ficha dt { color:var(--muda); font-size:13px; } .ficha dd { margin:0; word-break:break-word; } .ficha h4 { margin:18px 0 8px; font:800 14px Manrope,sans-serif; }
.msg { padding:10px 14px; border-radius:10px; margin-bottom:12px; } .msg.ok { background:#d9f0e1; color:var(--ok); } .msg.erro { background:#f8d9d3; color:var(--erro); }
#toasts { position:fixed; right:16px; bottom:16px; display:grid; gap:8px; z-index:100; } .toast { background:var(--petroleo); color:#fff; padding:11px 16px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:14px; max-width:340px; } .toast.erro { background:var(--erro); }

/* ---------- agenda ---------- */
.cal-topo { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; } .cal-topo h3 { font-size:22px; min-width:190px; } .cal-topo h3::first-letter, .grupo-dia h4::first-letter { text-transform:uppercase; }
.seg-btn { display:inline-flex; border:1px solid var(--petroleo); border-radius:10px; overflow:hidden; } .seg-btn button { border:0; background:#fff; padding:7px 14px; cursor:pointer; font-weight:600; font-size:14px; } .seg-btn button[aria-pressed=true] { background:var(--petroleo); color:#fff; }
.cal { background:#fff; border:1px solid var(--linha); border-radius:16px; overflow:hidden; }
.cal-sem { display:grid; grid-template-columns:repeat(7,1fr); background:var(--suave); } .cal-sem div { padding:9px 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muda); }
.cal-grade { display:grid; grid-template-columns:repeat(7,1fr); }
.dia { min-height:112px; border-top:1px solid var(--linha); border-right:1px solid var(--linha); padding:6px; cursor:pointer; display:flex; flex-direction:column; gap:3px; min-width:0; background:#fff; text-align:left; border-bottom:0; border-left:0; } .dia:nth-child(7n) { border-right:0; }
.dia:hover { background:var(--papel); } .dia.fora { background:#fafbf7; } .dia.fora .num { color:#a3aeaa; }
.dia .num { font:700 13px "DM Sans"; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; } .dia.hoje .num { background:var(--petroleo); color:var(--lima); } .dia.fds .num { color:var(--muda); }
.dia .fer { font-size:10.5px; font-weight:700; color:var(--erro); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev { font-size:12px; font-weight:600; padding:2px 7px; border-radius:6px; background:var(--bg); color:var(--c); border-left:3px solid var(--c); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; border-top:0; border-right:0; border-bottom:0; text-align:left; width:100%; }
.ev.feito { opacity:.55; text-decoration:line-through; } .mais { font-size:11.5px; color:var(--muda); font-weight:600; padding-left:4px; }
.legenda { display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--muda); } .legenda span { display:flex; align-items:center; gap:6px; } .legenda i { width:11px; height:11px; border-radius:3px; background:var(--c); display:inline-block; }
.grupo-dia { margin-bottom:18px; } .grupo-dia h4 { font:800 14px Manrope,sans-serif; margin:0 0 6px; display:flex; gap:8px; align-items:center; }
.ck-btn { width:24px; height:24px; border-radius:7px; border:2px solid #b9c2b8; background:#fff; cursor:pointer; display:grid; place-items:center; flex:none; color:#fff; padding:0; } .ck-btn[aria-pressed=true] { background:var(--oliva); border-color:var(--oliva); } .ck-btn .ico { width:14px; height:14px; stroke-width:3; }

/* ---------- responsivo ---------- */
@media (max-width:1100px) { .g4 { grid-template-columns:repeat(2,1fr); } .g3 { grid-template-columns:1fr 1fr; } .g21 { grid-template-columns:1fr; } }
@media (max-width:900px) {
  .shell, .shell.min { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:0; width:min(300px,86vw); transform:translateX(-102%); transition:transform .22s; }
  .shell.aberto .sidebar { transform:none; } .shell.aberto .scrim { display:block; position:fixed; inset:0; background:rgba(15,32,41,.55); z-index:25; }
  .topbar { display:flex; } .shell.min .sb-item span.txt, .shell.min .sb-grupo span, .shell.min .sb-user .info, .shell.min .sb-topo .marca { display:revert; }
  .shell.min .sb-item { justify-content:flex-start; padding:10px 14px; } #sb-min { display:none; } main { padding:20px 16px 40px; }
  .dia { min-height:78px; padding:4px; } .dia .fer, .mais { display:none; } .ev { font-size:11px; padding:1px 4px; }
}
@media (max-width:640px) { .g4, .g3, .g2 { grid-template-columns:1fr; } .form { grid-template-columns:1fr; } .ficha dl { grid-template-columns:1fr; gap:2px; } .ficha dd { margin-bottom:8px; } .pg-topo h2 { font-size:24px; } dialog.gaveta { border-radius:0; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }