/* SAOROGERIO-PACOTE 1.0 — identidade OBRA360: grafite + vinho, celular primeiro */
:root {
  --grafite: #23272F; --grafite-2: #2E333C; --vinho: #8A2B3A; --vinho-claro: #F4E4E7;
  --fundo: #F2F2F4; --cartao: #FFFFFF; --texto: #23272F; --suave: #626875; --linha: #DCDDE2;
  --bom: #2E7D4F; --ruim: #B3261E; --alerta: #B26A00; --custo: #4A5868; --receb: #8A2B3A;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.45 var(--fonte); }
a { color: var(--vinho); }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15.5px; }
.num, table { font-variant-numeric: tabular-nums; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* topo e menu */
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; background: var(--grafite); color: #fff; padding: 10px 16px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.marca img { width: 34px; height: 34px; }
.marca b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca small { display: block; color: #B9BDC6; font-size: 12px; }
.quem { margin-left: auto; color: #D3D6DC; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.menu-btn { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.menu-btn span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; border-radius: 1px; }
.lateral { position: fixed; top: 54px; bottom: 0; left: 0; width: 230px; background: var(--grafite-2); padding: 12px 8px; overflow-y: auto; z-index: 25; display: flex; flex-direction: column; gap: 2px; }
.lateral a, .lateral button { display: flex; align-items: center; gap: 10px; color: #D3D6DC; text-decoration: none; padding: 10px 12px; border-radius: 8px; font: 500 14.5px var(--fonte); background: none; border: 0; width: 100%; cursor: pointer; text-align: left; }
.lateral a:hover, .lateral button:hover { background: rgba(255,255,255,.07); color: #fff; }
.lateral a[aria-current="page"] { background: var(--vinho); color: #fff; }
.lateral form { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 8px; }
.versao { margin-top: auto; color: #8E939D; font-size: 12px; padding: 12px; }
.fundo-menu { display: none; }
main.com-menu { margin-left: 230px; padding: 20px 22px 48px; max-width: 1180px; display: flex; flex-direction: column; gap: 16px; }
main.sem-menu { max-width: 420px; margin: 8vh auto; padding: 16px; }
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .lateral { transform: translateX(-100%); transition: transform .2s; }
  body.menu-aberto .lateral { transform: none; }
  body.menu-aberto .fundo-menu { display: block; position: fixed; inset: 54px 0 0 0; background: rgba(0,0,0,.35); z-index: 20; }
  main.com-menu { margin-left: 0; padding: 14px 14px 40px; }
}

/* blocos */
.cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cab p { margin: 4px 0 0; color: var(--suave); }
.card { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 16px 18px; }
.card > h2 + p.lead, .card p.lead { color: var(--suave); margin: 4px 0 12px; font-size: 14px; }
.grade { display: grid; gap: 14px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.duas { grid-template-columns: 1.4fr 1fr; } @media (max-width: 900px) { .duas { grid-template-columns: 1fr; } }
.kpi .rot { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.kpi .val { font-size: 26px; font-weight: 700; margin-top: 2px; }
.kpi .sub { color: var(--suave); font-size: 13px; }
.kpi.bom { border-left: 4px solid var(--bom); } .kpi.ruim { border-left: 4px solid var(--ruim); } .kpi.vinho { border-left: 4px solid var(--vinho); }
.pos { color: var(--bom); } .neg { color: var(--ruim); } .suave { color: var(--suave); }
.aviso { padding: 10px 14px; border-radius: 10px; background: var(--cartao); border: 1px solid var(--linha); border-left: 4px solid var(--suave); }
.aviso.ok { border-left-color: var(--bom); } .aviso.erro { border-left-color: var(--ruim); } .aviso.info { border-left-color: var(--vinho); }

/* tabelas */
.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: right; white-space: nowrap; vertical-align: top; }
th:first-child, td:first-child, th.e, td.e { text-align: left; }
td.quebra { white-space: normal; min-width: 160px; }
thead th { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
tr.total td, tfoot td { font-weight: 700; border-top: 2px solid var(--texto); }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.pill.bom { background: #E3F1E8; color: var(--bom); } .pill.ruim { background: #F9E3E1; color: var(--ruim); } .pill.neutra { background: var(--fundo); color: var(--suave); }
.barra { height: 8px; background: var(--fundo); border-radius: 4px; overflow: hidden; min-width: 90px; }
.barra div { height: 100%; background: var(--custo); } .barra div.estouro { background: var(--ruim); }

/* formulários */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; align-items: end; }
.form .largo { grid-column: 1 / -1; }
label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 5px; }
input, select, textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--texto); font: 15px var(--fonte); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--vinho); outline-offset: 2px; }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--linha); background: #fff; color: var(--texto); border-radius: 8px; padding: 10px 15px; font: 600 14px var(--fonte); cursor: pointer; text-decoration: none; }
.btn.prim { background: var(--vinho); border-color: var(--vinho); color: #fff; }
.btn.perigo { color: var(--ruim); }
.btn.peq { padding: 6px 10px; font-size: 13px; }
.seg { display: flex; border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.seg button { flex: 1; border: 0; background: #fff; padding: 9px 6px; font: 500 14px var(--fonte); cursor: pointer; color: var(--texto); }
.seg button + button { border-left: 1px solid var(--linha); }
.seg button[aria-pressed="true"] { background: var(--vinho); color: #fff; }
input[type=range] { accent-color: var(--vinho); padding: 0; border: 0; }
.sim { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; }
.sim label { display: flex; justify-content: space-between; gap: 10px; }
.sim output { font-weight: 700; color: var(--texto); white-space: nowrap; }

/* gráficos */
.grafico svg { display: block; width: 100%; height: auto; min-width: 560px; }
.grafico { overflow-x: auto; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; color: var(--suave); font-size: 13px; margin-top: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.barras { display: flex; flex-direction: column; gap: 10px; }
.barras .l { display: grid; grid-template-columns: 210px 1fr 120px; gap: 10px; align-items: center; font-size: 14px; }
.barras .t { height: 12px; background: var(--fundo); border-radius: 6px; overflow: hidden; }
.barras .f { height: 100%; background: var(--custo); border-radius: 6px; }
@media (max-width: 560px) { .barras .l { grid-template-columns: 1fr 100px; } .barras .t { grid-column: 1 / -1; grid-row: 2; } }

/* casas */
.casas { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px; margin-top: 10px; }
.casas a { display: block; text-align: center; border: 1px solid var(--linha); border-radius: 6px; padding: 8px 0; font-weight: 600; font-size: 13px; text-decoration: none; color: var(--texto); background: var(--fundo); }
.casas a.n1 { background: #F1DDE1; } .casas a.n2 { background: #DDA9B3; } .casas a.n3 { background: #A9CDB6; } .casas a.n4 { background: var(--bom); color: #fff; border-color: var(--bom); }
.leg-casas { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--suave); }
.leg-casas span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; border: 1px solid var(--linha); background: var(--c); }

/* gantt e plano */
.gantt { display: grid; grid-template-columns: 230px 1fr; gap: 6px 12px; align-items: center; font-size: 13.5px; }
.gantt .trilho { position: relative; height: 22px; background: var(--fundo); border-radius: 5px; }
.gantt .seg-g { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--custo); }
.gantt .seg-g.crit { background: var(--vinho); } .gantt .seg-g.parado { background: var(--linha); }
@media (max-width: 640px) { .gantt { grid-template-columns: 1fr; } }
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.meses div { background: var(--fundo); border-radius: 8px; padding: 8px; text-align: center; }
.meses b { display: block; font-size: 20px; } .meses span { font-size: 12px; color: var(--suave); }
.meses div.feito { background: #E3F1E8; }

/* login */
.login { display: flex; flex-direction: column; gap: 14px; }
.login .marca-login { display: flex; align-items: center; gap: 10px; }
.login .marca-login img { width: 44px; }
.risco { display: grid; grid-template-columns: 6px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.risco:last-child { border-bottom: 0; } .risco .s { border-radius: 3px; } .s.alta { background: var(--ruim); } .s.media { background: var(--alerta); } .s.baixa { background: var(--bom); }
.risco p { margin: 2px 0 0; color: var(--suave); font-size: 14px; }
ul.limpa { margin: 0; padding-left: 18px; } ul.limpa li { margin: 6px 0; }
@media (prefers-reduced-motion: reduce) { .lateral { transition: none; } }