/* assets/css/paginas.css
   Cartões, tabelas e blocos específicos de página. */

═══════════════════════════════════════════════ */
.cards{display:grid;gap:14px;margin-bottom:var(--sp-6)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:var(--surface-glass);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--sp-5);
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 60%);
  pointer-events:none;border-radius:inherit;
}
.card:hover{
  border-color:var(--border-strong);
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}
.card-label{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--text-muted);margin-bottom:var(--sp-2);
}
.card-value{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.card-sub{font-size:12px;color:var(--text-secondary);margin-top:var(--sp-2)}
.card-green .card-value{color:var(--green)}
.card-red .card-value{color:var(--red)}
.card-blue .card-value{color:var(--accent)}
.card-yellow .card-value{color:var(--yellow)}
.card-purple .card-value{color:var(--purple)}
.card-gold .card-value{color:var(--gold)}

/* Accent strip */
.card-green{border-top:2px solid var(--green)}
.card-red{border-top:2px solid var(--red)}
.card-blue{border-top:2px solid var(--accent)}
.card-yellow{border-top:2px solid var(--yellow)}
.card-purple{border-top:2px solid var(--purple)}
.card-gold{border-top:2px solid var(--gold)}

/* ═══════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════ */
.table-wrap{
  background:var(--surface-glass);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:auto;margin-bottom:var(--sp-6);
  box-shadow:var(--shadow-sm);
}
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  background:rgba(255,255,255,.03);
  padding:10px 14px;text-align:right;
  font-weight:700;font-size:10px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--text-muted);
  white-space:nowrap;border-bottom:1px solid var(--border);
}
body.light th{background:rgba(0,0,0,.03)}
th:first-child{text-align:left}
td{
  padding:9px 14px;text-align:right;
  border-bottom:1px solid var(--border);
  white-space:nowrap;color:var(--text);
}
td:first-child{text-align:left}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface-glass-hover)}
.total-row td{
  font-weight:700;
  background:rgba(255,255,255,.04);
  border-top:1px solid var(--border-strong);
}
body.light .total-row td{background:rgba(0,0,0,.03)}
.section-row td{
  font-weight:700;color:var(--gold);
  background:var(--gold-dim);
  font-size:11px;text-transform:uppercase;letter-spacing:.6px;
}
.despesas-table table{min-width:1480px;table-layout:auto;font-size:11.5px}
.despesas-table th,.despesas-table td{padding:7px 6px;line-height:1.2}
.despesas-table th:nth-child(-n+3),.despesas-table td:nth-child(-n+3){text-align:left}
.despesas-table th:first-child,.despesas-table td:first-child{padding-left:10px;width:62px}
.despesas-table th:nth-child(2),.despesas-table td:nth-child(2){width:120px}
.despesas-table th:nth-child(3),.despesas-table td:nth-child(3){width:190px;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.despesas-table th:nth-last-child(2),.despesas-table td:nth-last-child(2){width:82px}
.despesas-table th:last-child,.despesas-table td:last-child{width:108px;padding-right:8px}
.despesas-table .desp-desc-cell{width:100%;text-align:left}
.pos{color:var(--green)}
.neg{color:var(--red)}

/* ═══════════════════════════════════════════════
   CHARTS
═══════════════════════════════════════════════ */
.charts{display:grid;gap:14px;margin-bottom:var(--sp-6)}
.charts-2{grid-template-columns:repeat(2,1fr)}
.charts-3{grid-template-columns:repeat(3,1fr)}
.chart-card{
  background:var(--surface-glass);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--sp-5);
  box-shadow:var(--shadow-sm);
}
.chart-title{
  font-size:13px;font-weight:600;margin-bottom:14px;
  color:var(--text-secondary);letter-spacing:.1px;
}
.chart-wrap{position:relative;height:220px}

/* ═══════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════ */
.form-grid{display:grid;gap:12px}
.form-2{grid-template-columns:1fr 1fr}
.form-3{grid-template-columns:1fr 1fr 1fr}
.form-4{grid-template-columns:1fr 1fr 1fr 1fr}
label{
  display:block;font-size:10px;font-weight:700;
  color:var(--text-muted);margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.8px;
}
input[type=text],input[type=number],input[type=password],select,textarea{
  width:100%;padding:10px 12px;
  background:var(--surface-glass);
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  color:var(--text);font-size:13px;font-family:var(--font);outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-dim);
}
select option{background:var(--surface-2);color:var(--text)}

.btn{
  padding:9px 18px;border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;font-size:13px;font-weight:600;
  font-family:var(--font);
}
.btn:active{transform:scale(.98)}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),#B8901F);
  color:#0a0800;border-color:transparent;
  box-shadow:0 2px 10px rgba(201,162,39,.25);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  box-shadow:0 4px 16px rgba(201,162,39,.35);
}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:rgba(239,68,68,.3)}
.btn-danger:hover{background:rgba(239,68,68,.2)}
.btn-secondary{
  background:var(--surface-glass);
  color:var(--text-secondary);
  border-color:var(--border-strong);
}
.btn-secondary:hover{background:var(--surface-glass-hover);color:var(--text)}
.btn-green{background:var(--green-bg);color:var(--green);border-color:rgba(34,197,94,.3)}
.btn-green:hover{background:rgba(34,197,94,.2)}

/* ═══════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════ */
.tabs{
  display:flex;gap:3px;margin-bottom:20px;
  background:var(--surface-glass);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:3px;width:fit-content;
}
.tab{
  padding:8px 16px;border-radius:var(--r-xs);
  cursor:pointer;font-size:13px;font-weight:500;
  color:var(--text-muted);
}
.tab:hover:not(.active){color:var(--text);background:var(--surface-glass-hover)}
.tab.active{
  background:var(--gold-dim);
  color:var(--gold);font-weight:700;
  border:1px solid var(--gold-border);
}

/* ═══════════════════════════════════════════════
   BADGES & TAGS
═══════════════════════════════════════════════ */
.badge{
  display:inline-block;padding:3px 9px;
  border-radius:var(--r-full);font-size:10px;font-weight:700;
  letter-spacing:.3px;
}
.badge-green{background:var(--green-bg);color:var(--green);border:1px solid rgba(34,197,94,.2)}
.badge-red{background:var(--red-bg);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.badge-yellow{background:var(--yellow-bg);color:var(--yellow);border:1px solid rgba(245,158,11,.2)}
.badge-blue{background:var(--accent-bg);color:var(--accent);border:1px solid rgba(75,158,255,.2)}
.badge-gray{background:var(--surface-glass);color:var(--text-muted);border:1px solid var(--border)}
.badge-gold{background:var(--gold-dim);color:var(--gold);border:1px solid var(--gold-border)}
.tag{
  display:inline-block;padding:2px 8px;
  border-radius:var(--r-xs);font-size:11px;
  background:var(--surface-glass);color:var(--text-muted);
  border:1px solid var(--border);margin:2px;
}

/* ═══════════════════════════════════════════════
   DRE
═══════════════════════════════════════════════ */
.dre-row{display:grid;grid-template-columns:220px repeat(9,1fr);gap:0;font-size:12px}
.dre-row>div{padding:7px 10px;border-bottom:1px solid var(--border)}
.dre-label{color:var(--text);font-weight:500}
.dre-head{font-weight:700;color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px;background:rgba(255,255,255,.03)}
.dre-section{font-weight:700;color:var(--gold);background:var(--gold-dim);font-size:11px;text-transform:uppercase}
.dre-total{font-weight:700;background:rgba(255,255,255,.04)}
.dre-indent{padding-left:24px!important;color:var(--text-muted)}

/* ═══════════════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════════════ */
.section-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.section-hdr h3{font-size:15px;font-weight:700}

/* ═══════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════ */