/* Assis & Mollerke — CRM de Cobrança
   Paleta: navy #1B2050, navy escuro #12162E, dourado sóbrio #A98B4F,
   branco #FFFFFF, cinza-papel #F4F5F8, texto #21243B */

:root{
  --navy: #1B2050;
  --navy-dark: #12162E;
  --navy-mid: #2A3070;
  --gold: #A98B4F;
  --paper: #F4F5F8;
  --white: #FFFFFF;
  --text: #21243B;
  --text-soft: #5B5F7A;
  --border: #E2E4EE;
  --success: #1E7A46;
  --success-bg: #E7F5EC;
  --error: #B3312C;
  --error-bg: #FBEAE9;
  --radius: 6px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: "Source Sans Pro","Segoe UI",Arial,sans-serif;
  background: var(--paper);
  color: var(--text);
  min-height:100vh;
}
h1,h2,h3,.brand-serif{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
a{color:var(--navy-mid); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- Layout com barra lateral ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:230px; flex-shrink:0;
  background: var(--navy-dark);
  color: #D8DAEE;
  display:flex; flex-direction:column;
  padding: 22px 0;
}
.sidebar .brand{
  display:flex; flex-direction:column; align-items:center;
  padding: 0 16px 20px; margin-bottom:10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar .brand img{width:64px; height:auto; margin-bottom:8px;}
.sidebar .brand .name{font-size:14px; letter-spacing:1px; font-weight:700; color:#fff; text-align:center;}
.sidebar .brand .tag{font-size:10px; letter-spacing:1.5px; color:var(--gold); margin-top:2px; text-align:center;}

.nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 11px 22px; font-size:14px; color:#C3C6E0;
  border-left:3px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,0.05); text-decoration:none; color:#fff;}
.nav-item.active{background:rgba(169,139,79,0.15); border-left-color: var(--gold); color:#fff; font-weight:600;}
.nav-spacer{flex:1;}
.nav-footer{padding: 14px 22px; font-size:11px; color:#7A7DA0; border-top:1px solid rgba(255,255,255,0.08); margin-top:10px;}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--white); border-bottom:1px solid var(--border);
  padding: 14px 28px;
}
.topbar .user-chip{font-size:13px; color:var(--text-soft);}
.topbar .user-chip strong{color:var(--text);}
.content{padding: 26px 28px 50px; flex:1;}

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 20%, var(--navy-mid), var(--navy-dark) 65%);
}
.login-card{
  background: var(--white); border-radius: 10px; padding: 40px 40px 32px;
  width: 380px; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  text-align:center;
}
.login-card img{width:96px; margin-bottom:6px;}
.login-card h1{font-size:20px; margin:6px 0 0; color:var(--navy);}
.login-card .tag{font-size:11px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:26px;}
.login-card form{text-align:left;}

/* ---------- Forms ---------- */
label{display:block; font-size:12.5px; font-weight:600; color:var(--text-soft); margin-bottom:5px; letter-spacing:.2px;}
input[type=text],input[type=password],input[type=search],select,textarea,input[type=file]{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:14px; margin-bottom:16px; background:var(--white); color:var(--text); font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background: var(--navy); color:#fff; border:none; padding:11px 22px;
  border-radius: var(--radius); font-size:14px; font-weight:600; cursor:pointer;
  transition: background .15s ease;
}
.btn:hover{background:var(--navy-mid); text-decoration:none;}
.btn.btn-gold{background:var(--gold); color:#241C0A;}
.btn.btn-gold:hover{background:#BC9C5D;}
.btn.btn-outline{background:transparent; color:var(--navy); border:1px solid var(--navy);}
.btn.btn-outline:hover{background:var(--navy); color:#fff;}
.btn.btn-danger{background:var(--error); }
.btn.btn-danger:hover{background:#8f2622;}
.btn.btn-block{width:100%;}
.btn-sm{padding:6px 12px; font-size:12.5px;}

/* ---------- Flash messages ---------- */
.flash{padding:12px 16px; border-radius: var(--radius); margin-bottom:18px; font-size:14px;}
.flash.sucesso{background:var(--success-bg); color:var(--success); border:1px solid #bfe4cd;}
.flash.erro{background:var(--error-bg); color:var(--error); border:1px solid #f0c6c4;}

/* ---------- Cards / KPIs ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:26px;}
.kpi-card{
  background:var(--white); border:1px solid var(--border); border-radius:8px; padding:18px 20px;
  border-top:3px solid var(--navy);
}
.kpi-card.gold{border-top-color:var(--gold);}
.kpi-card .num{font-size:28px; font-weight:700; color:var(--navy); font-family:"Playfair Display",serif;}
.kpi-card .label{font-size:12.5px; color:var(--text-soft); margin-top:4px; text-transform:uppercase; letter-spacing:.4px;}

.panel{background:var(--white); border:1px solid var(--border); border-radius:8px; padding:22px 24px; margin-bottom:22px;}
.panel h2{font-size:17px; margin:0 0 16px; color:var(--navy);}
.panel h3{font-size:14px; margin:0 0 12px; color:var(--navy);}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{
  text-align:left; padding:9px 12px; background:var(--paper); color:var(--text-soft);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; border-bottom:2px solid var(--border);
}
td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
tr:hover td{background:#FAFBFD;}

/* ---------- Badges ---------- */
.badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.3px;}
.badge-real{background:#E7F5EC; color:var(--success);}
.badge-arquivo{background:#EDF0FB; color:var(--navy-mid);}
.badge-sim{background:#FCEFDD; color:#8A5A16;}
.badge-nao{background:#EEF0F4; color:var(--text-soft);}

/* ---------- Search box ---------- */
.search-box{display:flex; gap:10px; margin-bottom:22px;}
.search-box input{margin-bottom:0; flex:1;}

/* ---------- Ficha do cliente ---------- */
.ficha-header{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;}
.ficha-header .cpf{font-family:"Playfair Display",serif; font-size:24px; color:var(--navy);}
.ficha-header .nome{font-size:14px; color:var(--text-soft);}
.phones-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.phone-chip{background:var(--paper); border:1px solid var(--border); border-radius:20px; padding:4px 12px; font-size:12.5px;}

.filter-tabs{display:flex; gap:8px; margin: 18px 0;}
.filter-tabs a{
  padding:7px 16px; border-radius:20px; font-size:13px; font-weight:600;
  border:1px solid var(--border); color:var(--text-soft); background:var(--white);
}
.filter-tabs a.active{background:var(--navy); color:#fff; border-color:var(--navy);}

.timeline{border-left:2px solid var(--border); margin-left:8px; padding-left:22px;}
.timeline-item{position:relative; padding-bottom:20px;}
.timeline-item::before{
  content:""; position:absolute; left:-28px; top:4px; width:11px; height:11px; border-radius:50%;
  background:var(--gold); border:2px solid var(--white); box-shadow:0 0 0 2px var(--border);
}
.timeline-item .t-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.timeline-item .t-date{font-weight:700; font-size:13.5px; color:var(--navy);}
.timeline-item .t-tipo{font-size:14px; font-weight:600; margin-top:4px;}
.timeline-item .t-meta{font-size:12.5px; color:var(--text-soft); margin-top:3px;}
.timeline-item .t-origin{
  font-size:11.5px; color:var(--text-soft); margin-top:6px; padding-top:6px;
  border-top:1px dashed var(--border); font-style:italic;
}
.timeline-item .t-origin strong{color:var(--navy-mid); font-style:normal;}

.empty-state{text-align:center; padding:50px 20px; color:var(--text-soft);}
.empty-state .big{font-size:40px; margin-bottom:10px;}

.helptext{font-size:12.5px; color:var(--text-soft); margin-top:-8px; margin-bottom:16px;}

.two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:22px;}
@media (max-width:900px){ .two-col{grid-template-columns:1fr;} .app-shell{flex-direction:column;} .sidebar{width:100%;} }