@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap");

/* ============================================================
   PASTUKIFLY · Sistema de diseño global (sustituye al look anterior)
   Estética "billete de dólar": verdes Treasury, crema papel,
   oro del sello, rojo federal. Cargado el último en header.php
   para ganar la cascada sobre style.css y los CSS de sección.
   ============================================================ */

/* ---------- TOKENS · DARK (por defecto) ---------- */
:root {
  --green-treasury:   oklch(0.22 0.06 145);
  --green-moss:       oklch(0.27 0.05 145);
  --green-moss-2:     oklch(0.31 0.05 145);
  --green-dollar:     oklch(0.68 0.12 140);
  --green-dollar-deep:oklch(0.58 0.12 142);
  --green-sage:       oklch(0.66 0.03 145);
  --cream-paper:      oklch(0.89 0.04 90);
  --linen:            oklch(0.93 0.025 90);
  --gold-seal:        oklch(0.72 0.11 80);
  --red-federal:      oklch(0.45 0.16 25);
  --red-federal-soft: oklch(0.58 0.15 25);
  --paper-light:      oklch(0.95 0.02 90);
  --paper-light-2:    oklch(0.975 0.012 90);

  --bg-app:        var(--green-treasury);
  --bg-app-2:      oklch(0.20 0.055 145);
  --surface-card:  var(--green-moss);
  --surface-raised:var(--green-moss-2);
  --surface-inset: oklch(0.19 0.05 145);
  --surface-hover: oklch(0.34 0.05 145);

  --text-primary:  var(--linen);
  --text-secondary:var(--cream-paper);
  --text-muted:    var(--green-sage);
  --text-on-accent:oklch(0.20 0.06 145);

  --accent:        var(--green-dollar);
  --accent-deep:   var(--green-dollar-deep);
  --accent-soft:   oklch(0.68 0.12 140 / 0.14);
  --gold:          var(--gold-seal);
  --gold-soft:     oklch(0.72 0.11 80 / 0.16);

  --positive:      var(--green-dollar);
  --negative:      var(--red-federal-soft);
  --negative-soft: oklch(0.58 0.15 25 / 0.16);

  --border-glow:   oklch(0.68 0.12 140 / 0.18);
  --border-subtle: oklch(0.68 0.12 140 / 0.10);
  --border-strong: oklch(0.68 0.12 140 / 0.30);
  --fold-line:     oklch(0.68 0.12 140 / 0.22);

  --chart-1: oklch(0.68 0.12 140);
  --chart-2: oklch(0.72 0.11 80);
  --chart-3: oklch(0.89 0.04 90);
  --chart-4: oklch(0.55 0.09 150);
  --chart-5: oklch(0.78 0.08 110);
  --chart-6: oklch(0.66 0.03 145);
  --chart-grid: oklch(0.68 0.12 140 / 0.12);

  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:    "General Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Mono", "SF Mono", ui-monospace, "Menlo", monospace;

  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px;

  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;

  --shadow-sm:  0 1px 2px oklch(0.10 0.04 145 / 0.30);
  --shadow-md:  0 4px 14px oklch(0.08 0.04 145 / 0.34);
  --shadow-lg:  0 14px 40px oklch(0.06 0.03 145 / 0.46);
  --shadow-glow:0 0 0 1px var(--border-glow), 0 6px 20px oklch(0.06 0.03 145 / 0.40);
  --shadow-inset: inset 0 1px 2px oklch(0.10 0.04 145 / 0.40);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms; --dur-base: 180ms;

  --fold-divider: repeating-linear-gradient(90deg,
      var(--fold-line) 0, var(--fold-line) 6px,
      transparent 6px, transparent 12px);
}

/* ---------- TOKENS · LIGHT (papel envejecido) ---------- */
body.claro, .theme-light {
  --bg-app:        var(--paper-light);
  --bg-app-2:      oklch(0.93 0.025 88);
  --surface-card:  var(--paper-light-2);
  --surface-raised:oklch(0.99 0.008 90);
  --surface-inset: oklch(0.92 0.02 88);
  --surface-hover: oklch(0.91 0.025 88);

  --text-primary:  var(--green-treasury);
  --text-secondary:oklch(0.34 0.05 145);
  --text-muted:    oklch(0.50 0.04 145);

  --accent:        var(--green-dollar-deep);
  --accent-deep:   oklch(0.50 0.12 142);
  --accent-soft:   oklch(0.58 0.12 142 / 0.12);
  --gold:          oklch(0.62 0.11 78);
  --positive:      var(--green-dollar-deep);
  --negative:      var(--red-federal);
  --negative-soft: oklch(0.45 0.16 25 / 0.12);

  --border-glow:   oklch(0.50 0.12 142 / 0.22);
  --border-subtle: oklch(0.45 0.10 142 / 0.12);
  --border-strong: oklch(0.45 0.12 142 / 0.34);
  --fold-line:     oklch(0.45 0.12 142 / 0.20);
  --chart-grid:    oklch(0.45 0.12 142 / 0.12);
}

/* ---------- BASE ---------- */
body {
  background: var(--bg-app) !important;
  color: var(--text-primary);
  font-family: var(--font-body);
}
#page.site { background: var(--bg-app) !important; }

h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; color: var(--text-primary); }
a { color: var(--accent); }

/* ---------- MENÚ (barra fija, legible en cualquier tema) ----------
   La barra es siempre verde Treasury con texto lino → alto contraste
   independientemente del toggle claro/oscuro. Alta especificidad +
   !important para ganar a menu.css (que carga antes). */
body #menu,
body.menu_parte_superior #menu,
body.menu_parte_superior.claro #menu,
body.claro #menu {
  background: var(--green-treasury) !important;
  background-image: linear-gradient(180deg, oklch(0.25 0.06 145), var(--green-treasury)) !important;
  border-bottom: 2px solid var(--border-strong) !important;
  border-right: 0 !important;
  box-shadow: var(--shadow-md) !important;
}
/* Texto e iconos del menú */
body #menu .iconomenu,
body #menu #menu_end_principal > li,
body #menu #menu_end_principal > li a.iconomenu,
body #menu .iconomenu i,
body #menu_inferior_derecha .iconomenu,
body #menu_inferior_derecha .iconomenu i {
  color: var(--linen) !important;
}
body #menu #menu_end_principal > li a.iconomenu {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}
/* Hover */
body #menu #menu_end_principal > li:hover {
  background: oklch(0.31 0.06 145) !important;
}
body #menu #menu_end_principal > li:hover .iconomenu,
body #menu #menu_end_principal > li:hover .iconomenu i {
  color: var(--gold) !important;
}
/* Activo: verde dólar con texto oscuro y subrayado oro */
body #menu #menu_end_principal > li.activo,
body #menu #menu_end_principal > li.activo_linea {
  background: var(--accent) !important;
  box-shadow: inset 0 -3px 0 var(--gold) !important;
}
body #menu #menu_end_principal > li.activo .iconomenu,
body #menu #menu_end_principal > li.activo .iconomenu i,
body #menu #menu_end_principal > li.activo_linea .iconomenu,
body #menu #menu_end_principal > li.activo_linea .iconomenu i {
  color: var(--text-on-accent) !important;
}
#lilogo { padding: 3px !important; }
#lilogo #logo { filter: drop-shadow(0 2px 6px oklch(0.06 0.03 145 / 0.5)); }

#selector_cuenta_activa {
  background: var(--surface-inset) !important;
  border: 1px solid var(--border-glow) !important;
  color: var(--linen) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
}
#selector_cuenta_activa option { background: var(--surface-card) !important; color: var(--text-primary) !important; }

.tooltip_texto {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

#content { background: transparent !important; color: var(--text-primary); }

/* ---------- BOTONES LEGADOS (.boton_ppal) → paleta del sistema ---------- */
.boton_ppal {
  background: var(--accent) !important;
  color: var(--text-on-accent) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
}
.boton_ppal:hover { background: var(--accent-deep) !important; color: var(--text-on-accent) !important; }
.boton_ppal.accion_principal { background: var(--accent) !important; }
.boton_ppal.accion_principal:hover { background: var(--accent-deep) !important; }
.boton_ppal.accion_cancelar { background: var(--negative-soft) !important; color: var(--negative) !important; border: 1px solid var(--negative) !important; }
.boton_ppal.accion_cancelar:hover { background: var(--negative) !important; color: var(--text-primary) !important; }
.boton_ppal.blanco { background: var(--surface-raised) !important; color: var(--text-primary) !important; border: 1px solid var(--border-glow) !important; }

/* ---------- FONDOS / ETIQUETAS LEGADOS → tokens ---------- */
.fondo_naranja { background: var(--gold) !important; color: var(--green-treasury) !important; }
.fondo_morado  { background: var(--accent-deep) !important; color: var(--text-primary) !important; }
.fondo_azul    { background: var(--green-treasury) !important; color: var(--text-primary) !important; }
.fondo_degradado, #compra_completada { background: linear-gradient(-45deg, var(--gold), var(--accent-deep), var(--green-treasury)) !important; color: var(--text-primary) !important; }
.etiquetas_end.naranja { background: var(--gold) !important; color: var(--green-treasury) !important; }
.etiquetas_end.morado  { background: var(--accent-deep) !important; }
.etiquetas_end.azul    { background: var(--green-treasury) !important; }

/* Enlaces y búsqueda */
.claro #content a, #content a { color: var(--accent); }
input[type="search"] { border-bottom-color: var(--accent) !important; }

/* ---------- BOTONES ---------- */
.btn, button.btn,
input[type="submit"], #wp-submit, #btn_actualizar,
#mc_btn_guardar, #mc_filtrar_btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard) !important;
  cursor: pointer;
}
.btn-primary, button.btn-primary,
input[type="submit"], #wp-submit, #btn_actualizar,
#mc_btn_guardar, #mc_filtrar_btn {
  background: var(--accent) !important;
  color: var(--text-on-accent) !important;
  box-shadow: none !important;
}
.btn-primary:hover, button.btn-primary:hover,
#wp-submit:hover, #btn_actualizar:hover {
  background: var(--accent-deep) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow) !important;
}
.btn-secondary, button.btn-secondary {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-glow) !important;
}
.btn-success, button.btn-success {
  background: var(--gold) !important;
  color: var(--green-treasury) !important;
}
.btn-edit, button.btn-edit, .boton_cat {
  background: var(--surface-inset) !important;
  color: var(--text-secondary) !important;
}
#mc_btn_anular, .btn-danger {
  background: var(--negative-soft) !important;
  color: var(--negative) !important;
  border: 1px solid var(--negative) !important;
}

/* ---------- FORMULARIOS ---------- */
.form-control, .search-box,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  background: var(--surface-inset) !important;
  border: 1px solid var(--border-glow) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  box-shadow: var(--shadow-inset);
}
.form-control:focus, .search-box:focus,
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.form-control::placeholder, .search-box::placeholder, input::placeholder { color: var(--text-muted) !important; }
.form-control option, select option { background: var(--surface-card) !important; color: var(--text-primary) !important; }
label, .form-group label { color: var(--text-secondary) !important; font-family: var(--font-body); }
input[type="color"].form-control {
  box-shadow: 0 0 0 3px var(--surface-inset), 0 0 8px var(--accent-soft) !important;
}

/* ---------- MODALES ---------- */
.modal { background: oklch(0.10 0.04 145 / 0.72) !important; backdrop-filter: blur(4px); }
.modal-content {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary);
}
.modal-content h3, .modal-content h4 { color: var(--text-primary); }
/* Evita la "doble caja": cuando .modal-content va dentro de .modal-box,
   la tarjeta real es .modal-box, así que .modal-content queda plana. */
.modal-box .modal-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.close { color: var(--text-muted) !important; }
.close:hover { color: var(--accent) !important; }

/* ---------- TABS ---------- */
.tabs { background: var(--surface-inset); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.tab { color: var(--text-secondary) !important; font-family: var(--font-body); border-radius: var(--radius-md) !important; background: transparent !important; }
.tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
  color: var(--text-on-accent) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ---------- CARDS / CONTENIDO ---------- */
.content, .stat-card, .categorias-container .content {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
}
.stat-card { box-shadow: var(--shadow-md); }
.stat-number { color: var(--accent) !important; font-family: var(--font-mono) !important; font-feature-settings: "tnum" 1, "lnum" 1; }
.stat-label { color: var(--text-muted) !important; font-family: var(--font-body); }
.categoria-tag { border-radius: var(--radius-pill) !important; font-family: var(--font-body); }

/* ---------- TABLAS ---------- */
table, .categorias-table, .widefat {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-collapse: collapse;
}
.categorias-table th, .widefat th, table thead th {
  background: var(--surface-raised) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-glow) !important;
}
.categorias-table td, .widefat td, table tbody td {
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums;
}
.categorias-table tbody tr:hover, .widefat tbody tr:hover { background: var(--surface-hover) !important; }
.table-container { background: var(--surface-inset) !important; border-radius: var(--radius-md); }
.modal-tabla thead th { background: var(--surface-raised) !important; }

/* Números monetarios en mono + tabular */
.stat-number, td[style*="text-align:right"], .doc-monto, .detalle-monto { font-family: var(--font-mono); }

/* ---------- ALERTAS ---------- */
.alert { border-radius: var(--radius-md) !important; font-family: var(--font-body); }
.alert-success { background: var(--accent-soft) !important; border: 1px solid var(--accent) !important; color: var(--positive) !important; }
.alert-error   { background: var(--negative-soft) !important; border: 1px solid var(--negative) !important; color: var(--negative) !important; }

/* ---------- LOADERS ---------- */
.loading, .loader-modal { color: var(--accent) !important; font-family: var(--font-body); }

/* ---------- DATATABLES ---------- */
.dataTables_wrapper, .dataTables_filter input, .dataTables_length select { color: var(--text-primary) !important; }
.dataTables_filter input, .dataTables_length select {
  background: var(--surface-inset) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-sm) !important;
}
table.dataTable thead th { background: var(--surface-raised) !important; color: var(--text-secondary) !important; }
.dataTables_paginate .paginate_button { color: var(--text-secondary) !important; }
.dataTables_paginate .paginate_button.current { background: var(--accent) !important; color: var(--text-on-accent) !important; border-radius: var(--radius-sm); }

/* ---------- LOGIN ---------- */
#login {
  background: linear-gradient(135deg, var(--green-treasury), var(--bg-app-2)) !important;
  color: var(--text-primary);
}
#login_izq { background: transparent !important; }
#login .logo_imagen { filter: drop-shadow(0 6px 20px oklch(0.05 0.03 145 / 0.6)); max-width: 280px; }
#login_der { background: var(--surface-card) !important; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--border-glow); }
#loginform label { color: var(--text-secondary) !important; }
#loginform input[type="text"], #loginform input[type="password"], #loginform input[type="email"], #user_login, #user_pass {
  background: var(--surface-inset) !important;
  border: 1px solid var(--border-glow) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}
#wp-submit {
  background: var(--accent) !important;
  color: var(--text-on-accent) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
#errorcontraseña, #footer_login, #resetp { color: var(--text-muted) !important; }
#errorcontraseña { color: var(--negative) !important; }

/* ---------- DIVISOR DE PLIEGUE (decorativo, opcional) ---------- */
.pk-fold { height: 1px; background-image: var(--fold-divider); border: 0; }