/* ============================================================
   AFCT — Diseño profesional con doble tema
   Corporativo Clásico (default) + Dark Mode Elegante
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ---- TEMA CORPORATIVO (default) ---- */
:root, [data-theme="corporate"] {
  --bg-body: #eef1f5;
  --bg-card: #ffffff;
  --bg-card-header: #e8f0fd;
  --border-color: #d1d9e6;
  --border-light: #e4e9f0;
  --text-primary: #1b2a4a;
  --text-secondary: #5a6a85;
  --text-muted: #8895a7;
  --accent: #1e5bb8;
  --accent-dark: #163d7a;
  --accent-light: #e8f0fd;
  --accent-rgb: 30, 91, 184;
  --nav-bg: linear-gradient(135deg, #1b3a6b 0%, #1e5bb8 100%);
  --nav-text: rgba(255,255,255,0.9);
  --nav-text-hover: #ffffff;
  --nav-active-bg: rgba(255,255,255,0.15);
  --dropdown-bg: #ffffff;
  --dropdown-hover: #e8f0fd;
  --dropdown-text: #1b2a4a;
  --table-header-bg: #e8f0fd;
  --table-header-text: #163d7a;
  --table-header-border: #1e5bb8;
  --table-stripe: #f5f8fc;
  --table-hover: #e8f0fd;
  --success: #198754;
  --success-bg: #d1e7dd;
  --success-text: #0f5132;
  --danger: #dc3545;
  --danger-bg: #f8d7da;
  --danger-text: #842029;
  --warning-bg: #fff3cd;
  --warning-text: #664d03;
  --kpi-bg: #ffffff;
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-text: #1b2a4a;
  --footer-bg: transparent;
  --footer-text: #8895a7;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --radius: 6px;
  --transition: 0.2s ease;
  /* flujo-specific */
  --flujo-header-bg: #e8f0fd;
  --flujo-header-text: #163d7a;
  --flujo-grupo-bg: #f0f3fa;
  --flujo-total-bg: #f5f7fc;
  --flujo-subtotal-bg: #f8fafd;
  --flujo-superavit-bg: #d1e7dd;
  --flujo-deficit-bg: #f8d7da;
  --flujo-saldo-bg: #fff3cd;
}

/* ---- TEMA DARK MODE ---- */
[data-theme="dark"] {
  --bg-body: #0f1117;
  --bg-card: #1a1d27;
  --bg-card-header: #1e2130;
  --border-color: #2a2d3a;
  --border-light: #232633;
  --text-primary: #e4e7ed;
  --text-secondary: #8b92a5;
  --text-muted: #5e6577;
  --accent: #818cf8;
  --accent-dark: #a5b4fc;
  --accent-light: rgba(129,140,248,0.1);
  --accent-rgb: 129, 140, 248;
  --nav-bg: #13151e;
  --nav-text: rgba(255,255,255,0.75);
  --nav-text-hover: #ffffff;
  --nav-active-bg: rgba(129,140,248,0.15);
  --dropdown-bg: #1e2130;
  --dropdown-hover: rgba(129,140,248,0.1);
  --dropdown-text: #e4e7ed;
  --table-header-bg: #1e2130;
  --table-header-text: #8b92a5;
  --table-header-border: #2a2d3a;
  --table-stripe: #1e2130;
  --table-hover: rgba(129,140,248,0.08);
  --success: #34d399;
  --success-bg: rgba(52,211,153,0.12);
  --success-text: #34d399;
  --danger: #f87171;
  --danger-bg: rgba(248,113,113,0.12);
  --danger-text: #f87171;
  --warning-bg: rgba(251,191,36,0.12);
  --warning-text: #fbbf24;
  --kpi-bg: #1a1d27;
  --input-bg: #1e2130;
  --input-border: #2a2d3a;
  --input-text: #e4e7ed;
  --footer-bg: transparent;
  --footer-text: #5e6577;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  /* flujo-specific */
  --flujo-header-bg: #1e2130;
  --flujo-header-text: #8b92a5;
  --flujo-grupo-bg: rgba(129,140,248,0.06);
  --flujo-total-bg: rgba(129,140,248,0.04);
  --flujo-subtotal-bg: rgba(129,140,248,0.03);
  --flujo-superavit-bg: rgba(52,211,153,0.1);
  --flujo-deficit-bg: rgba(248,113,113,0.1);
  --flujo-saldo-bg: rgba(251,191,36,0.1);
}

/* ============================================================
   BASE
   ============================================================ */
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  background: var(--bg-body);
  color: var(--text-primary);
  transition: background var(--transition), color var(--transition);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  box-shadow: var(--shadow-md);
  padding: 0 1rem !important;
  min-height: 48px;
}
[data-theme="dark"] .navbar {
  border-bottom: 1px solid var(--border-color);
}
.navbar-brand {
  font-size: 1rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: -0.3px;
  padding: .4rem 0;
}
.navbar-brand i { opacity: 0.85; }
.navbar-nav .nav-link {
  color: var(--nav-text) !important;
  font-weight: 450;
  padding: .45rem .55rem !important;
  font-size: .82rem !important;
  border-radius: 4px;
  transition: all var(--transition);
  white-space: nowrap;
}
.navbar-nav .nav-link:hover {
  color: var(--nav-text-hover) !important;
  background: var(--nav-active-bg);
}
.navbar .dropdown-menu {
  background: var(--dropdown-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 1050 !important;
  padding: .35rem 0;
}
.navbar .dropdown-item {
  color: var(--dropdown-text);
  font-size: .82rem;
  padding: .4rem .85rem;
  transition: all var(--transition);
}
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
  background: var(--dropdown-hover);
  color: var(--accent);
}
.navbar .dropdown-item.active {
  background: var(--accent-light);
  color: var(--accent);
}
.navbar .dropdown-divider {
  border-color: var(--border-light);
  margin: .25rem 0;
}
.navbar .dropdown-header {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ---- Toggle tema ---- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 15px;
  margin: 0 6px;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.45);
  transform: scale(1.08);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition);
}
.card-header {
  background: var(--bg-card-header);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  padding: .55rem .85rem;
  color: var(--text-primary);
  font-size: 12px;
}
[data-theme="corporate"] .card {
  border-top: 3px solid var(--accent);
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
  font-size: 12px;
  color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
}
.table thead {
  background: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
}
.table thead th {
  background: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid var(--table-header-border) !important;
  padding: .55rem .65rem;
}
.table td {
  padding: .5rem .65rem;
  border-color: var(--border-light);
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: var(--table-stripe);
  --bs-table-bg-type: var(--table-stripe);
}
.table-hover > tbody > tr:hover > td {
  background: var(--table-hover) !important;
  --bs-table-bg-state: var(--table-hover);
}

/* ============================================================
   TABLA DE FLUJO DE CAJA (sobrescrituras específicas)
   ============================================================ */
.table-flujo td, .table-flujo th { padding: .35rem .5rem; white-space: nowrap; }
.table-flujo thead { background: var(--flujo-header-bg) !important; color: var(--flujo-header-text) !important; }
.table-flujo thead th { background: var(--flujo-header-bg) !important; color: var(--flujo-header-text) !important; border-bottom: 2px solid var(--border-color); font-weight: 600; text-align: center; vertical-align: middle; }
.table-flujo thead th:first-child { text-align: left; }
.table-flujo .grupo { background: var(--flujo-grupo-bg); color: var(--accent-dark); font-weight: 700; }
.table-flujo .grupo td { background: var(--flujo-grupo-bg); }
.table-flujo .total { background: var(--flujo-total-bg); font-weight: 700; border-top: 1px solid var(--border-color); }
.table-flujo .total td { background: var(--flujo-total-bg); }
.table-flujo .subtotal { background: var(--flujo-subtotal-bg); font-weight: 600; font-style: italic; }
.table-flujo .subtotal td { background: var(--flujo-subtotal-bg); }
.table-flujo .superavit { background: var(--flujo-superavit-bg); font-weight: 700; }
.table-flujo .superavit td { background: var(--flujo-superavit-bg); }
.table-flujo .deficit { background: var(--flujo-deficit-bg); font-weight: 700; }
.table-flujo .deficit td { background: var(--flujo-deficit-bg); }
.table-flujo .saldo { background: var(--flujo-saldo-bg); font-weight: 700; }
.table-flujo .saldo td { background: var(--flujo-saldo-bg); }

/* ============================================================
   KPI CARDS
   ============================================================ */
.kpi {
  padding: .8rem 1rem;
  border-left: 4px solid var(--accent);
  background: var(--kpi-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition);
}
.kpi-label { color: var(--text-secondary); font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; }
.kpi-value { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.kpi.green { border-color: var(--success); }
.kpi.red { border-color: var(--danger); }
.kpi.blue { border-color: var(--accent); }

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
  font-size: 12px;
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
  transition: all var(--transition);
}
.form-control:focus, .form-select:focus {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
form .row .form-control, form .row .form-select { min-width: 0; }
input.text-end { text-align: right; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover {
  filter: brightness(1.1);
}
.btn-outline-primary {
  color: var(--accent);
  border-color: var(--accent);
}
.btn-outline-primary:hover {
  background: var(--accent);
  color: #fff;
}
.btn-xs { padding: .15rem .4rem; font-size: 11px; line-height: 1.2; }

/* ============================================================
   ALERTS — usar variables para dark mode
   ============================================================ */
[data-theme="dark"] .alert-success { background: var(--success-bg); color: var(--success-text); border-color: rgba(52,211,153,0.2); }
[data-theme="dark"] .alert-danger { background: var(--danger-bg); color: var(--danger-text); border-color: rgba(248,113,113,0.2); }
[data-theme="dark"] .alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: rgba(251,191,36,0.2); }
[data-theme="dark"] .alert-info { background: rgba(56,189,248,0.12); color: #38bdf8; border-color: rgba(56,189,248,0.2); }

/* ============================================================
   BADGES
   ============================================================ */
.badge.bg-success { background: var(--success-bg) !important; color: var(--success-text) !important; }
.badge.bg-danger { background: var(--danger-bg) !important; color: var(--danger-text) !important; }

/* ============================================================
   HEADINGS & MISC
   ============================================================ */
h1, h2, h3, h4, h5 { color: var(--accent-dark); }
.page-title { border-bottom: 2px solid var(--accent); padding-bottom: .35rem; margin-bottom: 1rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-nowrap { white-space: nowrap !important; }

/* SII Libro table — compact layout */
#tablaLibro { table-layout: auto; }
#tablaLibro td, #tablaLibro th { vertical-align: middle; }
#tablaLibro td:first-child { white-space: nowrap; } /* Fecha siempre nowrap */
.login-box { max-width: 380px; margin: 8% auto; }

/* Chart container */
.chart-wrap { position: relative; width: 100%; }
.chart-wrap canvas { display: block; max-width: 100% !important; height: 100% !important; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  color: var(--footer-text) !important;
  border-color: var(--border-light) !important;
  transition: all var(--transition);
}

/* ============================================================
   SCROLLBAR (dark mode)
   ============================================================ */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f1117; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2d3a; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a3d4a; }

/* ============================================================
   MODAL & MISC dark overrides
   ============================================================ */
[data-theme="dark"] .modal-content { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] .modal-header { border-color: var(--border-color); }
[data-theme="dark"] .modal-footer { border-color: var(--border-color); }
[data-theme="dark"] .btn-close { filter: invert(1); }
[data-theme="dark"] .text-muted { color: var(--text-secondary) !important; }
[data-theme="dark"] .border-top { border-color: var(--border-color) !important; }
[data-theme="dark"] .table { --bs-table-striped-bg: var(--table-stripe); }
[data-theme="dark"] .page-link { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] .page-link:hover { background: var(--accent-light); color: var(--accent); }
[data-theme="dark"] .list-group-item { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] .offcanvas, [data-theme="dark"] .offcanvas-header { background: var(--bg-card); color: var(--text-primary); }

/* ============================================================
   RESPONSIVE — navbar compacto en pantallas pequeñas
   ============================================================ */
@media(max-width:1920px) {
  .navbar-nav .nav-link { padding: .35rem .4rem !important; font-size: .78rem !important; }
}
@media(max-width:1600px) {
  .navbar-nav .nav-link { padding: .28rem .3rem !important; font-size: .72rem !important; }
}
@media(max-width:1366px) {
  .navbar-nav .nav-link { padding: .2rem .22rem !important; font-size: .67rem !important; }
}

/* ============================================================
   SMOOTH TRANSITIONS for theme switching
   ============================================================ */
.card, .card-header, .table, .form-control, .form-select, .kpi, .alert,
.modal-content, .dropdown-menu, .list-group-item, .page-link,
h1, h2, h3, h4, h5, footer {
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* ============================================================
   DARK MODE — TABLE FIXES
   ============================================================ */
[data-theme="dark"] .table > tbody > tr > td {
  color: var(--text-primary);
  border-color: var(--border-color);
}
[data-theme="dark"] .table > tbody > tr:nth-of-type(even) > td {
  background: var(--bg-card);
}
[data-theme="dark"] .table > tbody > tr:nth-of-type(odd) > td {
  background: var(--table-stripe);
}
[data-theme="dark"] .badge.bg-warning {
  color: #1a1d27 !important;
}
[data-theme="dark"] .badge.bg-success {
  color: #1a1d27 !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25);
}
[data-theme="dark"] .card {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme="dark"] .card-header {
  background: var(--bg-card-header);
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme="dark"] .card-body {
  color: var(--text-primary);
}
[data-theme="dark"] .dropdown-menu {
  background: var(--dropdown-bg);
  border-color: var(--border-color);
}
[data-theme="dark"] .dropdown-item {
  color: var(--dropdown-text);
}
[data-theme="dark"] .dropdown-item:hover {
  background: var(--dropdown-hover);
  color: var(--text-primary);
}

/* ============================================================
   DARK MODE — FORMS, CARDS & FILTERS FIXES
   ============================================================ */
[data-theme="dark"] .card.card-body[style*="background:#f8f9fa"],
[data-theme="dark"] .card-body[style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] {
  background: var(--bg-card) !important;
  border-color: var(--border-color);
}
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}
[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .form-label {
  color: var(--text-secondary);
}
[data-theme="dark"] .table .form-control {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}