/* =====================================================================
   GSE · Tema moderno (capa visual sobre Vuexy)
   Solo estilos: no cambia estructura, IDs, clases ni funciones.
   Para desactivarlo basta con quitar el <link> de modern-theme.css.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root,
[data-bs-theme='light'] {
  --gse-primary: #2563eb;
  --gse-primary-rgb: 37, 99, 235;
  --gse-primary-dark: #1d4ed8;
  --gse-accent: #7c3aed;
  --gse-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gse-bg: #f4f6fb;
  --gse-surface: #ffffff;
  --gse-surface-2: #f8fafc;
  --gse-border: #e5e9f2;
  --gse-text: #1e293b;
  --gse-muted: #64748b;
  --gse-radius: 14px;
  --gse-radius-sm: 10px;
  --gse-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --gse-shadow: 0 4px 6px -2px rgba(15, 23, 42, 0.04), 0 10px 24px -6px rgba(15, 23, 42, 0.08);
  --gse-shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.18);
  --gse-ring: 0 0 0 4px rgba(var(--gse-primary-rgb), 0.15);

  --bs-primary: var(--gse-primary);
  --bs-primary-rgb: var(--gse-primary-rgb);
  --bs-link-color: var(--gse-primary);
  --bs-link-color-rgb: var(--gse-primary-rgb);
  --bs-link-hover-color: var(--gse-primary-dark);
  --bs-body-bg: var(--gse-bg);
  --bs-body-color: #334155;
  --bs-heading-color: var(--gse-text);
  --bs-border-color: var(--gse-border);
  --bs-border-radius: var(--gse-radius-sm);
  --bs-border-radius-lg: var(--gse-radius);
  --bs-body-font-family: 'Inter', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--bs-body-font-family);
  background-color: var(--gse-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-body-font-family);
  color: var(--gse-text);
  letter-spacing: -0.02em;
  font-weight: 650;
}
h4.fw-bold, h4.py-3 { font-weight: 700; }
a { transition: color 0.15s ease; }
::selection { background: rgba(var(--gse-primary-rgb), 0.18); }

/* Scrollbars finos */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Navbar superior ---------- */
.layout-navbar,
.layout-navbar.navbar,
.layout-navbar-full .layout-navbar {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--gse-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
}
.layout-navbar .avatar img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--gse-primary-rgb), 0.25); }
.layout-navbar .btn-text-secondary:hover { background: rgba(var(--gse-primary-rgb), 0.08) !important; }

/* ---------- Menú horizontal ---------- */
.layout-menu-horizontal,
.bg-menu-theme.menu-horizontal,
#layout-menu {
  background: var(--gse-surface) !important;
  border-bottom: 1px solid var(--gse-border);
  box-shadow: var(--gse-shadow-sm) !important;
}
.menu-horizontal .menu-inner > .menu-item > .menu-link {
  border-radius: 10px;
  font-weight: 500;
  color: #475569;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.menu-horizontal .menu-inner > .menu-item > .menu-link:hover {
  background: rgba(var(--gse-primary-rgb), 0.07) !important;
  color: var(--gse-primary) !important;
}
.menu-horizontal .menu-inner > .menu-item.active > .menu-link {
  background: var(--gse-gradient) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -6px rgba(var(--gse-primary-rgb), 0.55) !important;
}
.menu-horizontal .menu-inner > .menu-item.active > .menu-link .menu-icon,
.menu-horizontal .menu-inner > .menu-item.active > .menu-link::after { color: #fff !important; }
.menu-horizontal .menu-sub {
  border-radius: var(--gse-radius) !important;
  border: 1px solid var(--gse-border) !important;
  box-shadow: var(--gse-shadow-lg) !important;
  padding: 0.4rem !important;
}
.menu-horizontal .menu-sub .menu-link {
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.menu-horizontal .menu-sub .menu-item:not(.active) > .menu-link:hover {
  background: rgba(var(--gse-primary-rgb), 0.07) !important;
  color: var(--gse-primary) !important;
}
.menu-horizontal .menu-sub .menu-item.active > .menu-link:not(.menu-toggle) {
  background: rgba(var(--gse-primary-rgb), 0.1) !important;
  color: var(--gse-primary) !important;
  font-weight: 600;
}

/* ---------- Tarjetas ---------- */
.card {
  border: 1px solid var(--gse-border) !important;
  border-radius: var(--gse-radius) !important;
  box-shadow: var(--gse-shadow-sm) !important;
  background-color: var(--gse-surface);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--gse-shadow) !important; }
.card > .card-header:first-child { border-top-left-radius: var(--gse-radius); border-top-right-radius: var(--gse-radius); }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--gse-border);
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.card-header + .card-body { padding-top: 1.25rem; }
.card-title { font-weight: 650; letter-spacing: -0.015em; }
.card-footer { background: var(--gse-surface-2); border-top: 1px solid var(--gse-border); }

/* Encabezado de página (h4 de cada módulo) */
.container-p-y > h4:first-child,
.container-p-y > h4.fw-bold:first-child {
  position: relative;
  padding-left: 0.9rem !important;
}
.container-p-y > h4:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.3em;
  border-radius: 4px;
  background: var(--gse-gradient);
}

/* ---------- Botones ---------- */
.btn {
  border-radius: var(--gse-radius-sm);
  font-weight: 550;
  letter-spacing: 0;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:not(.btn-icon):not(.btn-sm):not(.btn-xs) { padding-left: 1.1rem; padding-right: 1.1rem; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.rounded-pill { border-radius: 50rem; }
.btn-primary {
  --bs-btn-bg: var(--gse-primary);
  --bs-btn-border-color: var(--gse-primary);
  --bs-btn-hover-bg: var(--gse-primary-dark);
  --bs-btn-hover-border-color: var(--gse-primary-dark);
  --bs-btn-active-bg: var(--gse-primary-dark);
  --bs-btn-active-border-color: var(--gse-primary-dark);
  background: var(--gse-gradient);
  border-color: transparent;
  box-shadow: 0 6px 14px -6px rgba(var(--gse-primary-rgb), 0.6);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
  border-color: transparent;
  box-shadow: 0 10px 20px -8px rgba(var(--gse-primary-rgb), 0.7);
}
.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary, .btn-dark {
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.35);
}
.btn-outline-primary {
  --bs-btn-color: var(--gse-primary);
  --bs-btn-border-color: rgba(var(--gse-primary-rgb), 0.45);
  --bs-btn-hover-bg: var(--gse-primary);
  --bs-btn-hover-border-color: var(--gse-primary);
}
.btn-label-primary {
  background-color: rgba(var(--gse-primary-rgb), 0.1) !important;
  color: var(--gse-primary) !important;
  border-color: transparent !important;
}
.btn-label-primary:hover { background-color: rgba(var(--gse-primary-rgb), 0.18) !important; }

/* ---------- Formularios ---------- */
.form-control,
.form-select,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.dataTables_filter input,
.dataTables_length select,
.dt-search input,
.dt-length select {
  border-radius: var(--gse-radius-sm) !important;
  border-color: #dbe1ea !important;
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:hover,
.form-select:hover { border-color: #c3ccda !important; }
.form-control:focus,
.form-select:focus,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection,
.dataTables_filter input:focus,
.dt-search input:focus {
  border-color: var(--gse-primary) !important;
  box-shadow: var(--gse-ring) !important;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group:focus-within .input-group-text { border-color: var(--gse-primary) !important; }
.form-label {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gse-muted);
}
.form-check-input:checked { background-color: var(--gse-primary); border-color: var(--gse-primary); }
.form-check-input:focus { box-shadow: var(--gse-ring); }

/* ---------- Tablas ---------- */
.table {
  --bs-table-striped-bg: #f8fafc;
  --bs-table-hover-bg: rgba(var(--gse-primary-rgb), 0.045);
  border-color: var(--gse-border);
}
.table > thead > tr > th,
.table > thead th,
table.dataTable thead th {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--gse-border) !important;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  white-space: nowrap;
}
.table > tbody > tr { transition: background-color 0.12s ease; }
.table > tbody > tr > td { border-color: #eef1f6; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(var(--gse-primary-rgb), 0.045); }
.table-responsive { border-radius: var(--gse-radius-sm); }
.table-dark > thead > tr > th,
.table thead.table-dark th {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}

/* DataTables: paginación y controles */
.page-link,
.dt-paging .page-link,
.dataTables_paginate .page-link {
  border-radius: 8px !important;
  margin: 0 2px;
  border-color: transparent;
}
.page-item.active .page-link,
.dt-paging .page-item.active .page-link {
  background: var(--gse-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 10px -4px rgba(var(--gse-primary-rgb), 0.6);
}
div.dataTables_wrapper div.dataTables_info,
.dt-info { color: var(--gse-muted); font-size: 0.85rem; }

/* ---------- Badges, alertas, avatares ---------- */
.badge { font-weight: 600; letter-spacing: 0.01em; border-radius: 8px; padding: 0.4em 0.7em; }
.badge.rounded-pill { border-radius: 50rem; }
.badge-dot { padding: 0; }
.bg-label-primary { background-color: rgba(var(--gse-primary-rgb), 0.1) !important; color: var(--gse-primary) !important; }
.alert {
  border-radius: var(--gse-radius-sm);
  border: 1px solid transparent;
  border-left-width: 4px;
}
.alert-primary, .alert-info { border-left-color: var(--gse-primary); }
.alert-success { border-left-color: #22c55e; }
.alert-warning { border-left-color: #f59e0b; }
.alert-danger { border-left-color: #ef4444; }
.avatar-initial { font-weight: 600; }

/* ---------- Pestañas y pills ---------- */
.nav-tabs { border-bottom: 1px solid var(--gse-border); }
.nav-tabs .nav-link { border-radius: 10px 10px 0 0; font-weight: 550; color: var(--gse-muted); }
.nav-tabs .nav-link.active { color: var(--gse-primary) !important; box-shadow: inset 0 -2px 0 var(--gse-primary) !important; }
.nav-pills .nav-link { border-radius: var(--gse-radius-sm); font-weight: 550; }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--gse-gradient) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px -6px rgba(var(--gse-primary-rgb), 0.6);
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  border: 1px solid var(--gse-border);
  border-radius: var(--gse-radius) !important;
  box-shadow: var(--gse-shadow-lg) !important;
  padding: 0.4rem;
}
.dropdown-item { border-radius: 8px; transition: background-color 0.12s ease, color 0.12s ease; }
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(var(--gse-primary-rgb), 0.07); color: var(--gse-primary); }
.dropdown-item.active, .dropdown-item:active { background: var(--gse-gradient) !important; color: #fff !important; }
.dropdown-notifications .dropdown-menu { padding: 0; overflow: hidden; }

/* ---------- Modales ---------- */
.modal-content {
  border: none;
  border-radius: 18px !important;
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.35) !important;
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--gse-border); padding: 1.15rem 1.5rem; }
.modal-header .modal-title { font-weight: 700; letter-spacing: -0.015em; }
.modal-footer { border-top: 1px solid var(--gse-border); background: var(--gse-surface-2); }
.modal-backdrop.show { opacity: 0.45; }
.modal-backdrop { background-color: #0f172a; backdrop-filter: blur(2px); }

/* ---------- SweetAlert2 ---------- */
.swal2-popup { border-radius: 18px !important; font-family: var(--bs-body-font-family) !important; padding: 1.75rem !important; }
.swal2-title { color: var(--gse-text) !important; font-weight: 700 !important; letter-spacing: -0.02em; }
.swal2-styled { border-radius: 10px !important; font-weight: 600 !important; padding: 0.6rem 1.4rem !important; }
.swal2-styled.swal2-confirm:not([style*='background']) { background: var(--gse-gradient) !important; }
.swal2-styled:focus { box-shadow: var(--gse-ring) !important; }

/* ---------- Varios ---------- */
.progress { border-radius: 50rem; background-color: #eef2f7; }
.progress-bar { border-radius: 50rem; }
.list-group-item { border-color: var(--gse-border); }
.flatpickr-calendar { border-radius: var(--gse-radius) !important; box-shadow: var(--gse-shadow-lg) !important; border: 1px solid var(--gse-border) !important; }
.select2-dropdown { border-radius: var(--gse-radius-sm) !important; border-color: var(--gse-border) !important; box-shadow: var(--gse-shadow-lg) !important; overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted { background: var(--gse-primary) !important; }
.apexcharts-tooltip { border-radius: 10px !important; box-shadow: var(--gse-shadow) !important; border: 1px solid var(--gse-border) !important; }

/* Footer */
.content-footer.footer {
  background: transparent !important;
  border-top: 1px solid var(--gse-border);
  color: var(--gse-muted);
  font-size: 0.85rem;
}

/* Animación suave de entrada del contenido */
@media (prefers-reduced-motion: no-preference) {
  .content-wrapper > .container-xxl.container-p-y { animation: gse-fade-in 0.35s ease both; }
}
@keyframes gse-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Login ---------- */
.authentication-wrapper.authentication-basic { position: relative; z-index: 1; }
body:has(.authentication-wrapper) {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124, 58, 237, 0.18), transparent 60%),
    radial-gradient(1000px 600px at 110% 110%, rgba(37, 99, 235, 0.2), transparent 60%),
    #eef2fb;
  min-height: 100vh;
}
.authentication-wrapper.authentication-basic .authentication-inner::before,
.authentication-wrapper.authentication-basic .authentication-inner::after { display: none !important; }
.authentication-wrapper .card {
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -20px rgba(30, 41, 99, 0.35) !important;
}
.authentication-wrapper .card:hover { transform: none; }
.authentication-wrapper .card-body { padding: 2.5rem 2.25rem !important; }
.authentication-wrapper h4 { font-weight: 800; letter-spacing: -0.03em; text-align: center; }
.authentication-wrapper h4 + p { text-align: center; color: var(--gse-muted); }
.authentication-wrapper .form-control,
.authentication-wrapper .form-select { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.authentication-wrapper .btn-primary { padding-top: 0.75rem; padding-bottom: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .card { border-radius: 12px !important; }
  .authentication-wrapper .card-body { padding: 1.75rem 1.25rem !important; }
}

/* ---------- Impresión: no alterar ---------- */
@media print {
  body { background: #fff !important; }
  .card { box-shadow: none !important; border-color: #ddd !important; }
  .layout-navbar, #layout-menu { backdrop-filter: none !important; }
  .content-wrapper > .container-xxl.container-p-y { animation: none !important; }
}