/* ============================================================
   Casa & Estrada — painel de bordo
   Paleta: grafite azulado, verde-mostrador, ambar-combustivel
   ============================================================ */
:root{
  --fundo:#0E1317;
  --superficie:#161D23;
  --superficie-2:#1E272F;
  --linha:#2A353E;
  --texto:#E6EDF3;
  --texto-fraco:#8B9AA7;
  --verde:#3ED8A4;
  --ambar:#FFB020;
  --coral:#FF6B6B;
  --azul:#5EA9FF;
  --raio:14px;
  --sombra:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(255,176,32,.07), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(62,216,164,.06), transparent 55%),
    var(--fundo);
  color:var(--texto);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px;line-height:1.55;
  min-height:100vh;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:700;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:1.7rem}
h2{font-size:1.2rem}
h3{font-size:1rem}

/* ---------- Numerais tipo odometro ---------- */
.num{font-family:'JetBrains Mono',ui-monospace,'Courier New',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- Layout ---------- */
.topo{
  position:sticky;top:0;z-index:40;
  background:rgba(14,19,23,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.topo__in{max-width:1180px;margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.marca{display:flex;align-items:baseline;gap:.5rem;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.05rem;color:var(--texto);text-decoration:none}
.marca span{color:var(--ambar)}
.menu{display:flex;gap:.15rem;flex-wrap:wrap;margin-left:auto}
.menu a{
  color:var(--texto-fraco);padding:.42rem .7rem;border-radius:9px;font-size:.88rem;
  font-weight:500;text-decoration:none;white-space:nowrap;
}
.menu a:hover{background:var(--superficie-2);color:var(--texto);text-decoration:none}
.menu a.ativo{background:var(--superficie-2);color:var(--ambar)}
.sair{color:var(--texto-fraco);font-size:.82rem}

.wrap{max-width:1180px;margin:0 auto;padding:1.4rem 1rem 4rem}
.cabecalho{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.olho{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--texto-fraco);margin-bottom:.25rem}

/* ---------- Cartoes ---------- */
.card{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:1.1rem}
.card + .card{margin-top:1rem}
.grade{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.kpi{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:.95rem 1rem;position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--linha)}
.kpi--verde::after{background:var(--verde)}
.kpi--coral::after{background:var(--coral)}
.kpi--ambar::after{background:var(--ambar)}
.kpi--azul::after{background:var(--azul)}
.kpi__rot{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--texto-fraco)}
.kpi__val{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:1.45rem;font-weight:600;margin-top:.25rem;display:block}
.kpi__sub{font-size:.78rem;color:var(--texto-fraco);margin-top:.15rem}
.verde{color:var(--verde)}
.coral{color:var(--coral)}
.ambar{color:var(--ambar)}
.fraco{color:var(--texto-fraco)}

/* ---------- Mostrador de consumo (assinatura) ---------- */
.mostrador{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.mostrador__arco{position:relative;width:210px;height:118px;flex:none}
.mostrador__leitura{position:absolute;left:0;right:0;bottom:2px;text-align:center}
.mostrador__num{font-family:'JetBrains Mono',monospace;font-size:2.1rem;font-weight:700;line-height:1;color:var(--ambar)}
.mostrador__un{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-fraco)}
.mostrador__lista{display:grid;gap:.55rem;min-width:200px;flex:1}
.mostrador__linha{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--linha);padding-bottom:.35rem;font-size:.88rem}
.mostrador__linha b{font-family:'JetBrains Mono',monospace;font-weight:600}

/* ---------- Tabelas ---------- */
.tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{
  text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--texto-fraco);font-weight:600;padding:.55rem .6rem;border-bottom:1px solid var(--linha);white-space:nowrap;
}
td{padding:.6rem;border-bottom:1px solid rgba(42,53,62,.55);vertical-align:middle}
tbody tr:hover{background:rgba(30,39,47,.5)}
.dir{text-align:right}
.centro{text-align:center}

/* ---------- Formularios ---------- */
label{display:block;font-size:.78rem;color:var(--texto-fraco);margin-bottom:.25rem;font-weight:500}
input,select,textarea{
  width:100%;background:var(--fundo);border:1px solid var(--linha);color:var(--texto);
  padding:.55rem .65rem;border-radius:10px;font:inherit;font-size:.92rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ambar);outline-offset:1px;border-color:transparent}
.campo{margin-bottom:.8rem}
.form-linha{display:grid;gap:.8rem}
.f2{grid-template-columns:repeat(2,1fr)}
.f3{grid-template-columns:repeat(3,1fr)}
.f4{grid-template-columns:repeat(4,1fr)}
.check{display:flex;align-items:center;gap:.5rem}
.check input{width:auto}
.check label{margin:0;color:var(--texto);font-size:.9rem}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--ambar);color:#15202B;border:none;border-radius:10px;
  padding:.55rem 1rem;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;
}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn--fantasma{background:transparent;border:1px solid var(--linha);color:var(--texto)}
.btn--perigo{background:transparent;border:1px solid rgba(255,107,107,.4);color:var(--coral)}
.btn--pequeno{padding:.3rem .6rem;font-size:.8rem;border-radius:8px}

.tag{display:inline-block;padding:.12rem .5rem;border-radius:999px;font-size:.72rem;font-weight:600;border:1px solid var(--linha);color:var(--texto-fraco)}
.tag--r{color:var(--verde);border-color:rgba(62,216,164,.35);background:rgba(62,216,164,.08)}
.tag--d{color:var(--coral);border-color:rgba(255,107,107,.3);background:rgba(255,107,107,.08)}
.ponto{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.45rem;vertical-align:-1px}

/* ---------- Barras ---------- */
.barra{height:7px;background:var(--superficie-2);border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;background:var(--ambar)}
.barra i.ok{background:var(--verde)}
.barra i.estouro{background:var(--coral)}

/* ---------- Alertas ---------- */
.alerta{padding:.6rem .85rem;border-radius:10px;margin-bottom:.9rem;font-size:.9rem;border:1px solid var(--linha)}
.alerta--ok{border-color:rgba(62,216,164,.35);background:rgba(62,216,164,.08);color:var(--verde)}
.alerta--erro{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08);color:var(--coral)}
.alerta--info{border-color:rgba(94,169,255,.3);background:rgba(94,169,255,.08);color:var(--azul)}

.vazio{text-align:center;padding:2.2rem 1rem;color:var(--texto-fraco)}
.vazio h3{color:var(--texto)}

/* ---------- Login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.login__card{width:100%;max-width:380px}
.login__marca{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.6rem;text-align:center;margin-bottom:.2rem}
.login__marca span{color:var(--ambar)}
.login__sub{text-align:center;color:var(--texto-fraco);font-size:.85rem;margin-bottom:1.3rem}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .f4{grid-template-columns:repeat(2,1fr)}
  .f3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .g4,.g3,.g2{grid-template-columns:1fr}
  .f4,.f3,.f2{grid-template-columns:1fr}
  .menu{width:100%;margin-left:0;overflow-x:auto}
  h1{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Impressao ---------- */
@media print{
  body{background:#fff;color:#111}
  .topo,.btn,.acoes-topo{display:none!important}
  .card,.kpi{border:1px solid #ccc;box-shadow:none;background:#fff}
  .fraco,.kpi__rot,th{color:#555}
}