/* ============================================================
   POWERFULL — Sistema de gestão de remapeamento de ECU
   Folha de estilo do protótipo (alta fidelidade)
   Direção: telemetria de corrida — densa, precisa, premium.
   ============================================================ */

/* Tokens, fontes e base ficam em theme.css (re-tematizável via data-theme).
   Este arquivo contém apenas os COMPONENTES (re-tonalizados pelos tokens). */

::selection{ background:var(--petrol); color:#fff; }

/* scrollbar técnica */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:#222b3c; border-radius:10px; border:2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:#2f3ب; background:#2f3a4f; }

/* ============================================================
   TIPOGRAFIA UTIL
   ============================================================ */
.head{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.08em; }
.mono{ font-family:'Share Tech Mono',monospace; }
.chrome-text{
  background:var(--chrome);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,0.5));
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ display:flex; min-height:100vh; }

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,#0c0f17 0%,#090c12 100%);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar-logo{
  padding:22px 20px 18px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.sidebar-logo::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--petrol-line),transparent);
}
.sidebar-logo img{ display:block; width:158px; height:auto; margin:0 auto 8px; }
.sidebar-logo .subtitle{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.14em; font-size:9.5px; text-align:center;
  color:var(--petrol-300); font-weight:500;
}
.nav{ padding:14px 12px; flex:1; overflow-y:auto; }
.nav-group-label{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.16em; font-size:10px; color:var(--text-3);
  padding:14px 10px 7px; font-weight:600;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; margin-bottom:2px;
  border-radius:var(--r); cursor:pointer;
  color:var(--text-2);
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.07em; font-size:14px; font-weight:500;
  border:1px solid transparent;
  transition:background .12s,color .12s,border-color .12s;
  position:relative;
}
.nav-item svg{ width:17px; height:17px; stroke-width:2; color:var(--text-3); transition:color .12s; }
.nav-item:hover{ background:var(--card); color:var(--text); }
.nav-item:hover svg{ color:var(--text-2); }
.nav-item.nav-active{
  background:var(--petrol-tint);
  color:#dbeefc; border-color:var(--petrol-line);
}
.nav-item.nav-active svg{ color:var(--petrol-300); }
.nav-item.nav-active::before{
  content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px;
  background:var(--petrol-300); border-radius:0 3px 3px 0;
}
.sidebar-foot{
  padding:13px 16px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.sidebar-foot .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.sidebar-foot .txt{ font-size:11px; color:var(--text-3); font-family:'Share Tech Mono',monospace; }

/* ---- Main column ---- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.page{ padding:26px 32px 60px; max-width:1320px; width:100%; }

/* ---- Page header ---- */
.page-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-bottom:18px; margin-bottom:24px;
  border-bottom:1px solid var(--border);
}
.page-header h1{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.05em; font-weight:600; font-size:30px;
  margin:0; line-height:1; color:var(--text);
}
.page-header .crumb{
  font-family:'Share Tech Mono',monospace; font-size:11px;
  color:var(--text-3); margin-bottom:7px; letter-spacing:0.04em;
}
.page-header .ph-left{ display:flex; flex-direction:column; }
.user-chip{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:6px 12px 6px 7px;
}
.user-chip .avatar{
  width:30px; height:30px; border-radius:var(--r-sm);
  background:linear-gradient(140deg,var(--petrol-400),var(--petrol-700));
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px;
  color:#eaf6ff; border:1px solid var(--petrol-line);
}
.user-chip .uc-name{ font-weight:600; font-size:13px; line-height:1.15; color:#ffffff; }
.user-chip .uc-role{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.1em; font-size:9.5px; color:var(--petrol-300); font-weight:600;
}

/* ============================================================
   KPI CARDS
   ============================================================ */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.kpi-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.kpi-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:16px 16px 14px;
  position:relative; overflow:hidden;
  transition:border-color .14s, transform .14s, background .14s;
}
.kpi-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:2px;
  background:var(--accent,var(--petrol-400)); opacity:.65;
}
.kpi-card:hover{ border-color:var(--border-2); transform:translateY(-1px); background:var(--card-2); }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.kpi-icon{
  width:34px; height:34px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-tint,var(--petrol-tint));
  border:1px solid var(--accent-line,var(--petrol-line));
}
.kpi-icon svg{ width:18px; height:18px; color:var(--accent,var(--petrol-300)); stroke-width:2; }
.kpi-delta{
  font-family:'Share Tech Mono',monospace; font-size:11.5px;
  display:flex; align-items:center; gap:3px; padding:2px 7px; border-radius:20px;
}
.kpi-delta.up{ color:var(--green-2); background:var(--green-tint); }
.kpi-delta.down{ color:var(--red-2); background:var(--red-tint); }
.kpi-delta.flat{ color:var(--text-3); background:var(--card-3); }
.kpi-delta svg{ width:12px; height:12px; }
.kpi-value{
  font-family:'Share Tech Mono',monospace; font-size:30px; font-weight:400;
  line-height:1; color:var(--text); letter-spacing:-0.5px;
}
/* régua de acento entre o número e o rótulo (mesma vibe dos stat-cards) */
.kpi-value::after{
  content:""; display:block; width:26px; height:2px; border-radius:2px;
  margin:11px 0 9px; background:var(--accent,var(--petrol-400));
  box-shadow:0 0 9px var(--accent,var(--petrol-400)); opacity:.9;
}
.kpi-label{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.13em; font-size:11.5px; color:var(--text); font-weight:600;
}

/* ============================================================
   SECTIONS / CARDS
   ============================================================ */
.section-title{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.1em; font-size:14px; font-weight:600; color:var(--text-2);
  display:flex; align-items:center; gap:9px; margin:0 0 13px;
}
.section-title svg{ width:15px; height:15px; color:var(--petrol-300); }
.section-title .count{
  font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--text-3);
  background:var(--card-2); border:1px solid var(--border); padding:1px 7px; border-radius:20px;
  letter-spacing:0; text-transform:none;
}
.panel{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:18px;
}
.panel.flush{ padding:0; overflow:hidden; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-2-1{ display:grid; grid-template-columns:2fr 1fr; gap:18px; }

/* ============================================================
   TABELAS DENSAS
   ============================================================ */
.am-table-wrap{
  border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; background:var(--card);
}
.am-table{ width:100%; border-collapse:collapse; font-size:13px; }
.am-table thead th{
  background:var(--bg-2); text-align:left;
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.09em; font-size:11px; font-weight:600; color:var(--text-2);
  padding:10px 14px; border-bottom:1px solid var(--border-2);
  white-space:nowrap; position:sticky; top:0; z-index:1;
}
.am-table tbody td{
  padding:9px 14px; border-bottom:1px solid var(--border);
  color:var(--text); vertical-align:middle;
}
.am-table tbody tr:last-child td{ border-bottom:none; }
.am-table tbody tr:nth-child(even){ background:rgba(255,255,255,0.014); }
.am-table tbody tr:hover{ background:var(--petrol-tint); }
.am-table td.num, .am-table th.num{ text-align:right; font-family:'Share Tech Mono',monospace; }
.am-table td.center, .am-table th.center{ text-align:center; }
.am-table .mono{ font-family:'Share Tech Mono',monospace; font-size:12.5px; color:var(--text); }
.am-table .dim{ color:var(--text-2); }
.cell-id{ font-family:'Share Tech Mono',monospace; color:var(--text-3); font-size:12px; }
.cell-plate{
  font-family:'Share Tech Mono',monospace; font-size:12.5px;
  background:var(--card-3); border:1px solid var(--border-2); border-radius:3px;
  padding:1px 7px; letter-spacing:1px; color:var(--text); display:inline-block;
}
.money{ font-family:'Share Tech Mono',monospace; }
.money.pos{ color:var(--green-2); }
.money.neg{ color:var(--red-2); }
.money.final{ color:var(--text); font-weight:400; }
.disc-pill{
  font-family:'Share Tech Mono',monospace; font-size:11.5px;
  color:var(--amber); background:var(--amber-tint); border:1px solid rgba(245,158,11,0.3);
  padding:1px 7px; border-radius:20px;
}
.disc-zero{ color:var(--text-3); font-family:'Share Tech Mono',monospace; font-size:12px; }

/* badges-cell: vários badges inline */
.badge-cell{ display:flex; flex-wrap:wrap; gap:4px; max-width:240px; }

/* row actions inline */
.row-actions{ display:flex; gap:5px; justify-content:flex-end; }
.icon-btn{
  width:28px; height:28px; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--card-2); border:1px solid var(--border-2); color:var(--text-2);
  cursor:pointer; transition:all .12s;
}
.icon-btn svg{ width:14px; height:14px; stroke-width:2; }
.icon-btn:hover{ background:var(--card-3); color:var(--text); border-color:#3a455c; }
.icon-btn.danger:hover{ background:var(--red-tint); color:var(--red-2); border-color:rgba(239,68,68,0.4); }
.icon-btn.go:hover{ background:var(--action-tint); color:var(--action); border-color:rgba(46,144,217,0.4); }

/* ============================================================
   BADGES — tipos de mapa
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:4px;
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.05em; font-size:11px; font-weight:600;
  padding:2px 7px; border-radius:3px; line-height:1.45;
  border:1px solid transparent; white-space:nowrap;
}
/* Stages — azul crescente */
.badge-stage1{ color:#7cc4f0; background:rgba(46,144,217,0.10); border-color:rgba(46,144,217,0.30); }
.badge-stage2{ color:#5db4f2; background:rgba(46,144,217,0.16); border-color:rgba(46,144,217,0.45); }
.badge-stage3{ color:#cfe9fb; background:rgba(46,144,217,0.30); border-color:rgba(46,144,217,0.65); }
/* Emissões OFF — âmbar/laranja */
.badge-emis{ color:#fbbf52; background:var(--amber-tint); border-color:rgba(245,158,11,0.32); }
.badge-emis2{ color:#fb9a4b; background:rgba(249,115,22,0.13); border-color:rgba(249,115,22,0.34); }
/* Potência — verde */
.badge-power{ color:#43d6a0; background:var(--green-tint); border-color:rgba(16,185,129,0.32); }
/* Aspirado — cinza */
.badge-aspir{ color:#9fb0c4; background:var(--slate-tint); border-color:rgba(100,116,139,0.4); }
/* Flex/Pops/Hardcut — roxo */
.badge-special{ color:#b69bf7; background:var(--purple-tint); border-color:rgba(139,92,246,0.34); }
/* badges genéricos (perfis etc) */
.badge-blue{ color:var(--action); background:var(--action-tint); border-color:rgba(46,144,217,0.34); }
.badge-petrol{ color:var(--petrol-300); background:var(--petrol-tint); border-color:var(--petrol-line); }
.badge-green{ color:var(--green-2); background:var(--green-tint); border-color:rgba(16,185,129,0.32); }
.badge-orange{ color:var(--orange); background:rgba(249,115,22,0.13); border-color:rgba(249,115,22,0.32); }
.badge-purple{ color:#b69bf7; background:var(--purple-tint); border-color:rgba(139,92,246,0.34); }
.badge-gray{ color:var(--text-2); background:var(--slate-tint); border-color:rgba(100,116,139,0.4); }
.badge-red{ color:var(--red-2); background:var(--red-tint); border-color:rgba(239,68,68,0.34); }
.badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.07em; font-size:14px; font-weight:600;
  padding:9px 16px; border-radius:var(--r); cursor:pointer;
  border:1px solid transparent; transition:all .13s; line-height:1; white-space:nowrap;
}
.btn svg{ width:15px; height:15px; stroke-width:2.2; }
.btn-primary{ background:var(--action); color:#fff; border-color:var(--action); box-shadow:0 2px 10px rgba(42,147,171,0.25); }
.btn-primary:hover{ background:var(--action-h); border-color:var(--action-h); }
.btn-secondary{ background:var(--card-2); color:var(--text); border-color:var(--border-2); }
.btn-secondary:hover{ background:var(--card-3); border-color:#3a455c; }
.btn-danger{ background:transparent; color:var(--red-2); border-color:rgba(239,68,68,0.45); }
.btn-danger:hover{ background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 2px 14px rgba(239,68,68,0.35); }
.btn-danger-solid{ background:var(--red); color:#fff; border-color:var(--red); }
.btn-danger-solid:hover{ background:#dc2626; }
.btn-ghost{ background:transparent; color:var(--text-2); border-color:transparent; }
.btn-ghost:hover{ background:var(--card-2); color:var(--text); }
.btn[disabled],.btn.disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }
.btn-sm{ padding:6px 11px; font-size:12.5px; }
.btn-block{ width:100%; }

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:15px; }
.field label{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.08em; font-size:11px; font-weight:600; color:var(--text-2);
  display:flex; align-items:center; gap:6px;
}
.field label .req{ color:var(--action); }
.input, .select, textarea.input{
  background:var(--bg-2); border:1px solid var(--border-2); border-radius:var(--r);
  color:var(--text); font-family:'Barlow',sans-serif; font-size:14px;
  padding:9px 12px; width:100%; transition:border-color .13s, box-shadow .13s;
  outline:none;
}
.input::placeholder{ color:var(--text-3); }
.input:focus, .select:focus, textarea.input:focus{
  border-color:var(--petrol-400); box-shadow:0 0 0 3px var(--petrol-tint);
}
.input.mono{ font-family:'Share Tech Mono',monospace; }
textarea.input{ resize:vertical; min-height:74px; line-height:1.5; }
.select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:34px;
}
/* campo de valor R$ */
.money-input{ position:relative; }
.money-input .prefix{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-family:'Share Tech Mono',monospace; color:var(--text-2); font-size:14px; pointer-events:none;
}
.money-input .input{ padding-left:38px; font-family:'Share Tech Mono',monospace; }
.field .hint{ font-size:11.5px; color:var(--text-3); }
.field .error-msg{ font-size:11.5px; color:var(--red-2); display:flex; align-items:center; gap:5px; }
.field.has-error .input{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-tint); }

/* multi-select chips (tipos de mapa) */
.chip-select{ display:flex; flex-wrap:wrap; gap:7px; }
.chip-opt{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.05em;
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--r);
  border:1px solid var(--border-2); background:var(--bg-2); color:var(--text-2);
  cursor:pointer; transition:all .12s; user-select:none;
}
.chip-opt:hover{ border-color:#3a455c; color:var(--text); }
.chip-opt.on{ background:var(--petrol-tint); border-color:var(--petrol-line); color:#dbeefc; }
.chip-opt.on::before{ content:"✓  "; color:var(--petrol-300); }

/* file uploader */
.uploader{
  border:1.5px dashed var(--border-2); border-radius:var(--r);
  background:var(--bg-2); padding:18px; text-align:center; cursor:pointer; transition:all .14s;
}
.uploader:hover{ border-color:var(--petrol-400); background:var(--petrol-tint); }
.uploader svg{ width:22px; height:22px; color:var(--text-3); margin-bottom:6px; }
.uploader .up-main{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:13px; color:var(--text-2); font-weight:600; }
.uploader .up-sub{ font-size:11px; color:var(--text-3); font-family:'Share Tech Mono',monospace; margin-top:3px; }
.file-pill{
  display:flex; align-items:center; gap:8px; background:var(--card-2); border:1px solid var(--border-2);
  border-radius:var(--r); padding:7px 11px; font-family:'Share Tech Mono',monospace; font-size:12px; margin-top:8px;
}
.file-pill svg{ width:14px; height:14px; color:var(--green-2); }
.file-pill .fp-x{ margin-left:auto; color:var(--text-3); cursor:pointer; }

.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.form-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 18px; }
.form-divider{ height:1px; background:var(--border); margin:6px 0 20px; }
.form-section-h{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.1em;
  font-size:12px; color:var(--petrol-300); font-weight:600; margin:4px 0 14px;
  display:flex; align-items:center; gap:8px;
}
.form-section-h::after{ content:""; flex:1; height:1px; background:var(--border); }

/* ============================================================
   ABAS (tabs)
   ============================================================ */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:22px; }
.tab{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.07em;
  font-size:14px; font-weight:600; color:var(--text-2); padding:11px 18px; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s, border-color .12s;
  display:flex; align-items:center; gap:8px;
}
.tab svg{ width:15px; height:15px; }
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--text); border-bottom-color:var(--petrol-300); }

/* ============================================================
   FILTROS
   ============================================================ */
.filter-bar{
  display:flex; gap:11px; align-items:center; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:12px 14px; margin-bottom:20px;
}
.search-box{ position:relative; flex:1; min-width:240px; }
.search-box svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-3); }
.search-box .input{ padding-left:36px; }
.filter-bar .select{ width:auto; min-width:150px; }
.filter-bar .sp{ flex:1; }

/* ============================================================
   LISTA RICA (oficinas)
   ============================================================ */
.of-row{
  display:grid; grid-template-columns:auto 1.6fr 1.2fr 1fr 90px 130px;
  gap:16px; align-items:center; padding:14px 18px;
  border-bottom:1px solid var(--border); transition:background .12s;
}
.of-row:hover{ background:var(--petrol-tint); }
.of-row:last-child{ border-bottom:none; }
.of-code{
  font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--petrol-300);
  background:var(--petrol-tint); border:1px solid var(--petrol-line);
  border-radius:var(--r-sm); padding:4px 9px; letter-spacing:1px;
}
.of-name{ font-weight:600; font-size:14.5px; color:var(--text); }
.of-sub{ font-size:12px; color:var(--text-3); font-family:'Share Tech Mono',monospace; margin-top:2px; }
.of-resp{ font-size:13.5px; color:var(--text); }
.of-resp .of-sub{ color:var(--text-3); }
.of-count{ font-family:'Share Tech Mono',monospace; font-size:18px; color:var(--text); text-align:center; }
.of-count small{ display:block; font-family:'Barlow Condensed',sans-serif; font-size:9.5px; letter-spacing:0.1em; color:var(--text-3); text-transform:uppercase; }
.of-rev{ font-family:'Share Tech Mono',monospace; font-size:15px; color:var(--green-2); text-align:right; }

/* ============================================================
   GRÁFICOS (placeholder CSS — Plotly no real)
   ============================================================ */
.chart{ display:flex; align-items:flex-end; gap:10px; height:220px; padding:10px 4px 0; }
.chart .bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.chart .bar{
  width:100%; max-width:46px; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--petrol-300),var(--petrol-700));
  position:relative; transition:filter .15s; min-height:4px;
}
.chart .bar:hover{ filter:brightness(1.25); }
.chart .bar.accent{ background:linear-gradient(180deg,var(--action),#1a5a8a); }
.chart .bar-val{ font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--text-2); }
.chart .bar-lbl{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:11px; color:var(--text-3); }
.chart-note{ font-family:'Share Tech Mono',monospace; font-size:10.5px; color:var(--text-3); text-align:right; margin-top:4px; }

/* line/area chart placeholder */
.area-chart{ height:200px; position:relative; border-left:1px solid var(--border-2); border-bottom:1px solid var(--border-2); margin:8px 0; }

/* ============================================================
   MODAL (st.dialog)
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(4,6,10,0.72); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:24px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--card); border:1px solid var(--border-2); border-radius:var(--r-lg);
  width:100%; max-width:520px; box-shadow:var(--shadow-lg); overflow:hidden;
  max-height:90vh; display:flex; flex-direction:column;
}
.modal.wide{ max-width:680px; }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.modal-head h3{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.06em;
  font-size:19px; font-weight:600; margin:0; display:flex; align-items:center; gap:9px;
}
.modal-head h3 svg{ width:18px; height:18px; color:var(--petrol-300); }
.modal-head.danger{ background:linear-gradient(180deg,rgba(239,68,68,0.18),rgba(239,68,68,0.05)); border-bottom-color:rgba(239,68,68,0.35); }
.modal-head.danger h3 svg{ color:var(--red-2); }
.modal-x{ width:30px; height:30px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; color:var(--text-3); cursor:pointer; }
.modal-x:hover{ background:var(--card-2); color:var(--text); }
.modal-x svg{ width:17px; height:17px; }
.modal-body{ padding:20px; overflow-y:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); background:var(--bg-2); }

/* ============================================================
   ESTADOS ESPECIAIS
   ============================================================ */
.empty{
  text-align:center; padding:54px 20px; color:var(--text-3);
}
.empty .empty-art{
  font-family:'Share Tech Mono',monospace; font-size:13px; line-height:1.55;
  color:var(--border-2); white-space:pre; margin-bottom:18px; user-select:none;
}
.empty .empty-title{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:17px; color:var(--text-2); font-weight:600; margin-bottom:6px; }
.empty .empty-sub{ font-size:13px; color:var(--text-3); margin-bottom:18px; }

/* toasts */
.toast-stack{ position:fixed; bottom:22px; right:22px; display:flex; flex-direction:column; gap:10px; z-index:120; }
.toast{
  display:flex; align-items:center; gap:11px; min-width:280px;
  background:var(--card-2); border:1px solid var(--border-2); border-left-width:3px;
  border-radius:var(--r); padding:12px 15px; box-shadow:var(--shadow);
  font-size:13px; color:var(--text);
}
.toast svg{ width:18px; height:18px; flex:0 0 18px; }
.toast.success{ border-left-color:var(--green); } .toast.success svg{ color:var(--green-2); }
.toast.error{ border-left-color:var(--red); } .toast.error svg{ color:var(--red-2); }
.toast.warn{ border-left-color:var(--amber); } .toast.warn svg{ color:var(--amber); }
.toast .t-sub{ color:var(--text-3); font-size:11.5px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-screen{
  position:fixed; inset:0; z-index:200;
  background:radial-gradient(120% 90% at 50% -10%, #0e1626 0%, var(--bg) 55%);
  display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden;
}
.login-grid-bg{
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(60% 50% at 50% 40%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(60% 50% at 50% 40%,#000 0%,transparent 75%);
}
.login-card{
  position:relative; width:100%; max-width:380px;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--border-2); border-radius:var(--r-lg);
  padding:34px 32px 22px; box-shadow:var(--shadow-lg);
}
.login-card::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:linear-gradient(90deg,transparent,var(--petrol-line),transparent);
}
.login-logo{ display:block; width:188px; height:auto; margin:0 auto 10px; }
.login-sub{
  text-align:center; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:0.16em; font-size:11px; color:var(--petrol-300); font-weight:500; margin-bottom:20px;
}
.login-divider{ height:1px; background:var(--border); margin:0 -4px 20px; }
.login-foot{
  display:flex; justify-content:space-between; align-items:center; margin-top:18px;
  font-size:11px; color:var(--text-3);
}
.login-foot span:first-child{ cursor:pointer; color:var(--action); }
.login-foot span:first-child:hover{ text-decoration:underline; }
.login-foot .mono{ font-family:'Share Tech Mono',monospace; }

/* mix bars (dashboard) */
.mixrow{ display:grid; grid-template-columns:120px 1fr 34px; gap:10px; align-items:center; }
.mixbar{ height:7px; background:var(--bg-2); border-radius:20px; overflow:hidden; }
.mixbar span{ display:block; height:100%; background:var(--petrol-300); border-radius:20px; }
.mixn{ font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--text-2); text-align:right; }

/* ============================================================
   DESIGN SYSTEM PAGE
   ============================================================ */
.ds-block{ margin-bottom:30px; }
.ds-sw-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ds-sw{ display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:10px 12px; }
.ds-sw-chip{ width:38px; height:38px; border-radius:var(--r); border:1px solid var(--border-2); flex:0 0 38px; }
.ds-sw-name{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:12px; font-weight:600; color:var(--text); }
.ds-sw-val{ font-size:11px; color:var(--text-3); }
.ds-type{ padding:14px 0; border-bottom:1px solid var(--border); }
.ds-type:last-child{ border-bottom:none; }
.ds-type-lbl{ font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--text-3); margin-bottom:8px; }

/* ============================================================
   FILTRO ATIVO — chips removíveis + "ver todos"
   ============================================================ */
.filter-status{ display:none; align-items:center; gap:9px; flex-wrap:wrap; margin:-8px 0 18px; }
.fs-count{ font-size:11.5px; color:var(--text-3); }
.fchip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--petrol-tint); border:1px solid var(--petrol-line); color:#dbeefc;
  border-radius:20px; padding:4px 6px 4px 11px; font-size:12px;
}
.fchip i{ width:13px; height:13px; cursor:pointer; color:var(--petrol-300); border-radius:50%; }
.fchip i:hover{ color:#fff; background:rgba(255,255,255,0.12); }

/* ============================================================
   MAPA DE CONCENTRAÇÃO POR REGIÃO (bolhas)
   ============================================================ */
.regmap{
  position:relative; height:300px; margin-top:4px; border-radius:var(--r);
  background:
    radial-gradient(60% 60% at 52% 55%, rgba(26,95,122,0.10), transparent 70%),
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:auto, 34px 34px, 34px 34px;
  border:1px solid var(--border); overflow:hidden;
}
.regbubble{
  position:absolute; transform:translate(-50%,-50%); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:radial-gradient(circle at 38% 32%, rgba(74,158,192,calc(var(--op))), rgba(19,76,99,calc(var(--op) * 0.9)));
  border:1px solid var(--petrol-300); color:#eaf6ff; cursor:default;
  box-shadow:0 0 0 6px rgba(26,95,122,0.08), 0 6px 18px rgba(0,0,0,0.4);
  transition:transform .14s;
}
.regbubble:hover{ transform:translate(-50%,-50%) scale(1.06); }
.regbubble.empty{
  background:transparent; border:1.5px dashed var(--border-2); color:var(--text-3);
  box-shadow:none;
}
.rb-sigla{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.04em; line-height:1; }
.rb-n{ font-family:'Share Tech Mono',monospace; font-size:13px; line-height:1; }

/* ============================================================
   RELATÓRIOS — legenda de faixas + tabela editável
   ============================================================ */
.tier-legend{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:10px 14px; margin-bottom:18px; font-size:12.5px; color:var(--text-2);
}
.tier-legend .tl-label{ font-size:11px; color:var(--text-3); letter-spacing:0.09em; margin-right:4px; }
.tier-legend .tl-item{ display:inline-flex; align-items:center; gap:6px; }
.tier-legend .tl-sep{ color:var(--border-2); }
.tier-legend .tl-hint{ font-size:11px; color:var(--text-3); }
.tier-legend .sp{ flex:1; }

.rep-table thead th{ position:static; }
.exp-btn{ width:24px; height:24px; border-radius:var(--r-sm); background:var(--card-2); border:1px solid var(--border-2);
  color:var(--text-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.exp-btn:hover{ background:var(--card-3); color:var(--text); }
.exp-btn i{ width:14px; height:14px; transition:transform .15s; }
.exp-btn i.rot{ transform:rotate(90deg); color:var(--petrol-300); }
.rep-main.open{ background:var(--petrol-tint) !important; }
.rep-main.open td{ border-bottom-color:var(--petrol-line); }

.pct-wrap{ display:inline-flex; align-items:center; gap:4px; justify-content:center;
  font-family:'Share Tech Mono',monospace; color:var(--text-2); }
.pct-input{
  width:50px; text-align:right; background:var(--bg-2); border:1px solid var(--border-2);
  border-radius:var(--r-sm); color:var(--text); font-family:'Share Tech Mono',monospace; font-size:13px;
  padding:4px 6px; outline:none; -moz-appearance:textfield;
}
.pct-input::-webkit-outer-spin-button,.pct-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pct-input:focus{ border-color:var(--petrol-400); box-shadow:0 0 0 3px var(--petrol-tint); }
.pct-input.manual{ border-color:rgba(245,158,11,0.5); color:var(--amber); }
.pct-tag{ font-size:9px; color:var(--amber); text-transform:uppercase; letter-spacing:0.08em; text-align:center; margin-top:2px; }
.pct-reset{ width:13px; height:13px; cursor:pointer; color:var(--text-3); }
.pct-reset:hover{ color:var(--action); }

.rep-sub{ background:var(--bg-2) !important; }
.rep-sub td{ padding-top:7px; padding-bottom:7px; border-bottom:1px solid var(--border); font-size:12.5px; }
.rep-sub-name{ color:var(--text-2); }
.rep-sub .badge-cell{ justify-content:center; }
.rep-foot td{ background:var(--bg-2); border-top:1px solid var(--border-2); font-weight:600; padding-top:11px; padding-bottom:11px; }

/* catálogo — input de preço inline na tabela */
.money-input.inline{ display:inline-block; width:148px; }
.money-input.inline .input{ text-align:right; padding-top:6px; padding-bottom:6px; }

/* ============================================================
   MENU DO USUÁRIO (dropdown no canto sup. direito)
   ============================================================ */
.ph-right{ display:flex; align-items:center; gap:12px; }
.user-menu{ position:relative; }
.user-chip{ cursor:pointer; font-family:inherit; }
.user-chip .uc-info{ text-align:left; }
.uc-caret{ width:15px; height:15px; color:var(--text-3); transition:transform .16s; margin-left:1px; }
.user-menu.open .uc-caret{ transform:rotate(180deg); }
.user-menu.open .user-chip{ border-color:var(--petrol-line); }
.user-dropdown{
  position:absolute; right:0; top:calc(100% + 7px); min-width:200px; z-index:90;
  background:var(--card-2); border:1px solid var(--border-2); border-radius:var(--r);
  box-shadow:var(--shadow); padding:5px; display:none;
}
.user-menu.open .user-dropdown{ display:block; }
.udrop-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px;
  background:transparent; border:none; color:var(--text-2); cursor:pointer; border-radius:var(--r-sm);
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:13.5px; font-weight:600; text-align:left;
}
.udrop-item svg{ width:16px; height:16px; }
.udrop-item:hover{ background:var(--card-3); color:var(--text); }
.udrop-item.danger:hover{ background:var(--red-tint); color:var(--red-2); }
.udrop-sep{ height:1px; background:var(--border); margin:4px 6px; }

/* ============================================================
   SEGMENTED TOGGLE (Cidade / Estado / Região)
   ============================================================ */
.seg-toggle{ display:inline-flex; background:var(--bg-2); border:1px solid var(--border-2); border-radius:var(--r); padding:2px; gap:2px; }
.seg{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:12.5px; font-weight:600;
  color:var(--text-3); background:transparent; border:none; padding:5px 13px; border-radius:var(--r-sm); cursor:pointer; transition:all .12s; }
.seg:hover{ color:var(--text-2); }
.seg.active{ background:var(--petrol-tint); color:#dbeefc; box-shadow:inset 0 0 0 1px var(--petrol-line); }

/* distribuição geográfica — ranking de barras */
.geo-bars{ display:flex; flex-direction:column; gap:9px; margin-top:8px; }
.geo-row{ display:grid; grid-template-columns:26px minmax(140px,1.3fr) 2fr 42px 74px; gap:12px; align-items:center; }
.geo-rank{ font-size:11px; color:var(--text-3); }
.geo-name{ font-weight:600; font-size:13.5px; color:var(--text); }
.geo-uf{ color:var(--text-3); font-size:11px; margin-left:5px; font-weight:500; }
.geo-track{ height:8px; background:var(--bg-2); border-radius:20px; overflow:hidden; }
.geo-track span{ display:block; height:100%; background:linear-gradient(90deg,var(--petrol-700),var(--petrol-300)); border-radius:20px; }
.geo-serv{ text-align:right; font-size:13px; color:var(--text-2); }
.geo-fat{ text-align:right; font-size:12.5px; color:var(--green-2); }

/* barra do mês atual — realce DENTRO da paleta petróleo */
.chart .bar.current{ background:linear-gradient(180deg,#7cc4e3,var(--petrol-400)); box-shadow:inset 0 0 0 1px var(--petrol-300); }

/* linhas clicáveis */
.am-table tbody tr.clickable{ cursor:pointer; }

/* ============================================================
   DETALHE DO SERVIÇO (popup)
   ============================================================ */
.dl-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:13px; }
.dl-veic{ font-size:18px; font-weight:600; line-height:1.2; }
.dl-badges{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px; }
.dl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:16px; }
.dl-row{ background:var(--card); padding:9px 13px; display:flex; flex-direction:column; gap:2px; }
.dl-lbl{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:10px; color:var(--text-3); }
.dl-val{ font-size:13.5px; color:var(--text); }
.dl-val .of-sub{ display:inline; }
.dl-money{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r); padding:4px 14px; }
.dlm{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.dlm:last-child{ border-bottom:none; }
.dlm-lbl{ color:var(--text-2); font-size:13px; }
.dlm-lbl i{ color:var(--amber); font-style:normal; font-size:11px; }
.dlm-v{ font-size:14px; }
.dlm.total .dlm-v{ font-size:18px; }

/* select compacto (ex: filtro de período no gráfico) */
.select-sm{ width:auto; min-width:0; padding:5px 30px 5px 11px; font-size:12.5px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.05em; background-position:right 9px center; }

/* misc */
.spacer-16{ height:16px; } .spacer-24{ height:24px; }
.muted{ color:var(--text-3); }
.tag-soft{ font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--text-3); }
.divider-h{ height:1px; background:var(--border); margin:22px 0; }
.note-callout{
  background:var(--petrol-tint); border:1px solid var(--petrol-line); border-radius:var(--r);
  padding:11px 14px; font-size:12.5px; color:var(--petrol-300); display:flex; gap:9px; align-items:flex-start;
}
.note-callout svg{ width:16px; height:16px; flex:0 0 16px; margin-top:1px; }

/* ============================================================
   ░░  POLISH PASS — atmosfera, profundidade, navegação, motion
   ░░  (camada de refinamento; sobrepõe as regras acima)
   ============================================================ */

/* Atmosfera global movida para theme.css (depende do tema). */
.main{ position:relative; }

/* — Transição de página: fade-up discreto ao navegar — */
@media (prefers-reduced-motion:no-preference){
  .page-view{ animation:pageIn .30s cubic-bezier(.2,.8,.2,1); }
  @keyframes pageIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
}

/* — Sidebar: mais profundidade + estado ativo com lavagem petróleo — */
.sidebar{ box-shadow:inset -1px 0 0 rgba(255,255,255,0.02); }
.sidebar-logo img{ filter:drop-shadow(0 2px 10px rgba(0,0,0,0.5)); }
.nav-item{ transition:background .14s, color .14s, border-color .14s, transform .1s; }
.nav-item:hover{ transform:translateX(1px); }
.nav-item.nav-active{
  background:linear-gradient(90deg, var(--petrol-tint), rgba(26,95,122,0.04) 80%);
}
.nav-item.nav-active::before{ box-shadow:0 0 10px var(--petrol-300); }

/* — KPI cards: gradiente interno, top-accent com glow, hover mais rico — */
.kpi-card{
  background:linear-gradient(180deg, var(--card) 0%, var(--card-deep) 100%);
  transition:border-color .16s, transform .16s, box-shadow .16s, background .16s;
}
.kpi-card::before{ box-shadow:0 0 14px var(--accent, var(--petrol-400)); }
.kpi-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,0.36);
  border-color:var(--border-2);
}
.kpi-value{ text-shadow:0 1px 0 rgba(0,0,0,0.4); }

/* — Painéis e tabelas: hairline superior sutil para dar relevo — */
.panel{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.025); }
.am-table-wrap{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.025); }
.am-table thead th{ background:linear-gradient(180deg, var(--th-grad-top), var(--bg-2)); }

/* — Botões: leve gradiente no primário, press state, foco acessível — */
.btn-primary{ background:linear-gradient(180deg, var(--action-300), var(--action)); box-shadow:0 2px 12px rgba(42,147,171,0.28), inset 0 1px 0 rgba(255,255,255,0.16); }
.btn-primary:hover{ background:linear-gradient(180deg, #4fbcd2, var(--action-h)); }
.btn:active{ transform:translateY(1px); }
.icon-btn:active{ transform:translateY(1px); }
.btn:focus-visible, .icon-btn:focus-visible, .seg:focus-visible{ outline:2px solid var(--petrol-300); outline-offset:2px; }

/* — Inputs: foco com anel petróleo mais presente — */
.input:focus, .select:focus, textarea.input:focus, .pct-input:focus{
  box-shadow:0 0 0 3px var(--petrol-tint), 0 0 0 1px var(--petrol-400);
}

/* — Modal: entrada com fade + escala; overlay com blur mais limpo — */
@media (prefers-reduced-motion:no-preference){
  .modal{ transform:translateY(10px) scale(.985); opacity:0; transition:transform .24s cubic-bezier(.2,.85,.25,1), opacity .24s; }
  .modal-overlay.open .modal{ transform:none; opacity:1; }
}
.modal{ box-shadow:0 24px 70px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.04); }
.modal-head{ background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }

/* — Dropdown do usuário: animação suave em vez de display none/block — */
.user-dropdown{
  display:block; visibility:hidden; opacity:0; transform:translateY(-7px) scale(.98);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.user-menu.open .user-dropdown{ visibility:visible; opacity:1; transform:none; }
.user-chip{ transition:border-color .14s, background .14s; }
.user-chip:hover{ background:var(--card-2); border-color:var(--border-2); }

/* — Toast: deslize de entrada — */
@media (prefers-reduced-motion:no-preference){
  .toast{ animation:toastIn .28s cubic-bezier(.2,.85,.25,1); }
  @keyframes toastIn{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }
}

/* — Barras de gráfico/geo: brilho no topo ao passar o mouse — */
.chart .bar{ transition:filter .15s, box-shadow .15s; }
.chart .bar:hover{ box-shadow:0 -2px 14px rgba(74,158,192,0.4); }
.geo-track span{ box-shadow:0 0 10px rgba(74,158,192,0.25); }

/* — Badges: cohesão — mesma respiração de borda/realce — */
.badge{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); }

/* — Login: brilho da marca + foco no card — */
.login-logo{ filter:drop-shadow(0 4px 22px rgba(26,95,122,0.4)); }
.login-card{ box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.03), 0 0 60px rgba(26,95,122,0.10); }

/* — Chrome hairline decorativo nos títulos de seção principais — */
.kpi-value.chrome-text{ filter:drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }

/* — Scrollbar mais discreta no tom petróleo — */
::-webkit-scrollbar-thumb{ background:#1c2738; }
::-webkit-scrollbar-thumb:hover{ background:#27384d; }