/* components.css */

/* KPI Cards */
.kpi-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:16px 18px; border-left:4px solid var(--color-border); }
.kpi-card:hover { box-shadow:var(--shadow-sm); }
.kpi-card.accent-blue  { border-left-color:var(--color-accent); }
.kpi-card.accent-green { border-left-color:var(--color-success); }
.kpi-card.accent-amber { border-left-color:var(--color-warning); }
.kpi-card.accent-red   { border-left-color:var(--color-danger); }
.kpi-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--color-hint); margin-bottom:7px; }
.kpi-value { font-size:23px; font-weight:600; letter-spacing:-.5px; line-height:1; margin-bottom:5px; color:var(--color-text); }
.kpi-sub   { font-size:12px; color:var(--color-hint); }
.kpi-sub.up   { color:var(--color-success); }
.kpi-sub.down { color:var(--color-danger); }

/* Stat mini */
.stat-mini { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:13px 16px; }
.stat-mini-label { font-size:11px; color:var(--color-hint); margin-bottom:4px; font-weight:500; }
.stat-mini-value { font-size:19px; font-weight:600; letter-spacing:-.3px; color:var(--color-text); }
.stat-mini-value.success { color:var(--color-success); }
.stat-mini-value.warning { color:var(--color-warning); }
.stat-mini-value.danger  { color:var(--color-danger); }

/* Card */
.card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:16px; }
.card:last-child { margin-bottom:0; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.card-title  { font-size:14px; font-weight:600; }
.card-action { font-size:12px; color:var(--color-accent); background:none; border:none; cursor:pointer; font-weight:500; padding:0; }
.card-action:hover { text-decoration:underline; }

/* Table */
.inner-table { width:100%; border-collapse:collapse; }
.inner-table th { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--color-hint); text-align:left; padding:0 10px 9px 0; border-bottom:1px solid var(--color-border-s); }
.inner-table th:last-child { text-align:right; padding-right:0; }
.inner-table td { padding:10px 10px 10px 0; border-bottom:1px solid var(--color-border-s); font-size:13px; vertical-align:middle; }
.inner-table td:last-child { text-align:right; padding-right:0; }
.inner-table tr:last-child td { border-bottom:none; }
.inner-table tr:hover td { background:#FAFAF8; }
.cell-main { font-weight:500; }
.cell-sub  { font-size:11px; color:var(--color-hint); margin-top:2px; }
.cell-amount { font-weight:600; font-family:var(--font-mono); font-size:13px; }
.cell-amount.income  { color:var(--color-success); }
.cell-amount.expense { color:var(--color-danger); }

/* Badges */
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge-green { background:var(--color-success-bg); color:var(--color-success); }
.badge-amber { background:var(--color-warning-bg); color:var(--color-warning); }
.badge-red   { background:var(--color-danger-bg);  color:var(--color-danger); }
.badge-blue  { background:var(--color-accent-light); color:var(--color-accent); }
.badge-gray  { background:#F0EFEB; color:#5A5A55; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-muted); cursor:pointer; transition:all .12s; font-family:var(--font-main); }
.btn:hover { background:var(--color-bg); color:var(--color-text); }
.btn-primary { background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.btn-primary:hover { background:#153F80; border-color:#153F80; color:#fff; }
.btn-danger  { background:var(--color-danger-bg); color:var(--color-danger); border-color:#F5B5B5; }
.btn-danger:hover  { background:#FDD; }
.btn-sm  { padding:5px 12px; font-size:12px; }
.btn-pdf { background:#D62B2B; color:#fff; border-color:#D62B2B; }
.btn-pdf:hover { background:#B02020; }
.btn-icon { padding:6px; border-radius:var(--radius-sm); }
.btn-icon:hover { background:var(--color-bg); }
.btn:disabled { opacity:.5; pointer-events:none; }

/* Forms */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-full { grid-column:1/-1; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-size:11px; font-weight:600; color:var(--color-muted); text-transform:uppercase; letter-spacing:.05em; }
.form-group input, .form-group select, .form-group textarea {
  padding:9px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm);
  font-size:13px; color:var(--color-text); background:var(--color-surface);
  outline:none; transition:border .12s, box-shadow .12s; font-family:var(--font-main);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(26,86,160,.08);
}
.form-group textarea { resize:vertical; min-height:70px; }
.form-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--color-border-s); }

/* Divider */
.divider { border:none; border-top:1px solid var(--color-border-s); margin:16px 0; }

/* Delete confirm */
.delete-confirm { background:var(--color-danger-bg); border:1px solid #F5B5B5; border-radius:var(--radius-md); padding:12px 16px; font-size:13px; color:var(--color-danger); margin-bottom:16px; }

/* Tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--color-border); margin-bottom:20px; }
.tab  { padding:8px 16px; font-size:13px; color:var(--color-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .12s; }
.tab:hover { color:var(--color-text); }
.tab.active { color:var(--color-accent); border-bottom-color:var(--color-accent); font-weight:500; }

/* Action row (edit/delete) */
.action-row { display:flex; gap:4px; justify-content:flex-end; }

/* Marca pill */
.marca-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600;
}