/* ============================================================
   FELIX EMPRESARIAL — Design System
   Identidade visual oficial: bordô + dourado, Oswald + Montserrat
   Usado pelo CRM (index.html) e pelo Relatório (relatorio.html)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Marca */
  --bordo:        #5E1E3A;   /* primária — bússola/relógio */
  --bordo-900:    #3F1226;
  --bordo-800:    #4C1730;
  --bordo-700:    #5E1E3A;
  --bordo-600:    #74274A;
  --bordo-300:    #B98BA1;
  --bordo-100:    #F0E3EA;   /* tinta clara de fundo */
  --bordo-050:    #F8F1F5;

  --ouro:         #EFB810;   /* dourado destaque */
  --ouro-300:     #F9DB5C;
  --ouro-700:     #C2900A;   /* dourado escuro p/ texto sobre claro */

  --tinta:        #1D1D1B;   /* texto principal */
  --grafite:      #2A2A2A;
  --cinza:        #707070;
  --cinza-400:    #9A9A9A;
  --cinza-300:    #C9C9C9;
  --cinza-200:    #E4E1DF;
  --cinza-100:    #EFEDEB;
  --papel:        #FFFFFF;
  --fundo:        #F6F3F1;   /* fundo quente do app */

  /* Semânticos */
  --ok:    #2E7D52;
  --ok-bg: #E5F2EB;
  --alerta:#B8860B;
  --alerta-bg:#FBF1D8;
  --erro:  #B23A48;
  --erro-bg:#F7E4E6;
  --info:  #2F5D8C;
  --info-bg:#E6EEF6;

  /* Tipografia */
  --font-display: 'Oswald','Bebas Neue','Arial Narrow',sans-serif;
  --font-body:    'Montserrat','Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Forma */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(29,29,27,.08), 0 1px 3px rgba(29,29,27,.06);
  --shadow-md: 0 6px 18px rgba(63,18,38,.10);
  --shadow-lg: 0 18px 48px rgba(63,18,38,.18);
  --ring: 0 0 0 3px rgba(239,184,16,.45);

  --side-w: 248px;
  --topbar-h: 64px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  color:var(--tinta);
  background:var(--fundo);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em; margin:0; color:var(--tinta); line-height:1.08; }
h1{ font-size:34px; } h2{ font-size:24px; } h3{ font-size:18px; } h4{ font-size:15px; }
a{ color:var(--bordo-600); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--ouro-300); color:var(--bordo-900); }

/* Scrollbar */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:var(--cinza-300); border-radius:20px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--bordo-300); background-clip:content-box; }

/* ---------- Wordmark / lockup ---------- */
.felix-lockup{ display:flex; align-items:center; gap:12px; }
.felix-lockup img{ height:34px; width:auto; display:block; }
.felix-word{ font-family:var(--font-display); line-height:.92; }
.felix-word .b1{ font-size:21px; font-weight:600; letter-spacing:.16em; display:block; }
.felix-word .b2{ font-family:var(--font-body); font-size:9.5px; font-weight:600; letter-spacing:.42em; display:block; opacity:.85; }

/* ---------- App shell ---------- */
.app{ display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100vh; }

.sidebar{
  background:linear-gradient(178deg,var(--bordo-800) 0%,var(--bordo-900) 100%);
  color:#F3E7EE; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  overflow:hidden;
}
.sidebar::before{ /* pattern motif */
  content:""; position:absolute; inset:0; background-image:url('../assets/felix-pattern-2.png');
  background-size:520px; opacity:.05; mix-blend-mode:screen; pointer-events:none;
}
.sidebar-brand{ padding:22px 20px 16px; border-bottom:1px solid rgba(255,255,255,.10); position:relative; }
.sidebar-brand .brand-logo{ height:48px; width:auto; display:block; }
.sidebar-brand .felix-word .b1{ color:#fff; } .sidebar-brand .felix-word .b2{ color:var(--ouro-300); opacity:1; }
.sidebar-tag{ font-size:10.5px; letter-spacing:.04em; color:var(--bordo-300); margin-top:10px; font-style:italic; }

.nav{ padding:14px 12px; display:flex; flex-direction:column; gap:3px; position:relative; }
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:var(--r-md);
  color:#EBD9E2; font-weight:500; font-size:13.5px; border:none; background:transparent; width:100%; text-align:left;
  transition:background .15s,color .15s;
}
.nav-item .ic{ width:20px; text-align:center; font-size:15px; opacity:.92; }
.nav-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active{ background:var(--ouro); color:var(--bordo-900); font-weight:600; box-shadow:var(--shadow-sm); }
.nav-item.active .ic{ opacity:1; }
.nav-sep{ height:1px; background:rgba(255,255,255,.10); margin:10px 14px; }
.sidebar-foot{ margin-top:auto; padding:16px 18px; font-size:10.5px; color:var(--bordo-300); position:relative; border-top:1px solid rgba(255,255,255,.10); }

/* ---------- Main ---------- */
.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{
  height:var(--topbar-h); background:var(--papel); border-bottom:1px solid var(--cinza-200);
  display:flex; align-items:center; gap:16px; padding:0 26px; position:sticky; top:0; z-index:30;
}
.topbar h1{ font-size:22px; }
.topbar .crumb{ color:var(--cinza); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.topbar .spacer{ flex:1; }
.content{ padding:24px 26px 60px; }
.view{ display:none; } .view.active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ---------- Section bar (estilo panfleto FELIX) ---------- */
.section-bar{
  display:flex; align-items:center; gap:12px; background:var(--bordo); color:#fff;
  padding:9px 16px; border-radius:var(--r-md); margin:26px 0 16px; box-shadow:var(--shadow-sm);
}
.section-bar.gold{ background:var(--ouro); color:var(--bordo-900); }
.section-bar h3{ color:inherit; font-size:15px; letter-spacing:.14em; text-transform:uppercase; }
.section-bar .ic{ font-size:16px; }
.section-bar .tail{ margin-left:auto; font-family:var(--font-body); font-size:11.5px; font-weight:600; opacity:.85; letter-spacing:0; text-transform:none; }
.eyebrow{ font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ouro-700); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; border-radius:var(--r-md);
  padding:8px 15px; font-size:13px; font-weight:600; background:var(--cinza-100); color:var(--tinta);
  transition:transform .08s, box-shadow .15s, background .15s, border-color .15s; white-space:nowrap;
}
.btn:hover{ box-shadow:var(--shadow-sm); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--bordo); color:#fff; }
.btn-primary:hover{ background:var(--bordo-600); }
.btn-gold{ background:var(--ouro); color:var(--bordo-900); }
.btn-gold:hover{ background:var(--ouro-300); }
.btn-ghost{ background:transparent; border-color:var(--cinza-300); color:var(--grafite); }
.btn-ghost:hover{ border-color:var(--bordo); color:var(--bordo); background:var(--bordo-050); }
.btn-sm{ padding:5px 10px; font-size:12px; }
.btn-icon{ padding:7px 9px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------- Cards ---------- */
.card{ background:var(--papel); border:1px solid var(--cinza-200); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.card-pad{ padding:18px; }
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-auto{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }

/* KPI */
.kpi{ position:relative; overflow:hidden; padding:18px 18px 16px; }
.kpi::after{ content:""; position:absolute; right:-18px; top:-18px; width:74px; height:74px; border-radius:50%; background:var(--bordo-050); }
.kpi .ic{ position:absolute; right:16px; top:16px; font-size:20px; color:var(--bordo-300); z-index:1; }
.kpi .label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cinza); }
.kpi .value{ font-family:var(--font-display); font-size:38px; font-weight:600; color:var(--bordo); line-height:1; margin:6px 0 2px; }
.kpi .sub{ font-size:11.5px; color:var(--cinza); }
.kpi.gold .value{ color:var(--ouro-700); } .kpi.gold::after{ background:var(--alerta-bg); }
.kpi.ink .value{ color:var(--tinta); }

/* ---------- Badges / tags / pills ---------- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; line-height:1.4; white-space:nowrap; }
.badge-bordo{ background:var(--bordo-100); color:var(--bordo); }
.badge-gold{ background:var(--alerta-bg); color:var(--alerta); }
.badge-ok{ background:var(--ok-bg); color:var(--ok); }
.badge-erro{ background:var(--erro-bg); color:var(--erro); }
.badge-info{ background:var(--info-bg); color:var(--info); }
.badge-cinza{ background:var(--cinza-100); color:var(--cinza); }
.badge-dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }

.temp{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.temp-quente{ background:#FCE6DF; color:#C0492B; }
.temp-morno{ background:var(--alerta-bg); color:#A9790B; }
.temp-frio{ background:var(--info-bg); color:#3C6390; }
.temp-incompleto{ background:var(--cinza-100); color:var(--cinza); }
.temp-revisar{ background:var(--erro-bg); color:var(--erro); }

/* ---------- Progress ---------- */
.bar{ height:8px; border-radius:999px; background:var(--cinza-200); overflow:hidden; }
.bar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--bordo),var(--bordo-600)); border-radius:999px; }
.bar.gold > span{ background:linear-gradient(90deg,var(--ouro-700),var(--ouro)); }

/* mini bar list (distribuições) */
.distrib{ display:flex; flex-direction:column; gap:9px; }
.distrib .row{ display:grid; grid-template-columns:140px 1fr 44px; align-items:center; gap:10px; font-size:12.5px; }
.distrib .row .t{ color:var(--grafite); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.distrib .row .v{ text-align:right; font-weight:700; color:var(--bordo); font-variant-numeric:tabular-nums; }
.distrib .track{ height:14px; background:var(--cinza-100); border-radius:6px; overflow:hidden; }
.distrib .track > span{ display:block; height:100%; background:linear-gradient(90deg,var(--bordo-600),var(--bordo)); border-radius:6px; }
.distrib .track.g > span{ background:linear-gradient(90deg,var(--ouro),var(--ouro-300)); }

/* ---------- Filtros / inputs ---------- */
.input, .select{
  font-family:inherit; font-size:13px; color:var(--tinta); background:var(--papel);
  border:1px solid var(--cinza-300); border-radius:var(--r-md); padding:8px 11px; outline:none; width:100%;
}
.input:focus, .select:focus{ border-color:var(--bordo); box-shadow:var(--ring); }
.search{ position:relative; }
.search input{ padding-left:34px; }
.search .ic{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--cinza); font-size:14px; }
.filterbar{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.filterbar .select{ width:auto; min-width:150px; }
.chip{ display:inline-flex; align-items:center; gap:6px; background:var(--bordo-050); color:var(--bordo); border:1px solid var(--bordo-100); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; }
.chip button{ border:none; background:none; color:var(--bordo-600); font-size:14px; line-height:1; padding:0; }

/* ---------- Tabela ---------- */
.tablewrap{ background:var(--papel); border:1px solid var(--cinza-200); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
table.felix{ width:100%; border-collapse:collapse; font-size:13px; }
table.felix thead th{
  background:var(--bordo); color:#fff; text-align:left; font-family:var(--font-body); font-weight:600;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:11px 14px; position:sticky; top:0; white-space:nowrap;
}
table.felix thead th.sortable{ cursor:pointer; user-select:none; }
table.felix thead th.sortable:hover{ background:var(--bordo-600); }
table.felix thead th .arr{ color:var(--ouro-300); margin-left:4px; }
table.felix tbody td{ padding:10px 14px; border-bottom:1px solid var(--cinza-100); vertical-align:middle; }
table.felix tbody tr{ cursor:pointer; transition:background .12s; }
table.felix tbody tr:hover{ background:var(--bordo-050); }
table.felix tbody tr:last-child td{ border-bottom:none; }
.cell-name{ font-weight:600; color:var(--tinta); }
.cell-sub{ color:var(--cinza); font-size:11.5px; }
.avatar{ width:30px; height:30px; border-radius:50%; background:var(--bordo-100); color:var(--bordo); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; font-family:var(--font-display); flex:none; }
.score-pill{ font-family:var(--font-display); font-weight:600; font-size:14px; min-width:34px; text-align:center; padding:2px 6px; border-radius:6px; display:inline-block; }

.tablefoot{ display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--papel); border-top:1px solid var(--cinza-100); font-size:12.5px; color:var(--cinza); }
.pager{ display:flex; gap:4px; margin-left:auto; }
.pager button{ border:1px solid var(--cinza-300); background:var(--papel); border-radius:7px; padding:5px 10px; font-size:12.5px; font-weight:600; color:var(--grafite); }
.pager button:hover{ border-color:var(--bordo); color:var(--bordo); }
.pager button.on{ background:var(--bordo); color:#fff; border-color:var(--bordo); }
.pager button[disabled]{ opacity:.4; cursor:not-allowed; }

/* ---------- Drawer (ficha) ---------- */
.scrim{ position:fixed; inset:0; background:rgba(31,12,22,.45); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s; z-index:60; }
.scrim.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(520px,94vw); background:var(--papel); z-index:61;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
}
.drawer.open{ transform:none; }
.drawer-head{ background:linear-gradient(150deg,var(--bordo-800),var(--bordo-900)); color:#fff; padding:20px 22px; position:relative; overflow:hidden; }
.drawer-head::before{ content:""; position:absolute; inset:0; background:url('../assets/felix-pattern-2.png'); background-size:360px; opacity:.06; mix-blend-mode:screen; }
.drawer-head .close{ position:absolute; right:14px; top:14px; background:rgba(255,255,255,.12); border:none; color:#fff; width:32px; height:32px; border-radius:8px; font-size:17px; }
.drawer-head .close:hover{ background:rgba(255,255,255,.22); }
.drawer-head .dh-top{ display:flex; gap:14px; align-items:center; position:relative; }
.drawer-head .avatar{ width:48px; height:48px; font-size:17px; background:var(--ouro); color:var(--bordo-900); }
.drawer-head h2{ color:#fff; font-size:21px; }
.drawer-head .meta{ color:var(--bordo-300); font-size:12.5px; margin-top:2px; }
.drawer-body{ padding:18px 22px; overflow-y:auto; flex:1; }
.fld-group{ margin-bottom:18px; }
.fld-group > .gh{ font-family:var(--font-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bordo); border-bottom:2px solid var(--bordo-100); padding-bottom:5px; margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.fld{ display:grid; grid-template-columns:140px 1fr; gap:8px; padding:5px 0; font-size:13px; }
.fld .k{ color:var(--cinza); font-weight:600; }
.fld .v{ color:var(--tinta); word-break:break-word; }
.fld .v.empty{ color:var(--cinza-400); font-style:italic; }
.fld .v.orig{ color:var(--alerta); font-size:11.5px; }
.drawer-foot{ border-top:1px solid var(--cinza-200); padding:14px 22px; display:flex; gap:8px; flex-wrap:wrap; background:var(--fundo); }
textarea.notes{ width:100%; min-height:74px; resize:vertical; }

/* ---------- Kanban ---------- */
.kanban{ display:flex; gap:14px; overflow-x:auto; padding:4px 2px 18px; align-items:flex-start; }
.kcol{ flex:0 0 280px; background:var(--cinza-100); border-radius:var(--r-lg); display:flex; flex-direction:column; max-height:calc(100vh - 220px); }
.kcol-head{ padding:12px 14px; border-bottom:2px solid var(--cinza-200); display:flex; align-items:center; gap:8px; position:sticky; top:0; background:var(--cinza-100); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.kcol-head .dot{ width:10px; height:10px; border-radius:50%; }
.kcol-head .nm{ font-family:var(--font-display); font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--grafite); }
.kcol-head .ct{ margin-left:auto; background:var(--papel); color:var(--cinza); font-weight:700; font-size:11px; padding:2px 8px; border-radius:999px; }
.kcol-body{ padding:10px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; }
.kcard{ background:var(--papel); border:1px solid var(--cinza-200); border-left:4px solid var(--bordo); border-radius:var(--r-md); padding:11px 12px; box-shadow:var(--shadow-sm); cursor:grab; }
.kcard:hover{ box-shadow:var(--shadow-md); }
.kcard.dragging{ opacity:.5; }
.kcard .nm{ font-weight:600; font-size:13px; color:var(--tinta); }
.kcard .meta{ font-size:11px; color:var(--cinza); margin-top:2px; }
.kcard .foot{ display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.kcol.dragover{ outline:2px dashed var(--ouro); outline-offset:-4px; }
.kcol-more{ text-align:center; padding:8px; font-size:12px; color:var(--bordo); font-weight:600; cursor:pointer; }

/* ---------- Listas de qualidade ---------- */
.qlist{ display:flex; flex-direction:column; }
.qitem{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--cinza-100); font-size:13px; }
.qitem:hover{ background:var(--bordo-050); cursor:pointer; }
.qitem .nm{ font-weight:600; } .qitem .em{ color:var(--cinza); font-size:11.5px; }
.qitem .tail{ margin-left:auto; }

/* ---------- Empty / star ---------- */
.empty-state{ text-align:center; padding:50px 20px; color:var(--cinza); }
.empty-state .ic{ font-size:40px; opacity:.4; }
.star{ background:none; border:none; font-size:16px; color:var(--cinza-300); padding:0; line-height:1; }
.star.on{ color:var(--ouro); }

/* ---------- Tooltip ---------- */
.muted{ color:var(--cinza); } .num{ font-variant-numeric:tabular-nums; }
.flex{ display:flex; } .between{ justify-content:space-between; } .center{ align-items:center; } .gap{ gap:10px; } .wrap{ flex-wrap:wrap; }
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}

/* ---------- Toast ---------- */
.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--bordo-900); color:#fff; padding:11px 20px; border-radius:999px; font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.25s; z-index:90; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .g{ color:var(--ouro-300); }

/* ---------- Responsivo ---------- */
@media (max-width:980px){
  :root{ --side-w:0px; }
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:0; top:0; width:240px; transform:translateX(-100%); transition:transform .25s; z-index:80; }
  .sidebar.open{ transform:none; }
  .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; }
  .menu-toggle{ display:inline-flex !important; }
}
.menu-toggle{ display:none; }