:root{
  --red:#002D57;
  --red-dark:#001E3D;
  --bg:#F3F4F6;
  --card:#FFFFFF;
  --border:#E7E8EC;
  --text:#1B1D23;
  --text-muted:#7A7E88;
  --text-soft:#A3A7B0;
  --green:#3685C7;
  --sidebar-w:264px;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,20,30,.04), 0 1px 8px rgba(20,20,30,.04);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}
a{text-decoration:none;color:inherit;}
::-webkit-scrollbar{height:8px;width:8px;}
::-webkit-scrollbar-thumb{background:#D7D9DE;border-radius:8px;}

/* ---------- LAYOUT ---------- */
.app{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);
  background:#fff;
  border-right:1px solid var(--border);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.brand{
  display:flex;align-items:center;gap:0;
  padding:0;
  border-bottom:1px solid var(--border);
}
.brand img.brand-logo{width:100%;height:auto;max-height:70px;object-fit:cover;display:block;}

.nav{padding:10px 10px 24px 10px;}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;
  margin:2px 0;
  border-radius:8px;
  color:var(--text-muted);
  font-size:15.5px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .12s, color .12s;
}
.nav-item svg{width:18px;height:18px;flex-shrink:0;}
.nav-item:hover{background:#F6F1F1;color:var(--text);}
.nav-item.active{background:var(--red);color:#fff;font-weight:600;}
.nav-item.active svg{stroke:#fff;}

/* Main */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}

/* Topbar */
.topbar{
  height:64px;
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;
  padding:0 24px;
  position:sticky;top:0;z-index:20;
}
.burger{cursor:pointer;color:var(--text-muted);display:flex;}
.search{
  flex:1;max-width:420px;
  display:flex;align-items:center;gap:8px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:9px;
  padding:8px 12px;
  color:var(--text-soft);
}
.search input{border:none;background:transparent;outline:none;flex:1;font-size:13px;color:var(--text);}
.search kbd{font-size:11px;background:#fff;border:1px solid var(--border);border-radius:5px;padding:2px 6px;color:var(--text-soft);}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:18px;}
.icon-btn{position:relative;color:var(--text-muted);cursor:pointer;display:flex;}
.icon-btn .badge{
  position:absolute;top:-7px;right:-8px;
  background:var(--red);color:#fff;
  font-size:10px;font-weight:700;
  border-radius:20px;min-width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;
}
.fab-add{
  background:var(--red);color:#fff;border:none;
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:19px;
}
.user{display:flex;align-items:center;gap:10px;cursor:pointer;}
.user img{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.user .u-name{font-size:13px;font-weight:600;line-height:1.1;}
.user .u-role{font-size:11px;color:var(--text-soft);}

/* Content */
.content{padding:20px 24px 40px 24px;display:flex;flex-direction:column;gap:18px;}

/* KPI row */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
@media(max-width:1400px){.kpis{grid-template-columns:repeat(4,1fr);}}
.kpi-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:8px;
}
.kpi-top{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:12.3px;}
.kpi-icon{width:26px;height:26px;border-radius:7px;background:#FCE9EA;color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.kpi-icon svg{width:14px;height:14px;}
.kpi-value{font-size:19px;font-weight:700;letter-spacing:-.2px;}
.kpi-sub{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-soft);}
.kpi-sub .up{color:var(--green);font-weight:700;display:flex;align-items:center;gap:2px;}
.kpi-progress{height:5px;background:#EFEFF2;border-radius:6px;overflow:hidden;margin-top:2px;}
.kpi-progress > div{height:100%;background:var(--red);border-radius:6px;}

/* Panels row */
.panels{display:grid;grid-template-columns:1.05fr 1.3fr 1.05fr 0.9fr;gap:8px;align-items:stretch;}
@media(max-width:1300px){.panels{grid-template-columns:1fr 1fr;}}
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 16px 18px 16px;display:flex;flex-direction:column;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.panel-head h3{margin:0;font-size:14px;font-weight:700;}
.select-mini{
  font-size:11.5px;color:var(--text-muted);border:1px solid var(--border);
  border-radius:7px;padding:5px 8px;background:#fff;cursor:pointer;
}

/* Funnel */
.funnel{display:flex;flex-direction:column;gap:2px;flex:1;justify-content:center;}
.funnel-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.funnel-row:last-child{margin-bottom:0;}
.funnel-bar{
  height:30px;border-radius:4px;
  display:flex;align-items:center;color:#fff;font-size:11.5px;font-weight:600;padding:0 10px;
  transition:width .3s;
}
.funnel-label{width:120px;font-size:12px;color:var(--text-muted);text-align:right;flex-shrink:0;}
.funnel-value{min-width:44px;width:auto;font-size:12px;font-weight:700;text-align:right;flex-shrink:0;white-space:nowrap;}
.funnel-row{ overflow: hidden; }
.funnel-row .funnel-bar{ min-width: 0; flex-shrink: 1; }
.funnel-foot{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-muted);}
.funnel-foot b{color:var(--text);font-size:14px;}

/* Ranking */
.rank-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F2F2F4;}
.rank-row:last-child{border-bottom:none;}
.rank-num{width:16px;font-size:12px;color:var(--text-soft);font-weight:700;}
.rank-row img{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.rank-info{flex:1;min-width:0;}
.rank-name{font-size:12.5px;font-weight:600;}
.rank-bar{height:4px;background:#F0F0F2;border-radius:4px;margin-top:5px;overflow:hidden;}
.rank-bar>div{height:100%;background:var(--red);border-radius:4px;}
.rank-value{font-size:12px;font-weight:700;text-align:right;white-space:nowrap;}

/* Donut legend */
.donut-wrap{display:flex;align-items:center;gap:16px;flex:1;}
.legend{display:flex;flex-direction:column;gap:8px;flex:1;}
.legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);}
.legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.legend-row b{margin-left:auto;color:var(--text);font-size:12px;}

/* Negociações board */
.board-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;}
.board-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.board-head h3{margin:0;font-size:16px;font-weight:700;}
.board-search{
  flex:1;min-width:180px;max-width:260px;display:flex;align-items:center;gap:6px;
  background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:7px 10px;color:var(--text-soft);
}
.board-search input{border:none;background:transparent;outline:none;font-size:12.5px;flex:1;color:var(--text);}
.btn-ghost{
  border:1px solid var(--border);background:#fff;color:var(--text-muted);
  font-size:12.5px;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:6px;cursor:pointer;
}
.btn-ghost:hover{background:#F7F7F8;}
.btn-primary{
  background:var(--red);color:#fff;border:none;border-radius:8px;
  font-size:12.5px;font-weight:600;padding:9px 14px;display:flex;align-items:center;gap:6px;cursor:pointer;margin-left:auto;
}
.btn-primary:hover{background:var(--red-dark);}

.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;}
.col{
  min-width:230px;max-width:230px;flex-shrink:0;
  background:#FAFAFB;border:1px solid var(--border);border-radius:10px;
  display:flex;flex-direction:column;min-height:140px;
}
.col-head{padding:10px 12px 8px 12px;}
.col-title-row{display:flex;align-items:center;justify-content:space-between;}
.col-title{font-size:12.5px;font-weight:700;}
.col-count{font-size:11px;background:#EDEDF0;color:var(--text-muted);border-radius:20px;padding:1px 7px;font-weight:700;}
.col-total{font-size:12px;color:var(--text-muted);margin-top:4px;}
.col-body{padding:0 8px 8px 8px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:60px;}
.col-body.dragover{background:#F3E9EA;border-radius:8px;}

.deal-card{
  background:#fff;border:1px solid var(--border);border-radius:9px;padding:10px 10px 9px 10px;
  cursor:grab;box-shadow:0 1px 2px rgba(20,20,30,.05);
}
.deal-card:active{cursor:grabbing;}
.deal-card.dragging{opacity:.4;}
.deal-top{display:flex;align-items:flex-start;gap:8px;}
.deal-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.deal-name{font-size:12.5px;font-weight:700;line-height:1.2;}
.deal-vehicle{font-size:11px;color:var(--text-soft);}
.deal-star{margin-left:auto;color:#E7C247;font-size:13px;cursor:pointer;user-select:none;}
.deal-value{font-size:12.5px;font-weight:700;margin:6px 0 6px 0;}
.deal-tag{
  display:inline-block;font-size:10.5px;font-weight:600;border-radius:5px;padding:2px 7px;margin-bottom:6px;
}
.tag-instagram{background:#FCE7EF;color:#C13584;}
.tag-whatsapp{background:#E4F7EA;color:#1D9A4C;}
.tag-indicacao{background:#EAF1FE;color:#1B67AC;}
.tag-site{background:#FDF3E3;color:#B7791F;}
.tag-telefone{background:#E7F1FA;color:#0C4A85;}
.tag-proposta{background:#EAF1FE;color:#1B67AC;}
.tag-negociacao{background:#FDF0E3;color:#5FA3DA;}
.tag-pagamento{background:#EAF9EF;color:#1D9A4C;}
.tag-entrega{background:#E7F1FE;color:#1B67AC;}
.deal-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-soft);}
.deal-seller{display:flex;align-items:center;gap:5px;}
.deal-seller img{width:16px;height:16px;border-radius:50%;object-fit:cover;}
.deal-actions{display:flex;gap:4px;}
.deal-del{color:var(--text-soft);cursor:pointer;font-size:13px;line-height:1;}
.deal-del:hover{color:var(--red);}
.col-add{
  margin:0 8px 10px 8px;padding:8px;border:1px dashed var(--border);border-radius:8px;
  color:var(--text-soft);font-size:12px;text-align:center;cursor:pointer;background:transparent;
}
.col-add:hover{background:#F5EEEF;color:var(--red);border-color:var(--red);}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,20,25,.45);display:none;
  align-items:center;justify-content:center;z-index:400;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:14px;width:100%;max-width:400px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.25);max-height:90vh;overflow-y:auto;}
.is-hidden{display:none !important;}

.modal-extra-fields{margin-top:4px;margin-bottom:12px;}
.modal-extra-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.modal-extra-head label{font-size:12px;color:var(--text-muted);font-weight:600;}
.btn-add-field{
  background:#FAFAFB;border:1px solid var(--border);border-radius:7px;padding:5px 10px;
  font-size:11.5px;font-weight:600;color:var(--text-muted);cursor:pointer;
}
.btn-add-field:hover{color:var(--red);border-color:var(--red);}
.modal-extra-row{display:grid;grid-template-columns:1fr 1fr 26px;gap:8px;margin-bottom:8px;align-items:center;}
.modal-extra-row input{
  padding:8px 9px;border:1px solid var(--border);border-radius:7px;font-size:12.5px;outline:none;background:#fbfbfc;
}
.modal-extra-row input:focus{border-color:var(--red);background:#fff;}
.modal-extra-row .extra-remove{
  width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:#fff;color:var(--text-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;flex-shrink:0;
}
.modal-extra-row .extra-remove:hover{color:var(--red);border-color:var(--red);}

.lead-field-row.extra-field{grid-template-columns:20px 150px 1fr 26px;}
.lead-field-row .extra-remove{
  width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:#fff;color:var(--text-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;flex-shrink:0;
}
.lead-field-row .extra-remove:hover{color:var(--red);border-color:var(--red);}
.modal h3{margin:0 0 14px 0;font-size:16px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.modal-head h3{margin:0;}
.modal-x{cursor:pointer;color:var(--text-muted);font-size:15px;line-height:1;padding:2px 4px;border-radius:6px;}
.modal-x:hover{background:#F5F5F7;color:var(--red);}
.field{margin-bottom:12px;}
.field label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:5px;font-weight:600;}
.field input,.field select{
  width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;
  outline:none;background:#fbfbfc;
}
.field input:focus,.field select:focus{border-color:var(--red);background:#fff;}
.modal-actions{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;}
.btn-cancel{background:#fff;border:1px solid var(--border);border-radius:8px;padding:9px 14px;font-size:12.5px;cursor:pointer;color:var(--text-muted);}
.btn-save{background:var(--red);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:12.5px;font-weight:600;cursor:pointer;}

/* Modal de detalhes do lead (campos arrastaveis) */
.lead-modal{max-width:460px;}
.lead-modal-hint{font-size:12px;color:var(--text-muted);margin:-6px 0 14px;}
.lead-fields-list{max-height:56vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px;}
.lead-field-row{
  display:grid;grid-template-columns:20px 150px 1fr;align-items:center;gap:10px;
  background:#FAFAFB;border:1px solid var(--border);border-radius:9px;padding:9px 10px;
  cursor:grab;transition:box-shadow .15s, opacity .15s;
}
.lead-field-row.dragging{opacity:.4;}
.lead-field-row .drag-handle{color:#B9BAC2;font-size:15px;text-align:center;cursor:grab;}
.lead-field-row label{font-size:12px;font-weight:600;color:var(--text-muted);}
.lead-field-row input,.lead-field-row select,.lead-field-row textarea{
  width:100%;padding:7px 9px;border:1px solid var(--border);border-radius:7px;font-size:12.5px;
  outline:none;background:#fff;font-family:inherit;
}
.lead-field-row textarea{resize:vertical;min-height:56px;line-height:1.4;}
.lead-field-row:has(textarea){align-items:start;padding-top:11px;}
.lead-field-row input:focus,.lead-field-row select:focus,.lead-field-row textarea:focus{border-color:var(--red);}

.logout-btn{
  margin-left:4px;font-size:15px;color:var(--text-soft);cursor:pointer;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:background .15s,color .15s;
}
.logout-btn:hover{background:#FFF3F4;color:var(--red);}

.sellers-modal{max-width:640px;}
.seller-form{background:#FAFAFB;border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sellers-list{max-height:40vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.seller-row{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--border);border-radius:10px;background:#fff;
}
.seller-row img{width:34px;height:34px;border-radius:50%;object-fit:cover;}
.seller-row .seller-info{flex:1;min-width:0;}
.seller-row .seller-name{font-size:13px;font-weight:600;}
.seller-row .seller-meta{font-size:11.5px;color:var(--text-soft);}
.seller-role-tag{
  font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;
  background:#F0F0F2;color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em;
}
.seller-role-tag.dono{background:#FFF3F4;color:var(--red);}
.seller-row .seller-del{color:var(--text-soft);cursor:pointer;font-size:15px;padding:4px 6px;}
.seller-row .seller-del:hover{color:var(--red);}
.seller-row .seller-edit{color:var(--text-soft);cursor:pointer;font-size:14px;padding:4px 6px;}
.seller-row .seller-edit:hover{color:var(--red);}
.seller-role-tag.dev{background:#1B1D23;color:#fff;}
.seller-row.inactive{opacity:.5;}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:#1B1D23;color:#fff;padding:10px 18px;border-radius:9px;font-size:12.5px;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

.kpi-clickable{cursor:pointer;transition:box-shadow .15s, transform .1s, border-color .15s;}
.kpi-clickable:hover{box-shadow:0 4px 16px rgba(20,20,30,.10);border-color:#D8DADF;transform:translateY(-1px);}

/* ==================== PÁGINA DE DETALHES DO FATURAMENTO (TELA CHEIA) ==================== */
.fatura-overlay{
  position:fixed;inset:0;background:var(--bg);z-index:300;
  display:none;overflow-y:auto;
}
.fatura-overlay.open{display:block;}
.fatura-page{max-width:none;width:100%;margin:0 auto;padding:20px clamp(12px,3vw,44px) 60px;box-sizing:border-box;}
.fatura-topbar{padding:6px 0 16px 0;}
.fatura-back{
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
  border-radius:9px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;
}
.fatura-back:hover{color:var(--red);border-color:var(--red);}

.fatura-card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:26px 28px 30px 28px;width:100%;box-sizing:border-box;min-height:calc(100vh - 110px);}
.fatura-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px;}
.fatura-head h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.3px;}

/* ---- navegador de data (‹ data ›) ---- */
.fatura-date-nav{display:flex;align-items:center;gap:6px;}
.fatura-nav-arrow{
  width:27px;height:27px;flex-shrink:0;border-radius:8px;border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);padding:0;
}
.fatura-nav-arrow:hover{color:var(--red);border-color:var(--red);}
.fatura-nav-arrow:disabled{opacity:.35;cursor:not-allowed;color:var(--text-soft);border-color:var(--border);}
.fatura-date-chip{
  position:relative;display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);
  border-radius:20px;padding:5px 12px;font-size:12px;color:var(--text-muted);font-weight:600;cursor:pointer;
}
.fatura-date-chip:hover{border-color:var(--red);color:var(--red);}
.fatura-date-input{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer;
}
.fatura-today-btn{
  background:#fff;border:1px solid var(--border);color:var(--text-muted);font-size:11.5px;font-weight:700;
  border-radius:20px;padding:5px 11px;cursor:pointer;
}
.fatura-today-btn:hover{color:var(--red);border-color:var(--red);}
.fatura-today-btn.is-hidden{display:none;}

.fatura-updated{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-soft);}
.fatura-hint{font-size:12px;color:var(--text-soft);margin:6px 0 18px 0;}

@media(max-width:640px){
  .fatura-page{padding:12px 10px 50px;}
  .fatura-card{padding:18px 14px 22px;border-radius:12px;}
  .fatura-head h2{font-size:19px;}
  .fatura-updated{margin-left:0;width:100%;order:5;}
}

.fatura-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:26px;}
@media(max-width:1200px){.fatura-metrics{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.fatura-metrics{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.fatura-metrics{grid-template-columns:1fr;}}
.fmetric{display:flex;align-items:flex-start;gap:12px;}
.fmetric-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.fmetric-icon.green{background:#E7F1FA;color:#3685C7;}
.fmetric-icon.blue{background:#E7F1FA;color:#1B67AC;}
.fmetric-icon.red{background:#E7F1FA;color:var(--red);}
.fmetric-icon.orange{background:#C6DEF3;color:#5FA3DA;}
.fmetric-body{min-width:0;flex:1;}
.fmetric-label{font-size:11px;font-weight:700;color:var(--text-soft);letter-spacing:.03em;margin-bottom:3px;}
.fmetric-value{font-size:19px;font-weight:800;letter-spacing:-.2px;cursor:default;border-radius:6px;padding:1px 4px;margin:0 0 0 -4px;}
.fmetric-value.is-editable{cursor:text;}
.fmetric-value.is-editable:hover{background:#F5F5F7;}
.fmetric-value input{font:inherit;font-weight:800;width:100%;border:1px solid var(--red);border-radius:6px;padding:1px 4px;outline:none;}
.fmetric-sub{font-size:11.5px;color:var(--text-soft);margin-top:3px;}
.fmetric-sub .fpct{font-weight:700;cursor:default;border-radius:5px;padding:0 3px;}
.fmetric-sub .fpct.is-editable{cursor:text;}
.fmetric-sub .fpct.is-editable:hover{background:#F5F5F7;}
.fmetric-sub .fpct input{font:inherit;font-weight:700;width:44px;border:1px solid var(--red);border-radius:5px;padding:0 3px;outline:none;}
.fmetric-sub .up{color:var(--green);}
.fmetric-sub .down{color:var(--red);}
.fmetric-progress{height:5px;background:#EFEFF2;border-radius:6px;overflow:hidden;margin-top:6px;width:100%;}
.fmetric-progress>div{height:100%;background:#5FA3DA;border-radius:6px;}

.fatura-panels{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px;}
@media(max-width:1000px){.fatura-panels{grid-template-columns:1fr;}}
.fatura-panel{background:#FCFCFD;border:1px solid var(--border);border-radius:13px;padding:16px 18px 18px 18px;}
.fatura-panel h3{margin:0 0 14px 0;font-size:14px;font-weight:700;}
.donut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
}
.donut-center span{font-size:9.5px;color:var(--text-soft);font-weight:700;text-transform:uppercase;}
.donut-center b{font-size:12px;}
.donut-center div { white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.legend-row .legend-value{margin-left:6px;color:var(--text);font-weight:700;cursor:default;border-radius:5px;padding:0 3px;}
.legend-row .legend-value.is-editable{cursor:text;}
.legend-row .legend-value.is-editable:hover{background:#F0F0F2;}
.legend-row .legend-value input{font:inherit;font-weight:700;width:70px;border:1px solid var(--red);border-radius:5px;padding:0 3px;outline:none;}
.legend-row .legend-pct{margin-left:auto;flex-shrink:0;}
.fatura-panel-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-soft);text-align:center;background:transparent;border-radius:8px;}

.resumo-row{
  display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #F0F0F2;
}
.resumo-row:last-child{border-bottom:none;}
.resumo-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.resumo-label{font-size:11.5px;font-weight:700;color:var(--text-muted);letter-spacing:.02em;}
.resumo-value{margin-left:auto;font-size:13.5px;font-weight:700;cursor:default;border-radius:6px;padding:1px 5px;}
.resumo-value.is-editable{cursor:text;}

.fatura-stats{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border);
}
@media(max-width:1100px){.fatura-stats{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.fatura-stats{grid-template-columns:repeat(2,1fr);}}
.fstat{background:#FCFCFD;border:1px solid var(--border);border-radius:13px;padding:14px 14px 15px 14px;}
.fstat-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:10px;}
.fstat-icon.green{background:#E7F1FA;color:#3685C7;}
.fstat-icon.blue{background:#E7F1FA;color:#1B67AC;}
.fstat-icon.orange{background:#C6DEF3;color:#5FA3DA;}
.fstat-icon.purple{background:#E7F1FA;color:#0C4A85;}
.fstat-icon.teal{background:#E3F5F4;color:#0D9488;}
.fstat-icon.red{background:#E7F1FA;color:var(--red);}
.fstat-label{font-size:10px;font-weight:700;color:var(--text-soft);letter-spacing:.03em;margin-bottom:5px;}
.fstat-value{font-size:19px;font-weight:800;letter-spacing:-.2px;cursor:default;border-radius:6px;padding:1px 4px;margin:0 0 3px -4px;}
.fstat-value.is-editable{cursor:text;}
.fstat-value.is-editable:hover{background:#F0F0F2;}
.fstat-value input{font:inherit;font-weight:800;width:100%;border:1px solid var(--red);border-radius:6px;padding:1px 4px;outline:none;}
.fstat-sub{font-size:11px;color:var(--text-soft);}
.fstat-sub .up{color:var(--green);font-weight:700;}
.fstat-sub .down{color:var(--red);font-weight:700;}
.fstat-sub .flat{color:var(--text-soft);font-weight:700;}

.fatura-footnote{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12px;color:var(--text-soft);margin-top:20px;}
.resumo-value.is-editable:hover{background:#F0F0F2;}
.resumo-value input{font:inherit;font-weight:700;width:100px;border:1px solid var(--red);border-radius:5px;padding:1px 5px;outline:none;text-align:right;}

@media(max-width:900px){
  .sidebar{display:none;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .panels{grid-template-columns:1fr;}
}

/* ==================== PÁGINA DO WHATSAPP ==================== */
.wa-overlay{position:fixed;inset:0;background:var(--bg);z-index:300;display:none;flex-direction:column;}
.wa-overlay.open{display:flex;}
.wa-page{flex:1;display:flex;flex-direction:column;min-height:0;padding:16px clamp(12px,2.5vw,32px) 16px;box-sizing:border-box;}
.wa-topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:12px;}
.wa-status{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-muted);}
.wa-status-dot{width:9px;height:9px;border-radius:50%;background:#C7C9D1;flex-shrink:0;}
.wa-status-dot.online{background:#3685C7;}
.wa-status-dot.offline{background:var(--red);}
.wa-status-btn{margin-left:auto;}
#wa-settings-btn{margin-left:auto;}

.wa-card{flex:1;min-height:0;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;}
.wa-body{display:flex;height:100%;min-height:0;}

.wa-conversations{width:320px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;}
.wa-conv-search{display:flex;align-items:center;gap:8px;padding:14px;border-bottom:1px solid var(--border);color:var(--text-soft);}
.wa-conv-search input{border:none;outline:none;font-size:13px;width:100%;background:transparent;}
.wa-conv-list{flex:1;overflow-y:auto;}
.wa-conv-item{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid #F5F5F7;}
.wa-conv-item:hover{background:#FAFAFB;}
.wa-conv-item.active{background:#E7F1FA;}
.wa-conv-item img{width:42px;height:42px;border-radius:50%;flex-shrink:0;object-fit:cover;}
.wa-conv-main{min-width:0;flex:1;}
.wa-conv-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wa-conv-preview{font-size:12px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wa-conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.wa-conv-time{font-size:10.5px;color:var(--text-soft);}
.wa-conv-unread{background:var(--red);color:#fff;font-size:10.5px;font-weight:700;border-radius:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 5px;}
.wa-conv-empty{padding:30px 16px;text-align:center;font-size:12.5px;color:var(--text-soft);}

.wa-thread{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;background:#F7F7F9;}
.wa-thread-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-soft);text-align:center;}
.wa-thread-active{display:none;flex-direction:column;height:100%;min-height:0;}
.wa-thread-active.open{display:flex;}
.wa-thread-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--border);}
.wa-thread-head img{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.wa-thread-name{font-size:13.5px;font-weight:700;}
.wa-thread-phone{font-size:11.5px;color:var(--text-soft);}

.wa-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;}
.wa-msg{max-width:65%;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.45;position:relative;}
.wa-msg.in{align-self:flex-start;background:#fff;border:1px solid var(--border);border-bottom-left-radius:3px;}
.wa-msg.out{align-self:flex-end;background:#FCE1E5;border-bottom-right-radius:3px;}
.wa-msg-time{display:block;font-size:10px;color:var(--text-soft);margin-top:3px;text-align:right;}

.wa-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--card);}
.wa-input-row input{flex:1;border:1px solid var(--border);border-radius:20px;padding:9px 14px;font-size:13px;outline:none;}
.wa-input-row input:focus{border-color:var(--red);}
.wa-input-row button{border-radius:20px;padding:9px 20px;}

@media(max-width:800px){
  .wa-conversations{width:100%;border-right:none;}
  .wa-body{position:relative;}
  .wa-conversations{position:absolute;inset:0;z-index:2;background:var(--card);transition:transform .2s;}
  .wa-conversations.is-hidden{transform:translateX(-100%);}
  .wa-thread{position:absolute;inset:0;z-index:1;}
  .wa-thread-head{padding-left:10px;}
  .wa-thread-back{display:inline-flex !important;}
}
.wa-thread-back{display:none;background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;margin-right:2px;}


/* ====================================================================
   COMO USAR ESTE ARQUIVO
   --------------------------------------------------------------------
   Cole estas linhas no FINAL do estilo.css. É só isso que falta —
   o resto da tela de Negociação e Clientes reaproveita classes que
   já existem (.fatura-*, .fmetric, .panel, .seller-row etc).
==================================================================== */

.neg-tab.is-active-tab {
  outline: 2px solid #002D57;
  outline-offset: -2px;
}


/* Cole no final do estilo.css, junto do trecho que você já colou antes. */
.period-tab { cursor: pointer; }
.period-tab.is-active-tab {
  outline: 2px solid #002D57;
  outline-offset: -2px;
}


/* ====================================================================
   COMO USAR: cole no FINAL do estilo.css (depois de tudo que você já
   colou antes). Isso faz Negociação, Clientes, Vendas, Empresa,
   WhatsApp e Faturamento abrirem "do lado" da sidebar, mantendo o
   menu sempre visível e clicável — em vez de cobrir a tela inteira.
==================================================================== */
.fatura-overlay,
.wa-overlay {
  left: var(--sidebar-w);
}

/* No celular a sidebar já fica escondida (ver regra @media 900px que
   já existe no arquivo), então aí sim o overlay volta a ocupar 100%. */
@media (max-width: 900px) {
  .fatura-overlay,
  .wa-overlay {
    left: 0;
  }
}


/* Cole no final do estilo.css. */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th {
  text-align:left; padding:9px 12px; font-weight:700; color:var(--text-muted,#8a8a92);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; border-bottom:1px solid var(--border,#EAEAEE);
  white-space:nowrap;
}
.data-table td {
  padding:10px 12px; border-bottom:1px solid var(--border,#EAEAEE); white-space:nowrap; vertical-align:middle;
}
.data-table tbody tr { cursor:pointer; transition:background .1s; }
.data-table tbody tr:hover { background:#FAFAFB; }
.data-table .cell-editable { cursor:text; border-radius:5px; padding:2px 4px; margin:-2px -4px; }
.data-table .cell-editable:hover { background:#F0F0F2; }
.data-table .cell-editable input, .data-table .cell-editable select {
  font:inherit; width:100%; border:1px solid var(--red,#002D57); border-radius:5px; padding:2px 5px; outline:none;
}
.data-table .status-tag {
  display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:700;
}
.status-em_dia, .status-fechada, .status-ativo { background:#E7F1FA; color:#3685C7; }
.status-aberto, .status-negociacao { background:#C6DEF3; color:#5FA3DA; }
.status-atrasado, .status-perdida { background:#E7F1FA; color:var(--red,#002D57); }
.status-sem_compra { background:#F0F0F2; color:#8a8a92; }
/* ====================================================================
   COMO USAR: cole no FINAL do estilo.css.
   --------------------------------------------------------------------
   Faz Negociação usar tons de vermelho/rosa nos ícones (como na imagem
   1) e Clientes usar tons de roxo/índigo (como na imagem 2), em vez
   dos ícones genéricos verde/azul/laranja misturados.
==================================================================== */
#negociacao-overlay .fmetric-icon {
  background: #E7F1FA; color: var(--red, #002D57);
}
#clientes-overlay .fmetric-icon {
  background: #E7F1FA; color: #0C4A85;
}
#clientes-overlay .status-em_dia,
#clientes-overlay .status-fechada { background:#E7F1FA; color:#0C4A85; }

/* (regra antiga de colunas removida — agora usa a regra genérica
   .fatura-overlay .fatura-panels:not(.es-panels-3)) */

#clientes-overlay #clientes-origem-body .funnel-bar {
  background: #0C4A85 !important;
}

/* ====================================================================
   POLIMENTO VISUAL DOS CARDS DE KPI (Negociação e Clientes)
   --------------------------------------------------------------------
   Cada KPI vira um cartão próprio (fundo branco, borda, sombra suave),
   com ícone circular, batendo com o padrão das imagens de referência.
==================================================================== */
.kpi-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}
@media (max-width: 700px) { .kpi-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 420px) { .kpi-cards-grid { grid-template-columns: 1fr !important; } }

.kpi-card-box {
  background: var(--card, #fff);
  border: 1px solid var(--border, #EAEAEE);
  border-radius: var(--radius, 12px);
  padding: 14px 16px;
  box-shadow: var(--shadow, 0 1px 2px rgba(20,20,30,.04));
  min-width: 0;
}
.kpi-card-box .fmetric { gap: 8px; align-items: center; }
.kpi-card-box .fmetric-icon {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
}
.kpi-card-box .fmetric-icon svg { width: 14px; height: 14px; }
.kpi-card-box .fmetric-body { min-width: 0; flex: 1; }
#negociacao-overlay .kpi-card-box .kpi-icon-mini { background:#E7F1FA; color:var(--red,#002D57); }
#clientes-overlay .kpi-card-box .kpi-icon-mini { background:#E7F1FA; color:#0C4A85; }
.kpi-card-box .fmetric-label {
  font-size: 12.3px; font-weight: 400; letter-spacing: 0; color: var(--text-muted,#8a8a92);
  text-transform: lowercase; margin-bottom: 0; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.kpi-card-box .fmetric-value {
  font-size: 19px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.kpi-card-box .fmetric-sub { font-size: 10.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-soft,#a3a7b0); }
.kpi-card-box .fmetric-progress { height: 4px; margin-top: 4px; }
.kpi-card-box { overflow: hidden; }

/* (regra antiga de gap removida — agora usa a regra genérica
   .fatura-overlay .fatura-panels, igual em todos os módulos) */
#negociacao-overlay .fatura-hint,
#clientes-overlay .fatura-hint,
#vendas-overlay .fatura-hint {
  margin: 2px 0 12px !important;
}
#negociacao-overlay .fatura-head,
#clientes-overlay .fatura-head,
#vendas-overlay .fatura-head {
  margin-bottom: 2px !important;
}
#negociacao-overlay .panel,
#clientes-overlay .panel,
#vendas-overlay .panel,
#negociacao-overlay .fatura-panel,
#clientes-overlay .fatura-panel,
#vendas-overlay .fatura-panel {
  padding: 16px 16px 18px 16px !important;
  background: var(--card, #fff) !important;
  border-radius: var(--radius, 12px) !important;
}
#negociacao-overlay .fatura-panel h3,
#clientes-overlay .fatura-panel h3,
#vendas-overlay .fatura-panel h3 {
  margin: 0 0 12px 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
#negociacao-overlay .fatura-panel > *:last-child,
#clientes-overlay .fatura-panel > *:last-child,
#vendas-overlay .fatura-panel > *:last-child {
  margin-bottom: 0 !important;
}
#negociacao-overlay .fatura-panel[style*="margin-top"],
#clientes-overlay .fatura-panel[style*="margin-top"],
#vendas-overlay .fatura-panel[style*="margin-top"] {
  margin-top: 4px !important;
}

/* Tema azul pro módulo Vendas, seguindo o mesmo padrão de cards de
   Negociação (vermelho) e Clientes (roxo). */
#vendas-overlay .kpi-card-box .kpi-icon-mini { background:#E7F1FA; color:#1B67AC; }
#vendas-overlay .status-em_dia { background:#E7F1FA; color:#1B67AC; }
/* (regra antiga de colunas do Vendas removida — idem acima) */

/* ====================================================================
   ABAS DE CATEGORIA — Estoque de Veículos
==================================================================== */
.es-category-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 !important;
}
.es-cat-tab {
  display: flex; align-items: center; gap: 12px;
  background: var(--card, #fff); border: 1px solid var(--border, #EAEAEE); border-radius: var(--radius, 12px);
  padding: 14px 16px; cursor: pointer; transition: border-color .12s, background .12s;
}
.es-cat-tab:hover { border-color: #C9C9CE; }
.es-cat-tab.active { background: #E7F1FA; border-color: #1B67AC; }
.es-cat-tab-icon {
  width: 40px; height: 40px; border-radius: 10px; background: #F0F0F2; color: #002D57;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.es-cat-tab.active .es-cat-tab-icon { background: #fff; color: #1B67AC; }
.es-cat-tab-name { font-size: 13px; font-weight: 700; }
.es-cat-tab-count { font-size: 11.5px; color: var(--text-soft, #a3a7b0); margin-top: 1px; }
.es-cat-tab-add { border-style: dashed; justify-content: center; text-align: center; }
.es-cat-tab-add .es-cat-tab-icon { background: transparent; font-size: 20px; font-weight: 700; color: var(--red, #002D57); }
/* (regra de 4 colunas removida — Veículos agora usa .es-panels-3, 3 colunas) */
#veiculos-overlay .kpi-card-box .kpi-icon-mini { background:#E7F1FA; color:#1B67AC; }
#veiculos-overlay .status-em_dia { background:#E7F1FA; color:#1B67AC; }

/* ====================================================================
   CORREÇÃO DE ESPAÇAMENTO LATERAL — bug real encontrado.
   --------------------------------------------------------------------
   .fatura-page tinha até 44px de padding lateral + .fatura-card tinha
   mais 28px em cima disso = quase 72px de espaço morto de cada lado,
   contra os 24px que o Dashboard original usa. Isso fazia o conteúdo
   parecer "flutuando" com sobra enorme nas laterais. Reduzido pra
   bater exatamente com o padrão do Dashboard (.content: 24px).
==================================================================== */
.fatura-overlay .fatura-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.fatura-overlay .fatura-page {
  padding: 20px 24px 40px 24px !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fatura-overlay .fatura-topbar { margin-bottom: 0 !important; }
.fatura-overlay .fatura-head { margin-bottom: 0 !important; }
.fatura-overlay .fatura-page { gap: 16px; }
.fatura-overlay .kpi-cards-grid { margin-bottom: 0 !important; gap: 8px !important; }
.fatura-overlay .fatura-panels { margin-bottom: 0 !important; margin-top: 0 !important; gap: 8px !important; }
.fatura-overlay .fatura-hint { margin: 0 !important; }
/* Painel da tabela (que tinha margin-top:20px inline) agora só usa o
   gap do flex container do .fatura-page, igual ao gap:18px do .content */
.fatura-overlay .fatura-panel[style] { margin-top: 0 !important; }
.fatura-overlay .fatura-footnote { margin-top: 12px !important; }

/* Financiamento: tabela + painel de bancos parceiros lado a lado */
.financiamento-split {
  display: grid;
  grid-template-columns: 2.4fr 1fr;
  gap: 18px;
}
.financiamento-split > .fatura-panel { min-width: 0; }
@media (max-width: 1100px) { .financiamento-split { grid-template-columns: 1fr; } }
#financiamento-overlay .seller-row .fmetric-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; align-items: center; justify-content: center; display: flex; }
#consorcio-overlay .kpi-card-box .kpi-icon-mini { background:#E7F1FA; color:#0C4A85; }
#financiamento-overlay .kpi-card-box .kpi-icon-mini { background:#E7F1FA; color:#1B67AC; }

/* (regra antiga de colunas removida — usa a regra genérica .fatura-overlay .fatura-panels) */

/* Empresa: cards de período (Hoje/Semana/Mês) + destaque do selecionado */
#empresa-overlay .kpi-card-box .kpi-icon-mini { background:#C6DEF3; color:#5FA3DA; }
#empresa-overlay .period-tab { cursor: pointer; transition: border-color .12s; }
#empresa-overlay .period-tab.is-active-tab {
  border-color: var(--red, #002D57) !important;
  box-shadow: 0 0 0 1px var(--red, #002D57) !important;
}
/* (regra antiga de colunas removida — usa a regra genérica .fatura-overlay .fatura-panels) */
/* ====================================================================
   TELA DE LOGIN — cole no final do estilo.css
==================================================================== */
body.auth-locked > .app { filter: blur(4px); pointer-events: none; user-select: none; }

#auth-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 20, 30, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-box {
  background: #fff; border-radius: 16px; padding: 36px 34px;
  width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.auth-logo { text-align: center; margin-bottom: 18px; }
.auth-logo img { height: 34px; }
.auth-box h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; text-align: center; }
.auth-sub { margin: 0 0 20px; font-size: 12.5px; color: var(--text-soft, #a3a7b0); text-align: center; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted, #8a8a92); margin-bottom: 5px; }
.auth-field input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border, #EAEAEE); font: inherit; outline: none;
}
.auth-field input:focus { border-color: var(--red, #002D57); }
.auth-error { color: var(--red, #002D57); font-size: 12.5px; min-height: 16px; margin-bottom: 6px; }
.auth-btn {
  width: 100%; padding: 11px; border: none; border-radius: 9px;
  background: var(--red, #002D57); color: #fff; font-weight: 700; font-size: 14px;
  cursor: pointer; margin-top: 4px;
}
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-switch { text-align: center; font-size: 12.5px; margin-top: 16px; color: var(--text-soft, #a3a7b0); }
.auth-switch a { color: var(--red, #002D57); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* (regra antiga de colunas removida — usa a regra genérica .fatura-overlay .fatura-panels) */
#cartas-overlay .kpi-card-box .kpi-icon-mini { background:#E7F1FA; color:#0C4A85; }

/* Liberacred: painel "Desempenho por produto" — SEMPRE 2 lado a lado,
   nunca empilhado (senão o painel fica mais alto que os outros 3 da
   linha e sobra espaço vazio enorme nos vizinhos). */
#lb-desempenho-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-produto-card { background: #FAFAFB; border: 1px solid var(--border, #EAEAEE); border-radius: 10px; padding: 9px; min-width: 0; overflow: hidden; }
.lb-produto-card-head { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; font-size: 10.5px; color: #0C4A85; line-height: 1.2; }
.lb-produto-card-head b { overflow-wrap: break-word; white-space: normal; }
.lb-produto-card-icon { display: flex; flex-shrink: 0; }
.lb-produto-card-icon svg { width: 13px; height: 13px; }
.lb-produto-row { display: flex; flex-direction: column; gap: 1px; font-size: 9.5px; margin-bottom: 5px; color: var(--text-soft, #a3a7b0); }
.lb-produto-row b { color: var(--text, #1a1a1e); font-weight: 700; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-produto-card .fmetric-progress { height: 4px; margin-top: 3px; }

/* (regra antiga de colunas removida — usa a regra genérica .fatura-overlay .fatura-panels) */
@media (max-width: 900px) { #lb-desempenho-body { grid-template-columns: 1fr; } }
#liberacred-overlay .kpi-card-box .kpi-icon-mini { background:#E7F1FA; color:#0C4A85; }
#liberacred-overlay .legend-label { line-height: 1.3; }

/* Trava geral: painéis dentro de grade de 4 colunas nunca devem
   forçar rolagem horizontal da página inteira — qualquer conteúdo
   largo demais quebra linha ou trunca, mas nunca estoura o container. */
.fatura-panel { min-width: 0; overflow: hidden; }
.fatura-panels { min-width: 0; }
.fatura-page { overflow-x: hidden; }
.legend-label { min-width: 0; overflow-wrap: break-word; }

.kpi-card-box .fmetric-label::first-letter { text-transform: uppercase; }

/* 1) Remove o título grande de cada módulo (ex: "Liberacred") — o
   Dashboard original também não tem título de página, só o menu
   lateral já indica onde você está. */
.fatura-overlay .fatura-head { display: none !important; }

/* 2) Cards de KPI mais altos — menos "comprimidos", mais respiro
   vertical entre ícone/rótulo e o valor. */
.kpi-card-box { padding: 18px 18px !important; }
.kpi-card-box .fmetric { align-items: flex-start !important; gap: 10px !important; }
.kpi-card-box .fmetric-body { padding-top: 1px; }
.kpi-card-box .fmetric-value { margin-top: 4px; }

/* ====================================================================
   NAVEGAÇÃO SEM "VOLTAR" — o topbar principal (busca, notificações,
   usuário) agora fica visível em qualquer tela, e os overlays somem
   por baixo dele em vez de cobri-lo. Clicar em outro item do menu já
   troca de tela direto, sem precisar de botão de voltar.
==================================================================== */
.fatura-overlay,
.wa-overlay {
  top: 64px !important;
}
.fatura-overlay:not(#fatura-overlay) .fatura-topbar {
  display: none !important;
}
.wa-overlay .wa-topbar .fatura-back {
  display: none !important;
}
.fatura-overlay .fatura-page {
  padding-top: 20px !important;
}

/* ====================================================================
   ESTOQUE — grade de cards de veículo (catálogo visual, não tabela)
==================================================================== */
.es-panels-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .es-panels-3 { grid-template-columns: 1fr; } }

.es-cat-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.es-pill {
  padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border, #E7E8EC);
  background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.es-pill:hover { border-color: #93C1E8; }
.es-pill.active { background: var(--red, #002D57); border-color: var(--red, #002D57); color: #fff; }

.es-vehicle-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
@media (max-width: 1500px) { .es-vehicle-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .es-vehicle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .es-vehicle-grid { grid-template-columns: 1fr; } }

/* O painel que envolve a grade de veículos fica "zerado" (sem fundo/
   borda própria) — os cards individuais já têm fundo branco/borda,
   então uma segunda caixa por fora só duplicava a moldura. */
.es-grid-panel {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.es-vcard {
  border: 1px solid var(--border, #E7E8EC); border-radius: 12px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.es-vcard-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 0; }
.es-vcard-tag { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; color: #fff; }
.es-vcard-menu { color: var(--text-soft, #a3a7b0); cursor: pointer; font-weight: 700; padding: 2px 4px; }
.es-vcard-img {
  height: 96px; margin: 8px 10px 0; border-radius: 8px; background: #F5F6F8;
  display: flex; align-items: center; justify-content: center; color: #C2C6CE;
  position: relative; overflow: hidden;
}
.es-vcard-img-real { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-vcard-photo-btn {
  position: absolute; bottom: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; border: none; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.es-vcard-photo-btn:hover { background: rgba(0,0,0,.75); }
.es-vcard-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.es-vcard-model { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.es-vcard-stock { font-size: 11px; color: var(--red, #002D57); font-weight: 600; }
.es-vcard-brand { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-soft, #a3a7b0); }
.es-vcard-type { font-size: 11.5px; color: var(--text-soft, #a3a7b0); }
.es-vcard-price { font-size: 15px; font-weight: 800; margin-top: 3px; }
.es-vcard-specs { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--text-soft, #a3a7b0); flex-wrap: wrap; }
.es-vcard-specs span { display: flex; align-items: center; gap: 3px; }
.es-vcard-colors { display: flex; gap: 4px; margin-top: 2px; }
.es-vcard-color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.es-vcard-edit {
  margin: 8px 10px 10px; padding: 7px; border-radius: 8px; border: 1px solid var(--border, #E7E8EC);
  background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.es-vcard-edit:hover { background: #F5F6F8; }

.es-panels-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .es-panels-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .es-panels-4 { grid-template-columns: 1fr; } }
#cartascredito-overlay .kpi-card-box .kpi-icon-mini { background:#E7F1FA; color:#0C4A85; }

/* Painéis do meio SEMPRE em 4 colunas largas e iguais (o padrão que
   ficou bom no Consórcio), em qualquer tela que tenha 4 painéis.
   As telas de 3 painéis (Faturamento, Empresa, Veículos) têm a classe
   es-panels-3 e ficam de fora dessa regra. */
.fatura-overlay .fatura-panels:not(.es-panels-3):not(.es-panels-2) {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Módulo Empresa — tabelas compactas dentro de painel + links de rodapé */
.es-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.es-mini-table th { text-align: left; font-size: 10.5px; font-weight: 600; color: var(--text-soft,#a3a7b0); text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--border,#E7E8EC); }
.es-mini-table td { padding: 7px 0; border-bottom: 1px solid #F5F5F7; }
.es-mini-table tbody tr:last-child td { border-bottom: none; }
.es-mini-table th:not(:first-child), .es-mini-table td:not(:first-child) { text-align: right; }
.es-mini-table-wide th:nth-child(1), .es-mini-table-wide td:nth-child(1) { text-align: left; }
.es-mini-table-wide th:not(:nth-child(1)), .es-mini-table-wide td:not(:nth-child(1)) { text-align: left; }
.es-mini-rank { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--red,#002D57); color: #fff; font-size: 10px; font-weight: 700; margin-right: 6px; }
.es-panel-link { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--red,#002D57); text-decoration: none; }
.es-panel-link:hover { text-decoration: underline; }
.es-resumo-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid #F5F5F7; }
.es-resumo-row:last-of-type { border-bottom: none; }
.es-resumo-row.es-resumo-total { font-weight: 700; border-top: 1px solid var(--border,#E7E8EC); border-bottom: none; margin-top: 4px; padding-top: 10px; }
.es-resumo-row .es-resumo-icon { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft,#a3a7b0); }

.es-panels-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .es-panels-2 { grid-template-columns: 1fr; } }

/* Menu "..." dos cards de veículo */
.es-vcard-dropdown {
  position: absolute; z-index: 500; background: #fff; border: 1px solid var(--border,#E7E8EC);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 5px; min-width: 140px;
}
.es-vcard-dropdown-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none;
  border-radius: 7px; font-size: 12.5px; cursor: pointer; color: var(--text,#1a1a1e);
}
.es-vcard-dropdown-item:hover { background: #F5F5F7; }
.es-vcard-dropdown-danger { color: var(--red,#002D57); }
.es-vcard-dropdown-danger:hover { background: #FDEAEC; }
.es-vcard-menu { cursor: pointer; }

/* Seguros: pills grandes com ícone (Tipo de seguro) */
.es-cat-pills-big { margin-top: 4px; }
.es-pill-big {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin: 0 8px 8px 0;
  border-radius: 10px; border: 1px solid var(--border,#E7E8EC); background: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s;
}
.es-pill-big:hover { border-color: #93C1E8; }
.es-pill-big.active { background: #E7F1FA; border-color: #0C4A85; color: #0C4A85; }
.es-pill-big svg { flex-shrink: 0; }
#seguros-overlay .kpi-card-box .kpi-icon-mini { background:#E7F1FA; color:#0C4A85; }

/* Coluna "Ações" (com o botão de excluir) sempre visível, sem
   precisar rolar a tabela inteira pra direita — fica "grudada" na
   borda direita, com fundo próprio pra não ficar por baixo do texto
   das outras colunas ao rolar. Vale pra toda tabela do sistema. */
.data-table th:last-child,
.data-table td:last-child {
  position: sticky; right: 0; z-index: 2;
  background: #fff; box-shadow: -6px 0 8px -6px rgba(0,0,0,.08);
  text-align: center;
}
.data-table tbody tr:hover td:last-child { background: #FAFAFB; }
.seller-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  color: var(--text-soft, #a3a7b0); font-size: 13px;
}
.seller-del:hover { background: #FDEAEC; color: var(--red, #002D57); }

/* ====================================================================
   TAREFAS — agenda do dia + semana lado a lado, e listas de atividade
==================================================================== */
.tf-split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
@media (max-width: 1300px) { .tf-split { grid-template-columns: 1fr; } }

.tf-filters-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tf-filters-row .select-mini { font-size: 11px; padding: 5px 8px; }

.tf-dia-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F5F5F7;
}
.tf-dia-row:last-child { border-bottom: none; }
.tf-dia-time { width: 40px; font-size: 11.5px; color: var(--text-soft,#a3a7b0); flex-shrink: 0; }
.tf-dia-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tf-dia-info { flex: 1; min-width: 0; }
.tf-dia-title { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-dia-sub { font-size: 11px; color: var(--text-soft,#a3a7b0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-dia-resp { font-size: 11px; color: var(--text-muted,#8a8a92); flex-shrink: 0; width: 50px; text-align: right; }
.tf-dia-tag { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; color: #fff; flex-shrink: 0; white-space: nowrap; }

.tf-week-grid { display: grid; grid-template-columns: 46px repeat(6, 1fr); font-size: 10.5px; overflow-x: auto; }
.tf-week-head { text-align: center; font-weight: 700; padding: 6px 2px; color: var(--text-muted,#8a8a92); }
.tf-week-head.active { color: #fff; background: var(--red,#002D57); border-radius: 6px; }
.tf-week-time { color: var(--text-soft,#a3a7b0); padding: 4px 2px; text-align: right; padding-right: 6px; }
.tf-week-cell { position: relative; min-height: 20px; border-top: 1px solid #F5F5F7; padding: 1px; }
.tf-week-event {
  border-radius: 4px; padding: 2px 4px; margin-bottom: 2px; color: #fff; font-size: 9px; font-weight: 700;
  line-height: 1.25; overflow: hidden;
}
.tf-week-event span { display: block; font-weight: 400; opacity: .9; font-size: 8.5px; }

.tf-prox-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #F5F5F7; font-size: 12px; }
.tf-prox-row:last-child { border-bottom: none; }
.tf-prox-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tf-prox-date { width: 88px; color: var(--text-soft,#a3a7b0); flex-shrink: 0; font-size: 11px; }
.tf-prox-title { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-prox-resp { color: var(--text-muted,#8a8a92); font-size: 11px; flex-shrink: 0; }

.tf-ativ-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; }
.tf-ativ-icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tf-ativ-label { flex: 1; color: var(--text-soft,#a3a7b0); }
.tf-ativ-value { font-weight: 700; }

/* Negociação, Clientes e Vendas — ícones dos cards com fundo colorido
   variado (igual ao Dashboard principal), em vez de uma cor só. */
#negociacao-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+1) .fmetric-icon,
#clientes-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+1) .fmetric-icon,
#vendas-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+1) .kpi-icon-mini { background:#FCE9EA; color:#E4032B; }
#negociacao-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+2) .fmetric-icon,
#clientes-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+2) .fmetric-icon,
#vendas-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+2) .kpi-icon-mini { background:#E7F1FA; color:#3685C7; }
#negociacao-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+3) .fmetric-icon,
#clientes-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+3) .fmetric-icon,
#vendas-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+3) .kpi-icon-mini { background:#FDEAF0; color:#D63384; }
#negociacao-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+4) .fmetric-icon,
#clientes-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+4) .fmetric-icon,
#vendas-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+4) .kpi-icon-mini { background:#EFEAFB; color:#7C5CE0; }
#negociacao-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+5) .fmetric-icon,
#clientes-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+5) .fmetric-icon,
#vendas-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+5) .kpi-icon-mini { background:#EFEAFB; color:#7C5CE0; }
#negociacao-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+6) .fmetric-icon,
#clientes-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+6) .fmetric-icon,
#vendas-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n+6) .kpi-icon-mini { background:#FFF1E0; color:#C2740A; }
#negociacao-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n) .fmetric-icon,
#clientes-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n) .fmetric-icon,
#vendas-overlay .kpi-cards-grid .kpi-card-vertical:nth-child(6n) .kpi-icon-mini { background:#FFF1E0; color:#C2740A; }

/* Variante vertical do kpi-card-box — ícone+nome em cima (linha),
   valor grande embaixo ocupando a largura toda. Estrutura idêntica
   ao card original do Dashboard, não ícone-ao-lado. */
.kpi-card-vertical { display: flex; flex-direction: column; gap: 5px; }
.kpi-card-vertical .kpi-top-mini {
  display: flex; align-items: center; gap: 8px; color: var(--text-muted,#7A7E88); font-size: 12.3px;
  text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-card-vertical .kpi-top-mini::first-letter { text-transform: uppercase; }
.kpi-card-vertical .kpi-icon-mini {
  width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.kpi-card-vertical .kpi-icon-mini svg { width: 14px; height: 14px; }
.kpi-card-vertical .kpi-value-mini {
  font-size: 19px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-card-vertical .kpi-sub-mini {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-soft,#a3a7b0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-card-vertical .kpi-progress-mini { height: 5px; background: #EFEFF2; border-radius: 6px; overflow: hidden; margin-top: 2px; }
.kpi-card-vertical .kpi-progress-mini > div { height: 100%; background: var(--red, #002D57); border-radius: 6px; }

#tf-date-picker { max-width: 140px; }
.tf-week-cell:hover { background: #F5F6F8; }

/* Calendário visual (Do dia / Da semana) */
.tf-cal-wrap { position: relative; }
.tf-cal-toggle { font-size: 12px; padding: 6px 12px; white-space: nowrap; }
.tf-cal-popup {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  background: #fff; border: 1px solid var(--border,#E7E8EC); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: 12px; width: 260px;
}
.tf-cal-popup.open { display: block; }
.tf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tf-cal-head b { font-size: 13px; }
.tf-cal-nav { border: none; background: #F5F5F7; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.tf-cal-nav:hover { background: #ECECEF; }
.tf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tf-cal-dow { text-align: center; font-size: 10px; font-weight: 700; color: var(--text-soft,#a3a7b0); padding-bottom: 4px; }
.tf-cal-day {
  text-align: center; font-size: 12px; padding: 6px 0; border-radius: 7px; cursor: pointer; border: none; background: none;
}
.tf-cal-day:hover { background: #F0F0F2; }
.tf-cal-day.tf-cal-today { font-weight: 700; color: var(--red,#002D57); }
.tf-cal-day.tf-cal-selected { background: var(--red,#002D57); color: #fff; }
.tf-cal-day.tf-cal-has-activity::after {
  content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: #C2740A; margin: 2px auto 0;
}
.tf-cal-day.tf-cal-muted { color: #C9C9CE; }

/* ====================================================================
   CONTRATO — formulário completo com resumo ao vivo
==================================================================== */
.ct-breadcrumb { font-size: 12.5px; color: var(--text-soft,#a3a7b0); margin-bottom: 6px; }
.ct-breadcrumb span { margin: 0 4px; }
.ct-title-row { margin-bottom: 16px; }
.ct-title { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.ct-subtitle { font-size: 13px; color: var(--text-soft,#a3a7b0); margin: 0; }

.ct-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ct-layout { grid-template-columns: 1fr; } }

.ct-section { background: #fff; border: 1px solid var(--border,#E7E8EC); border-radius: 13px; padding: 18px 20px; margin-bottom: 14px; }
.ct-section h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.ct-section-icon { font-size: 15px; }
.ct-req { color: var(--red,#002D57); }

.ct-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.ct-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ct-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ct-section .ct-grid-3 + .ct-grid-3, .ct-section .ct-grid-4 + .ct-grid-3 { margin-top: 12px; }
@media (max-width: 900px) { .ct-grid-2, .ct-grid-3, .ct-grid-4 { grid-template-columns: 1fr 1fr; } }

.ct-pills-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ct-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 9px;
  border: 1px solid var(--border,#E7E8EC); background: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ct-pill:hover { border-color: #93C1E8; }
.ct-pill.active { background: #E7F1FA; border-color: var(--red,#002D57); color: var(--red,#002D57); }

.ct-nested-box { background: #F7FAFD; border: 1px solid #D9E8F5; border-radius: 12px; padding: 16px 18px; margin-top: 4px; }
.ct-nested-hint { font-size: 11.5px; color: var(--text-soft,#a3a7b0); margin: 0 0 12px; }
.ct-nested-box .ct-grid-2 { margin-top: 12px; }

.ct-bottom-actions { display: flex; align-items: center; padding: 4px 2px; }
.ct-bottom-actions a { font-size: 12.5px; color: var(--text-soft,#a3a7b0); text-decoration: none; }
.ct-bottom-actions a:hover { text-decoration: underline; }

.ct-sidebar .fatura-panel { margin-bottom: 14px; }
.ct-resumo-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid #F5F5F7; gap: 8px; }
.ct-resumo-row span { color: var(--text-soft,#a3a7b0); }
.ct-resumo-row b { text-align: right; }
.ct-resumo-divider { height: 1px; background: var(--border,#E7E8EC); margin: 6px 0; }
.ct-info-box { background: #E7F1FA; border-radius: 10px; padding: 12px 14px; font-size: 12px; color: #0C4A85; line-height: 1.5; }

/* Pós-venda — fileira de status do contrato */
.pv-status-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 14px; }
@media (max-width: 1300px) { .pv-status-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px) { .pv-status-row { grid-template-columns: repeat(2, 1fr); } }
.pv-status-card {
  background: #fff; border: 1px solid var(--border,#E7E8EC); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.pv-status-top { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-soft,#a3a7b0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-status-icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; }
.pv-status-value { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-status-sub { font-size: 10.5px; color: var(--text-soft,#a3a7b0); }

/* Campanhas */
.camp-legend-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--text-soft,#a3a7b0); }
.camp-legend-row span { display: flex; align-items: center; gap: 5px; }
.camp-legend-row i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.camp-mes-table td, .camp-mes-table th { font-size: 12px; }
.camp-mes-nome { display: flex; align-items: center; gap: 8px; }
.camp-mes-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
.camp-mes-nome-text b { display: block; font-size: 12.5px; }
.camp-mes-nome-text span { display: block; font-size: 10.5px; color: var(--text-soft,#a3a7b0); }
.camp-progress-bar { width: 90px; height: 6px; background: #EFEFF2; border-radius: 6px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px; }
.camp-progress-bar > div { height: 100%; background: #7C5CE0; border-radius: 6px; }
#relatorio-overlay .camp-progress-bar > div { background: #3685C7; }
#metas-overlay .camp-progress-bar > div { background: #3685C7; }
.camp-action-icon { cursor: pointer; padding: 4px; color: var(--text-soft,#a3a7b0); }
.camp-action-icon:hover { color: var(--red,#002D57); }

/* Metas */
.mt-title-icon { width: 42px; height: 42px; border-radius: 12px; background: #E7F1FA; color: #3685C7; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.mt-legend { max-height: 280px; overflow-y: auto; }
.mt-legend .legend-row { font-size: 12px; }
.mt-legend .legend-icon { margin-right: 4px; }
.mt-dual-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mt-dual-legend h4 { font-size: 11.5px; font-weight: 700; color: var(--text-soft,#a3a7b0); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .3px; }
.mt-dual-legend .legend-row { padding: 5px 0; font-size: 11.5px; }
.mt-status-tag { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.mt-status-max { background: #E5F7EC; color: #1FA354; }
.mt-status-alvo { background: #E7F1FA; color: #3685C7; }
.mt-status-ok { background: #E5F7EC; color: #1FA354; }
.mt-status-min { background: #FFF1E0; color: #C2740A; }
.mt-status-abaixo { background: #FCE9EA; color: #E4032B; }

/* Comissões */
.com-rank-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #F5F5F7; }
.com-rank-row:last-child { border-bottom: none; }
.com-rank-pos { width: 18px; font-size: 13px; text-align: center; flex-shrink: 0; }
.com-rank-avatar { width: 26px; height: 26px; border-radius: 50%; background: #E7F1FA; color: #3685C7; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; }
.com-rank-info { flex: 1; min-width: 0; }
.com-rank-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.com-rank-bar-wrap { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.com-rank-bar { flex: 1; height: 5px; background: #EFEFF2; border-radius: 6px; overflow: hidden; }
.com-rank-bar > div { height: 100%; border-radius: 6px; }
.com-rank-right { text-align: right; flex-shrink: 0; }
.com-rank-valor { font-size: 12px; font-weight: 700; }
.com-rank-pct { font-size: 10.5px; color: var(--text-soft,#a3a7b0); }

.com-gauge-wrap { position: relative; display: flex; justify-content: center; margin: 4px 0 -10px; }
.com-gauge-center { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); text-align: center; }
.com-gauge-pct { font-size: 24px; font-weight: 800; }
.com-gauge-label { font-size: 11px; color: var(--text-soft,#a3a7b0); }
.com-gauge-value { text-align: center; font-size: 15px; font-weight: 800; margin-top: 8px; }
.com-gauge-sub { text-align: center; font-size: 11px; color: var(--text-soft,#a3a7b0); margin-bottom: 10px; }
.com-gauge-legend { display: flex; justify-content: space-around; font-size: 10.5px; color: var(--text-soft,#a3a7b0); text-align: center; margin-bottom: 10px; }
.com-gauge-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-bottom: 3px; }
.com-gauge-legend b { display: block; color: var(--text,#1a1a1e); font-size: 11.5px; }

/* Relatórios — coração da empresa */
.rel-period-toggle { display: flex; background: #F0F0F2; border-radius: 8px; padding: 3px; }
.rel-period-toggle button { border: none; background: none; padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; color: var(--text-soft,#a3a7b0); }
.rel-period-toggle button.active { background: #fff; color: var(--red,#002D57); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.rel-funil-wrap { display: flex; gap: 14px; align-items: center; }
.rel-funil-wrap .funnel { flex: 1; }
.rel-funil-table { flex: 1; font-size: 11px; border-collapse: collapse; }
.rel-funil-table th { text-align: left; font-weight: 600; color: var(--text-soft,#a3a7b0); padding-bottom: 6px; border-bottom: 1px solid var(--border,#E7E8EC); }
.rel-funil-table td { padding: 6px 4px 6px 0; border-bottom: 1px solid #F5F5F7; }

.rel-mini-table th, .rel-mini-table td { font-size: 11.5px; padding: 7px 6px; }
.rel-mini-table .rel-medal { margin-right: 2px; }

.rel-footer-note { font-size: 11.5px; color: var(--text-soft,#a3a7b0); padding: 6px 2px 0; }

.rel-resumo-item { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 7px 0; border-bottom: 1px solid #F5F5F7; }
.rel-resumo-item:last-child { border-bottom: none; }
.rel-resumo-item span { color: var(--text-soft,#a3a7b0); }
.rel-resumo-item b { font-weight: 700; }

.rel-ativ-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 12.5px; border-bottom: 1px solid #F5F5F7; }
.rel-ativ-row:last-child { border-bottom: none; }
.rel-ativ-row .rel-ativ-name { display: flex; align-items: center; gap: 8px; }

/* Agenda */
.ag-view-tabs { display: flex; gap: 6px; background: #F0F0F2; border-radius: 9px; padding: 4px; margin-bottom: 4px; }
.ag-view-tabs button { flex: 1; border: none; background: none; padding: 8px; font-size: 12.5px; font-weight: 600; border-radius: 7px; cursor: pointer; color: var(--text-soft,#a3a7b0); }
.ag-view-tabs button.active { background: #fff; color: var(--red,#002D57); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.ag-day-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid #3685C7; background: #F7FAFD; margin-bottom: 8px; }
.ag-day-icon { width: 30px; height: 30px; border-radius: 8px; background: #E7F1FA; color: #0C4A85; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ag-day-info { flex: 1; min-width: 0; }
.ag-day-title { font-size: 13px; font-weight: 700; }
.ag-day-sub { font-size: 11px; color: var(--text-soft,#a3a7b0); }
.ag-day-tag { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: #E7F1FA; color: #0C4A85; white-space: nowrap; }
.ag-day-time { font-size: 11px; color: var(--text-soft,#a3a7b0); flex-shrink: 0; white-space: nowrap; text-align: right; margin-left: 8px; }

.ag-prox-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid #F5F5F7; font-size: 12px; }
.ag-prox-row:last-child { border-bottom: none; }
.ag-prox-dot { width: 7px; height: 7px; border-radius: 50%; background: #3685C7; margin-top: 5px; flex-shrink: 0; }
.ag-prox-when { font-size: 10.5px; color: var(--text-soft,#a3a7b0); }
.ag-prox-title { font-weight: 700; }
.ag-prox-sub { font-size: 10.5px; color: var(--text-soft,#a3a7b0); }
.ag-prox-tag { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: #E7F1FA; color: #0C4A85; margin-left: auto; white-space: nowrap; }

.ag-pend-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12px; border-bottom: 1px solid #F5F5F7; }
.ag-pend-row:last-child { border-bottom: none; }
.ag-pend-tag { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.ag-pend-alta { background: #FCE9EA; color: #E4032B; }
.ag-pend-media { background: #E7F1FA; color: #1B67AC; }
.ag-pend-baixa { background: #E5F7EC; color: #1FA354; }

.ag-comp-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 12.5px; border-bottom: 1px solid #F5F5F7; }
.ag-comp-row:last-child { border-bottom: none; }

.ag-atalhos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ag-atalho-btn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border,#E7E8EC); background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.ag-atalho-btn:hover { border-color: #93C1E8; background: #F7FAFD; }

/* Tarefas (lista) */
.ag-sidebar .fatura-panel { margin-bottom: 14px; }
.ag-sidebar .fatura-panel:last-child { margin-bottom: 0; }
.tk-tipo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; margin-top: 10px; }
.tk-tipo-item { text-align: center; padding: 12px 6px; border: 1px solid var(--border,#E7E8EC); border-radius: 10px; }
.tk-tipo-icon { font-size: 18px; margin-bottom: 6px; }
.tk-tipo-count { font-size: 16px; font-weight: 800; }
.tk-tipo-label { font-size: 10.5px; color: var(--text-soft,#a3a7b0); }
.tk-prazo-row { padding: 8px 0; border-bottom: 1px solid #F5F5F7; font-size: 12px; }
.tk-prazo-row:last-child { border-bottom: none; }
.tk-prazo-tag { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-right: 6px; }
.tk-prazo-atrasado { background: #FCE9EA; color: #E4032B; }
.tk-prazo-hoje { background: #FFF1E0; color: #C2740A; }
.tk-prazo-amanha { background: #E7F1FA; color: #1B67AC; }

/* Propostas Comerciais */
.pp-form-layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1.1fr; gap: 12px; align-items: start; }
@media (max-width: 1400px) { .pp-form-layout { grid-template-columns: 1fr 1fr; } }
.pp-form-layout .ct-section { margin-bottom: 0; }
.pp-form-layout textarea { width: 100%; border: 1px solid var(--border,#E7E8EC); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical; }

.pp-preview-card { border: 1px solid var(--border,#E7E8EC); border-radius: 12px; overflow: hidden; }
.pp-preview-header { background: var(--red,#002D57); color: #fff; padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.pp-preview-empresa { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.pp-preview-titulo { text-align: right; font-size: 11px; opacity: .9; line-height: 1.5; }
.pp-preview-titulo span { font-weight: 700; font-size: 12px; }
.pp-preview-cliente-row { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border,#E7E8EC); }
.pp-preview-cliente-nome { font-weight: 700; font-size: 13px; }
.pp-preview-cliente-cpf { font-size: 11px; color: var(--text-soft,#a3a7b0); }
.pp-preview-section-title { font-size: 10.5px; font-weight: 700; color: var(--text-soft,#a3a7b0); text-transform: uppercase; letter-spacing: .3px; padding: 12px 16px 4px; }
.pp-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 16px; font-size: 11.5px; }
.pp-preview-grid div span { color: var(--text-soft,#a3a7b0); }
.pp-preview-grid div b { display: block; }
.pp-preview-resumo-row { padding: 0 16px; font-size: 11.5px; }
.pp-preview-resumo-row .ct-resumo-row { padding: 4px 0; }
.pp-preview-parcela-box { margin: 10px 16px; background: #E7F1FA; border-radius: 10px; padding: 10px 14px; text-align: center; }
.pp-preview-parcela-box span { display: block; font-size: 10.5px; color: #0C4A85; }
.pp-preview-parcela-box b { font-size: 18px; color: #0C4A85; }
.pp-preview-parcela-note { font-size: 9.5px !important; margin-top: 4px; }
.pp-preview-validade-box { margin: 0 16px 14px; font-size: 11px; color: var(--text-soft,#a3a7b0); }

/* Configurações do cliente */
.cc-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .cc-layout { grid-template-columns: 1fr; } }
.cc-sidebar-nav { background: #fff; border: 1px solid var(--border,#E7E8EC); border-radius: 13px; padding: 18px; }
.cc-client-card { text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--border,#E7E8EC); margin-bottom: 12px; }
.cc-client-avatar { width: 52px; height: 52px; border-radius: 50%; background: #E7F1FA; color: #0C4A85; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; margin: 0 auto 8px; }
.cc-client-name { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.cc-client-contacts { font-size: 11.5px; color: var(--text-soft,#a3a7b0); display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--border,#E7E8EC); margin-bottom: 10px; }
.cc-nav-list { display: flex; flex-direction: column; gap: 2px; }
.cc-nav-list button { display: flex; align-items: center; gap: 8px; text-align: left; border: none; background: none; padding: 9px 10px; border-radius: 8px; font-size: 12.5px; cursor: pointer; color: var(--text,#1a1a1e); }
.cc-nav-list button:hover { background: #F5F5F7; }
.cc-nav-list button.active { background: #E7F1FA; color: var(--red,#002D57); font-weight: 700; }
.cc-excluir-btn { width: 100%; margin-top: 14px; padding: 9px; border: none; background: none; color: #E4032B; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; border-radius: 8px; }
.cc-excluir-btn:hover { background: #FCE9EA; }

.cc-toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.cc-toggle input { opacity: 0; width: 0; height: 0; }
.cc-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #D9D9DE; border-radius: 20px; transition: .15s; }
.cc-toggle-slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .15s; }
.cc-toggle input:checked + .cc-toggle-slider { background: var(--red,#002D57); }
.cc-toggle input:checked + .cc-toggle-slider::before { transform: translateX(16px); }
.cc-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #F5F5F7; font-size: 12.5px; }
.cc-toggle-row:last-child { border-bottom: none; }

.cc-tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-tag { padding: 6px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 600; background: #E7F1FA; color: #0C4A85; }
.cc-obs-box { width: 100%; border: 1px solid #F0E4C0; background: #FFFBEB; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; font-family: inherit; resize: vertical; color: #7A6420; }