/* =====================================================================
   TEMAS (Configuracoes) — escolhidos pelo usuario, salvos no navegador.
   Padrao = Bronze & Papel (:root no style.css). data-theme sobrescreve.
   ===================================================================== */
[data-theme="petroleo"]{
  --paper:#EAF0F2; --paper-2:#F7FAFB; --card:#fff; --ink:#13242A; --ink-soft:#52666D;
  --line:#D8E3E7; --line-2:#E6EEF0; --navy:#0E3A4A; --navy-2:#16566B;
  --bronze:#2C7E8E; --bronze-2:#369BAD; --bronze-wash:#D8EEF1;
}
[data-theme="esmeralda"]{
  --paper:#ECF2EC; --paper-2:#F8FBF8; --card:#fff; --ink:#15261B; --ink-soft:#4F6056;
  --line:#D9E6DB; --line-2:#E6EFE7; --navy:#13402A; --navy-2:#1B5638;
  --bronze:#2E7D4E; --bronze-2:#3A9A61; --bronze-wash:#DCEFE0;
}
[data-theme="vinho"]{
  --paper:#F3EDEC; --paper-2:#FBF7F6; --card:#fff; --ink:#221819; --ink-soft:#695A5C;
  --line:#E9DAD7; --line-2:#F1E7E5; --navy:#3C1F2B; --navy-2:#52293A;
  --bronze:#8E3B4E; --bronze-2:#A85368; --bronze-wash:#F1DDE2;
}
[data-theme="grafite"]{
  --paper:#13181B; --paper-2:#1B2226; --card:#222A2F; --ink:#E9EEF0; --ink-soft:#9CAAB0;
  --ink-mute:#6C7A80; --line:#2D383D; --line-2:#283134;
  --navy:#26505D; --navy-2:#326576; --bronze:#C99B6A; --bronze-2:#DDB689; --bronze-wash:#2A3239;
  --green:#5FB382; --green-wash:#1C2F25; --amber:#D2A24A; --amber-wash:#322B1B;
  --red:#E0816F; --red-wash:#332220;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
}
[data-theme="grafite"] body{background:#13181B}
[data-theme="grafite"] input,[data-theme="grafite"] select,[data-theme="grafite"] textarea{background:#1B2226;color:var(--ink)}
[data-theme="grafite"] .vtable th,[data-theme="grafite"] .ptable th{background:#1B2226}
[data-theme="grafite"] .panel--import{background:linear-gradient(135deg,#222A2F,#2A3239)}
[data-theme="grafite"] .plan-cenario__head{background:linear-gradient(120deg,#222A2F,#2A3239)}

/* =====================================================================
   DASHBOARD / DEMONSTRATIVO
   ===================================================================== */
.dash{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1.1rem}
.dash .panel{margin:0}
.rings{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:space-around;align-items:center}
.ring{display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center}
.ring svg{display:block}
.ring__track{fill:none;stroke:var(--line);stroke-width:9}
.ring__fill{fill:none;stroke:var(--bronze);stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.ring__fill.ok{stroke:var(--green)}
.ring__pct{font-family:var(--mono);font-weight:500;font-size:15px;fill:var(--ink)}
.ring__lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:600}
.ring__sub{font-size:.74rem;color:var(--ink-soft);font-family:var(--mono)}

.bars{display:flex;flex-direction:column;gap:.7rem}
.bar{display:grid;grid-template-columns:150px 1fr 96px;align-items:center;gap:.7rem}
.bar__name{font-size:.82rem;color:var(--ink-soft)}
.bar__track{height:26px;background:var(--paper);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.bar__fill{height:100%;background:linear-gradient(90deg,var(--navy),var(--bronze));
  border-radius:6px 0 0 6px;transition:width 1s cubic-bezier(.2,.8,.2,1);min-width:2px}
.bar__val{font-family:var(--mono);font-size:.86rem;color:var(--navy);text-align:right}

.timeline{margin-top:.2rem}
.tl-row{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:.6rem;margin:.3rem 0}
.tl-row__lab{font-size:.76rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-track{position:relative;height:16px;background:var(--paper);border-radius:5px;border:1px solid var(--line-2)}
.tl-bar{position:absolute;top:1px;bottom:1px;background:linear-gradient(90deg,var(--bronze),var(--bronze-2));
  border-radius:4px;opacity:.92}
.tl-axis{display:grid;grid-template-columns:160px 1fr;gap:.6rem;margin-top:.35rem;color:var(--ink-soft);
  font-size:.68rem;font-family:var(--mono)}
.tl-axis__ticks{display:flex;justify-content:space-between}

/* =====================================================================
   SIMULADOR
   ===================================================================== */
.sim{display:flex;align-items:flex-end;gap:.7rem;flex-wrap:wrap;background:var(--paper-2);
  border:1px dashed var(--line);border-radius:11px;padding:.9rem 1rem;margin-bottom:.9rem}
.sim .field{margin:0;min-width:210px}
.sim__chips{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.sim__chip{font-size:.76rem;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  border-radius:999px;padding:.35rem .75rem;cursor:pointer}
.sim__chip:hover{border-color:var(--bronze);color:var(--bronze)}
.sim__out{margin-top:.2rem}

/* =====================================================================
   CONFIGURACOES
   ===================================================================== */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.9rem}
.theme-card{border:1px solid var(--line);border-radius:12px;padding:1rem;cursor:pointer;background:var(--card);
  transition:.15s;display:flex;flex-direction:column;gap:.7rem}
.theme-card:hover{border-color:var(--bronze);transform:translateY(-2px);box-shadow:var(--shadow)}
.theme-card.ativo{border-color:var(--bronze);box-shadow:0 0 0 2px var(--bronze) inset}
.theme-card__name{font-weight:600;font-size:.95rem;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--serif)}
.theme-card__name .ok{font-size:.64rem;color:#fff;background:var(--bronze);padding:.12rem .5rem;border-radius:999px}
.sw{display:flex;gap:.35rem}
.sw span{width:30px;height:30px;border-radius:8px;border:1px solid rgba(0,0,0,.1)}

/* =====================================================================
   TOPBAR / MENU MOBILE
   ===================================================================== */
/* excluir cliente na lista lateral */
.clientes li{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.cli-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cli-del{opacity:0;border:none;background:none;color:var(--red);cursor:pointer;font-size:.82rem;
  padding:.1rem .35rem;border-radius:6px;flex-shrink:0;transition:.12s}
.clientes li:hover .cli-del{opacity:.65}
.cli-del:hover{opacity:1;background:var(--red-wash)}

.topbar__left{display:flex;align-items:center;gap:.7rem}
.icon-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:transparent;
  color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem}
.icon-btn:hover{background:var(--paper);color:var(--ink)}
.btn-menu{display:none}
.menu-overlay{display:none}

/* =====================================================================
   RESPONSIVO refinado (sobrescreve o bloco do style.css)
   ===================================================================== */
@media (max-width:1080px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .dash{grid-template-columns:1fr}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr;gap:1rem;padding:1rem .9rem 3rem}
  .btn-menu{display:inline-flex}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:80%;max-width:300px;z-index:70;
    background:var(--paper-2);border-right:1px solid var(--line);padding:1.1rem;overflow:auto;
    transform:translateX(-105%);transition:transform .25s ease}
  body.menu-open .sidebar{transform:none;box-shadow:0 0 70px rgba(0,0,0,.35)}
  body.menu-open .menu-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:65}
  .topbar{padding:.6rem .9rem}
  .topbar .brand__name{display:none}
  .chip{display:none}
  .kpis{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .kpi__value{font-size:1.05rem}
  .regra{grid-template-columns:1fr}
  .regra__right{text-align:left;display:flex;gap:1.6rem;margin-top:.5rem}
  .page-head{flex-direction:column;align-items:stretch;gap:.7rem}
  .page-head__acoes{flex-wrap:wrap}
  .page-head__acoes .btn{flex:1}
  .grid--2{grid-template-columns:1fr}
  .import{flex-direction:column;align-items:stretch;text-align:center}
  .import__icon{margin:0 auto}
  .modal{padding:0}
  .modal__box{width:100%;height:100%;max-height:100vh;border-radius:0}
  .bar{grid-template-columns:1fr;gap:.25rem}
  .bar__val{text-align:left}
  .tl-row,.tl-axis{grid-template-columns:92px 1fr}
  .sim .field{min-width:0;flex:1 1 100%}
}
@media (max-width:460px){
  .kpis{grid-template-columns:1fr 1fr}
  .auth__form h1{font-size:1.4rem}
}