/* ============================================================
   Sneat Bootstrap Admin — Core Layout CSS
   CESCIJUC · CI4 Project
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  /* Brand */
  --sneat-primary:           #696cff;
  --sneat-primary-rgb:       105, 108, 255;
  --sneat-primary-light:     rgba(105, 108, 255, 0.08);
  --sneat-primary-active:    rgba(105, 108, 255, 0.16);

  /* Layout */
  --menu-width:              260px;
  --navbar-height:           64px;

  /* Backgrounds */
  --body-bg:                 #f5f5f9;
  --menu-bg:                 #f0f0ff;
  --navbar-bg:               #f0f0ff;
  --footer-bg:               #fff;

  /* Borders */
  --border-color:            rgba(67, 89, 113, 0.1);

  /* Shadows */
  --card-shadow:             0 2px 6px 0 rgba(67, 89, 113, 0.12);
  --menu-shadow:             0 0 20px rgba(67, 89, 113, 0.1);

  /* Text */
  --text-heading:            #566a7f;
  --text-body:               #697a8d;
  --text-muted:              #a1acb8;
  --menu-item-color:         #697a8d;
  --menu-item-active-color:  #696cff;

  /* Font */
  --font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; height: 100%; }

body {
  font-family: var(--font-family);
  background-color: var(--body-bg);
  color: var(--text-body);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.53;
  min-height: 100vh;
  margin: 0;
}

a { color: var(--sneat-primary); }
a:hover { color: #4e51cc; }

h1, h2, h3, h4, h5, h6 { color: var(--text-heading); }

/* ── Layout Wrapper ──────────────────────────────────────────── */
.layout-wrapper {
  display: flex;
  flex-direction: column;
}

.layout-container {
  display: flex;
  flex: 1;
  min-height: 100vh;
}

/* ── Sidebar / Menu ──────────────────────────────────────────── */
.layout-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--menu-width);
  background: var(--menu-bg);
  box-shadow: var(--menu-shadow);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(67,89,113,0.15) transparent;
}

.layout-menu::-webkit-scrollbar { width: 4px; }
.layout-menu::-webkit-scrollbar-track { background: transparent; }
.layout-menu::-webkit-scrollbar-thumb { background: rgba(67,89,113,0.15); border-radius: 4px; }

/* App Brand (logo section) */
.app-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  min-height: var(--navbar-height);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  gap: 0.625rem;
  text-decoration: none;
}

.app-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #696cff 0%, #9c9fff 100%);
  border-radius: 8px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  letter-spacing: -0.5px;
}

.app-brand-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-heading);
  white-space: nowrap;
  line-height: 1;
}

/* Menu close btn (mobile) */
.layout-menu-toggle {
  margin-left: auto;
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 0.25rem;
}

.layout-menu-toggle:hover { color: var(--text-heading); }

/* Menu inner shadow (gradient fade) */
.menu-inner-shadow {
  display: block;
  position: absolute;
  width: 100%;
  height: 2.8125rem;
  top: 3.625rem;
  background: linear-gradient(var(--menu-bg) 10%, rgba(240,240,255,0));
  pointer-events: none;
  z-index: 2;
}

/* Menu list */
.menu-inner {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 1rem;
  flex: 1;
}

.menu-header {
  display: block;
  padding: 1rem 1.5rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Menu item */
.menu-item {
  list-style: none;
  position: relative;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  color: var(--menu-item-color);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 400;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  border-radius: 0;
  position: relative;
}

.menu-link:hover {
  color: var(--menu-item-active-color);
  background: var(--sneat-primary-light);
}

.menu-item.active > .menu-link,
.menu-link.active {
  color: var(--menu-item-active-color);
  background: var(--sneat-primary-light);
  font-weight: 500;
}

.menu-item.active > .menu-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--sneat-primary);
  border-radius: 0 3px 3px 0;
}

.menu-icon {
  font-size: 1.25rem;
  width: 1.5rem;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}

.menu-link-text { flex: 1; }

/* Submenu toggle arrow */
.menu-link.menu-toggle::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
  transition: transform 0.2s;
  opacity: 0.6;
}

.menu-item.open > .menu-link.menu-toggle::after {
  transform: rotate(45deg) translateY(-3px);
}

/* Submenu */
.menu-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.menu-item.open > .menu-sub {
  max-height: 800px;
}

.menu-sub .menu-link {
  padding: 0.5rem 1.5rem 0.5rem 3.25rem;
  font-size: 0.875rem;
}

.menu-sub .menu-link::before { display: none; }

.menu-sub .menu-item.active > .menu-link,
.menu-sub .menu-link.active {
  color: var(--menu-item-active-color);
  background: var(--sneat-primary-light);
}

/* ── Layout Page (main content) ──────────────────────────────── */
.layout-page {
  margin-left: var(--menu-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  flex: 1;
  transition: margin-left 0.3s ease;
}

/* ── Layout Navbar ───────────────────────────────────────────── */
.layout-navbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--navbar-bg);
  box-shadow: 0 1px 0 var(--border-color);
  min-height: var(--navbar-height);
  display: flex;
  align-items: center;
  padding: 0;
}

.navbar-inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 1.5rem;
  gap: 0.75rem;
}

.navbar-menu-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  color: var(--text-body);
  font-size: 1.375rem;
  line-height: 1;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
  display: none;
}

.navbar-menu-toggle-btn:hover {
  background: var(--sneat-primary-light);
  color: var(--sneat-primary);
}

.navbar-page-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-heading);
  margin: 0;
}

.navbar-nav-right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

/* Icon buttons in navbar */
.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--text-body);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}

.nav-icon-btn:hover {
  background: var(--sneat-primary-light);
  color: var(--sneat-primary);
}

/* User dropdown in navbar */
.nav-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.nav-user:hover { background: var(--sneat-primary-light); }

.nav-user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #696cff, #9c9fff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
  overflow: hidden;
}

.nav-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-heading);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Content Wrapper ─────────────────────────────────────────── */
.content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.container-p-y {
  padding: 1.5rem 1.5rem;
  flex: 1;
}

/* ── Footer ──────────────────────────────────────────────────── */
.content-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--border-color);
  padding: 0.875rem 1.5rem;
}

/* ── Overlay (mobile) ────────────────────────────────────────── */
.layout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(67, 89, 113, 0.45);
  z-index: 1029;
  display: none;
  cursor: pointer;
  transition: opacity 0.25s;
}

.layout-overlay.show { display: block; }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb-wrapper {
  margin-bottom: 1.25rem;
}

.breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
}

.breadcrumb-item a {
  color: var(--sneat-primary);
  text-decoration: none;
}

.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--text-muted); }

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
}

/* ── Cards (Sneat style) ─────────────────────────────────────── */
.card {
  border: none;
  border-radius: 0.5rem;
  box-shadow: var(--card-shadow);
  background: #fff;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-body { padding: 1.5rem; }
.card-footer {
  background: transparent;
  border-top: 1px solid var(--border-color);
  padding: 1rem 1.5rem;
}

.card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0;
}

/* ── Stat / KPI Cards ────────────────────────────────────────── */
.stat-card .card-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.stat-icon-primary  { background: rgba(105,108,255,.16); color: #696cff; }
.stat-icon-success  { background: rgba(113,221, 55,.16); color: #71dd37; }
.stat-icon-danger   { background: rgba(255, 62, 29,.16); color: #ff3e1d; }
.stat-icon-warning  { background: rgba(255,171,  0,.16); color: #ffab00; }
.stat-icon-info     { background: rgba(  3,195,236,.16); color: #03c3ec; }
.stat-icon-teal     { background: rgba( 32,201,151,.16); color: #20c997; }

.stat-info { flex: 1; min-width: 0; }
.stat-value {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1;
}
.stat-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge-activo   { background: rgba(113,221,55,.16); color: #71dd37; }
.badge-inactivo { background: rgba(168,170,174,.16); color: #8592a3; }

/* ── Tables ──────────────────────────────────────────────────── */
.table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-color);
  padding: 0.75rem 1rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.table thead th:hover { color: var(--text-heading); }
.table thead th.th-asc::after  { content: ' ↑'; }
.table thead th.th-desc::after { content: ' ↓'; }

.table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  color: var(--text-body);
  font-size: 0.875rem;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: rgba(105,108,255,.02); }

/* ── Forms ───────────────────────────────────────────────────── */
.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-heading);
  margin-bottom: 0.375rem;
}

.form-control, .form-select {
  border-color: #d9dee3;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  color: var(--text-body);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus, .form-select:focus {
  border-color: var(--sneat-primary);
  box-shadow: 0 0 0 0.2rem rgba(105,108,255,.2);
}

/* ── Buttons (overrides) ─────────────────────────────────────── */
.btn-primary {
  background: var(--sneat-primary);
  border-color: var(--sneat-primary);
}
.btn-primary:hover {
  background: #5f61e6;
  border-color: #5f61e6;
}

/* ── Dropdown menus ──────────────────────────────────────────── */
.dropdown-menu {
  border: none;
  box-shadow: 0 0.25rem 1rem rgba(161,172,184,.45);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  min-width: 12rem;
}

.dropdown-item {
  color: var(--text-body);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.dropdown-item:hover {
  background: var(--sneat-primary-light);
  color: var(--sneat-primary);
}

.dropdown-divider { border-color: var(--border-color); }

/* ── Tabs (Bootstrap nav-tabs override) ──────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--border-color);
  gap: 0;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
}

.nav-tabs .nav-link:hover {
  color: var(--text-heading);
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--sneat-primary);
  border-bottom-color: var(--sneat-primary);
  background: none;
}

/* ── Section title ───────────────────────────────────────────── */
.section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

/* ── Chart wrapper ───────────────────────────────────────────── */
.chart-container {
  position: relative;
  min-height: 220px;
}

.chart-error {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ── Filtro fecha ────────────────────────────────────────────── */
.filter-card .card-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.5rem;
  flex-wrap: wrap;
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* ── Scrollbar global (Webkit) ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(67,89,113,.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(67,89,113,.35); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .layout-menu {
    transform: translateX(-100%);
    z-index: 1035;
  }

  .layout-menu.open {
    transform: translateX(0);
  }

  .layout-overlay.show { display: block; }

  .layout-page { margin-left: 0 !important; }

  .navbar-menu-toggle-btn { display: flex; }

  .layout-menu-toggle { display: block; }
}

@media (max-width: 767.98px) {
  .container-p-y { padding: 1rem; }
  .stat-value { font-size: 1.375rem; }
}

/* ── Sneat bg-label utilities ───────────────────────────── */
.bg-label-primary   { background: rgba(105,108,255,.12) !important; color: #696cff !important; }
.bg-label-success   { background: rgba(40,199,111,.12)  !important; color: #28c76f !important; }
.bg-label-danger    { background: rgba(255,107,107,.12) !important; color: #ff6b6b !important; }
.bg-label-warning   { background: rgba(255,159,67,.12)  !important; color: #ff9f43 !important; }
.bg-label-info      { background: rgba(3,195,236,.12)   !important; color: #03c3ec !important; }
.bg-label-secondary { background: rgba(161,172,184,.12) !important; color: #a1acb8 !important; }

/* ── Sort Table ─────────────────────────────────────────── */
thead th.sortable { user-select: none; white-space: nowrap; }
thead th.sortable:hover { background: rgba(105,108,255,.06); }
thead th.sort-active { color: #696cff !important; }
.sort-icon { font-size: .7rem; opacity: .5; }
thead th.sort-active .sort-icon { opacity: 1; color: #696cff; }

/* ══════════════════════════════════════════════════════════════
   DARK MODE  —  html.dark-style
   ══════════════════════════════════════════════════════════════ */
html.dark-style {
  /* Backgrounds */
  --body-bg:   #28243d;
  --menu-bg:   #312d4b;
  --navbar-bg: #312d4b;
  --footer-bg: #312d4b;

  /* Borders & Shadows */
  --border-color: rgba(231,227,252,.08);
  --card-shadow:  0 2px 6px 0 rgba(0,0,0,.3);
  --menu-shadow:  0 0 20px rgba(0,0,0,.25);

  /* Text */
  --text-heading:           #e7e3fc;
  --text-body:              #b6bee3;
  --text-muted:             #8480a5;
  --menu-item-color:        #b6bee3;
  --menu-item-active-color: #7367f0;

  /* Bootstrap CSS custom properties */
  --bs-body-bg:          #28243d;
  --bs-body-color:       #b6bee3;
  --bs-border-color:     rgba(231,227,252,.08);
  --bs-secondary-bg:     #312d4b;
  --bs-tertiary-bg:      #312d4b;
}

/* ── Body ── */
html.dark-style body { background-color: var(--body-bg); color: var(--text-body); }

/* ── Cards ── */
html.dark-style .card { background: #312d4b; }

/* ── Sidebar gradient shadow ── */
html.dark-style .menu-inner-shadow {
  background: linear-gradient(#312d4b 10%, rgba(49,45,75,0));
}

/* ── Dropdown ── */
html.dark-style .dropdown-menu {
  background: #312d4b;
  box-shadow: 0 .25rem 1.25rem rgba(0,0,0,.4);
}
html.dark-style .dropdown-item       { color: var(--text-body); }
html.dark-style .dropdown-item:hover { background: rgba(115,103,240,.16); color: #7367f0; }
html.dark-style .dropdown-item-text  { color: var(--text-muted); }
html.dark-style .dropdown-divider    { border-color: var(--border-color); }

/* ── Forms ── */
html.dark-style .form-control,
html.dark-style .form-select {
  background-color: #28243d;
  color: var(--text-body);
  border-color: rgba(231,227,252,.15);
}
html.dark-style .form-control:focus,
html.dark-style .form-select:focus {
  background-color: #28243d;
  color: var(--text-body);
  border-color: #7367f0;
  box-shadow: 0 0 0 .2rem rgba(115,103,240,.25);
}
html.dark-style .form-control::placeholder { color: var(--text-muted); }
html.dark-style input[type="date"] { color-scheme: dark; }

/* ── Tables ── */
html.dark-style .table {
  --bs-table-color:        var(--text-body);
  --bs-table-bg:           transparent;
  --bs-table-border-color: var(--border-color);
}
html.dark-style .table tbody tr:hover td { background: rgba(115,103,240,.06); }
html.dark-style .table thead th { border-bottom-color: var(--border-color); }

/* ── Alerts ── */
html.dark-style .alert {
  background: #312d4b;
  border-color: var(--border-color);
  color: var(--text-body);
}
html.dark-style .alert-info {
  background: rgba(3,195,236,.12);
  border-color: rgba(3,195,236,.2);
  color: #03c3ec;
}
html.dark-style .alert-info .btn-close { filter: invert(1) brightness(1.5); }

/* ── Select2 ── */
html.dark-style .select2-container--bootstrap-5 .select2-selection {
  background-color: #28243d !important;
  border-color: rgba(231,227,252,.15) !important;
  color: var(--text-body) !important;
}
html.dark-style .select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
  color: var(--text-body) !important;
}
html.dark-style .select2-container--bootstrap-5 .select2-dropdown {
  background-color: #312d4b !important;
  border-color: rgba(231,227,252,.15) !important;
}
html.dark-style .select2-container--bootstrap-5 .select2-results__option {
  color: var(--text-body) !important;
}
html.dark-style .select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: rgba(115,103,240,.2) !important;
  color: #7367f0 !important;
}

/* ── Scrollbar ── */
html.dark-style ::-webkit-scrollbar-thumb       { background: rgba(231,227,252,.12); }
html.dark-style ::-webkit-scrollbar-thumb:hover { background: rgba(231,227,252,.22); }