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

/* ─── BASE RESET & TYPOGRAPHY ─── */
:root {
  --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body, html, .layout-wrapper {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary) !important;
  background-color: var(--bg-body) !important;
}

/* Headings Editorial Adjustment */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-heading) !important;
}

h1, .h1 {
  font-size: clamp(2rem, 3.5vw, 2.5rem) !important;
  font-weight: 800 !important;
}

h2, .h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem) !important;
  font-weight: 800 !important;
}

h3, .h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
}

h4, .h4 {
  font-size: clamp(1.1rem, 1.8vw, 1.25rem) !important;
}

p {
  line-height: 1.6 !important;
  color: var(--text-primary) !important;
}

small, .text-muted {
  color: var(--text-muted) !important;
}

/* ─── SIDEBAR (LAYOUT MENU) ─── */
#layout-menu {
  background-color: var(--bg-menu) !important;
  border-right: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

#layout-menu .app-brand {
  border-bottom: 1px solid var(--border-color) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#layout-menu .app-brand-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text-heading) !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
}

/* Sidebar Titles/Headers */
.menu-header {
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  padding: 0 24px !important;
}

.menu-header-text {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
}

/* Sidebar Menu Items */
.menu-inner .menu-item {
  margin: 2px 12px !important;
  width: calc(100% - 24px) !important;
}

.menu-inner .menu-link {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--text-menu) !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  transition: all var(--transition-premium) !important;
}

/* Hover Menu Link */
.menu-inner .menu-item:not(.active) .menu-link:hover {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-heading) !important;
}

/* Active Menu Link */
.menu-inner .menu-item.active>.menu-link {
  background-color: var(--primary-light) !important;
  color: var(--text-menu-active) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--primary) !important;
  padding-left: 13px !important;
}

/* Icons */
.menu-inner .menu-icon {
  font-size: 1.2rem !important;
  margin-right: 12px !important;
  color: var(--text-muted) !important;
  transition: color var(--transition-premium) !important;
}

.menu-inner .menu-item.active .menu-icon {
  color: var(--text-menu-active) !important;
}

/* ─── NAVBAR (TOP BAR) ─── */
.layout-navbar {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

.navbar-detached {
  background-color: var(--navbar-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--navbar-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-sm) !important;
  margin: 0 !important;
  padding: 8px 24px !important;
  width: 100% !important;
}

#theme-toggle-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--transition-premium), color var(--transition-premium);
}

#theme-toggle-btn:hover {
  background-color: var(--bg-surface-2);
  color: var(--primary);
}

/* ─── FASE 3: CORE COMPONENTS ─── */

/* Cards Premium Overrides */
.card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-brand) !important;
  transition: transform var(--transition-premium), box-shadow var(--transition-premium) !important;
}

.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 24px !important;
}

.card-body {
  padding: 24px !important;
}

.card-body h5, .card-body .card-title {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.01em !important;
}

.card-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 24px !important;
}

/* Tables Premium Overrides */
.table {
  background-color: var(--table-bg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--table-border) !important;
  border-radius: 12px !important;
  /* overflow: hidden !important; (Removido para evitar cortar dropdowns) */
}

/* Aplicar border-radius a las celdas de las esquinas para mantener el borde redondeado */
.table thead tr:first-child th:first-child {
  border-top-left-radius: 11px !important;
}
.table thead tr:first-child th:last-child {
  border-top-right-radius: 11px !important;
}
.table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 11px !important;
}
.table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 11px !important;
}

.table th {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
  border-bottom: 2px solid var(--table-border) !important;
  padding: 16px !important;
  background-color: var(--table-header-bg) !important;
}

.table td {
  padding: 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--table-border) !important;
  color: var(--text-primary) !important;
}

/* Table Hover Row */
.table-hover tbody tr:hover {
  background-color: var(--table-hover) !important;
  transition: background-color var(--transition-premium) !important;
}

/* Sutil Stripe */
.table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: var(--table-stripe) !important;
  box-shadow: none !important;
}

/* Forms & Inputs Premium Overrides */
.form-control, .form-select {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--r-btn) !important;
  color: var(--input-color) !important;
  padding: 6px 10px !important;
  font-size: 0.9rem !important;
  transition: border-color var(--transition-premium), box-shadow var(--transition-premium) !important;
}

/* Input Groups Overrides */
.input-group {
  border-radius: var(--r-btn) !important;
}

.input-group>.form-control,
.input-group>.form-select,
.input-group>.input-group-text,
.input-group>.btn {
  border-radius: var(--r-btn) !important;
}

.input-group-text {
  background-color: var(--bg-surface-2) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-muted) !important;
  padding: 10px 10px !important;
  transition: border-color var(--transition-premium) !important;
}

.input-group:focus-within .input-group-text {
  border-color: var(--primary) !important;
}

/* Reset adjacent corners in input groups */
.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-light) !important;
  background-color: var(--input-bg) !important;
}

.form-control::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 0.7 !important;
}

/* Form check input */
.form-check-input {
  border: 1.5px solid var(--input-border) !important;
  border-radius: 4px !important;
  background-color: var(--input-bg) !important;
  width: 1.1rem !important;
  height: 1.1rem !important;
  transition: all var(--transition-premium) !important;
}

.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--primary-light) !important;
  border-color: var(--primary) !important;
}

.form-check-label {
  font-size: 0.875rem !important;
  color: var(--text-primary) !important;
  padding-left: 6px !important;
  cursor: pointer !important;
}

/* Buttons Premium Overrides */
.btn {
  border-radius: var(--r-btn) !important;
  padding: 10px 20px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: all var(--transition-premium) !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.btn:hover {
  transform: translateY(-1px) !important;
}

.btn:active {
  transform: translateY(1px) !important;
}

.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-on-primary) !important;
  box-shadow: 0 4px 14px var(--primary-light) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 6px 20px var(--primary-light) !important;
}

.btn-secondary {
  background-color: var(--bg-surface-3) !important;
  border-color: var(--bg-surface-3) !important;
  color: var(--text-primary) !important;
}

.btn-secondary:hover {
  background-color: var(--border-color) !important;
  border-color: var(--border-color) !important;
}

.btn-outline-primary {
  border: 1.5px solid var(--primary) !important;
  color: var(--primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

.btn:not([class*="btn-outline"]) {
  background-image: none !important;
}

/* ─── FASE 4: ADVANCED COMPONENTS ─── */

/* Modals Premium */
.modal-content {
  background-color: var(--modal-bg) !important;
  border-radius: 24px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
}

.modal-header {
  background-color: var(--modal-header-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 20px 24px !important;
}

.modal-footer {
  border-top: 1px solid var(--border-color) !important;
  padding: 20px 24px !important;
}

.modal-backdrop {
  background-color: var(--modal-overlay) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Badges / Pills Premium */
.badge {
  border-radius: 100px !important;
  padding: 6px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
}

.bg-label-primary {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

.bg-label-success {
  background-color: rgba(34, 197, 94, 0.12) !important;
  color: #22c55e !important;
}

.bg-label-danger {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}

.bg-label-warning {
  background-color: rgba(245, 158, 11, 0.12) !important;
  color: #f59e0b !important;
}

.bg-label-info {
  background-color: rgba(59, 130, 246, 0.12) !important;
  color: #3b82f6 !important;
}

.bg-label-secondary {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-primary) !important;
}

/* Toasts & Alerts Premium */
.toast, .toast-item {
  background-color: var(--toast-bg) !important;
  border-radius: 16px !important;
  border: 1px solid var(--toast-border) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.alert {
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  font-weight: 500 !important;
  padding: 16px 20px !important;
}

.alert-primary {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

.alert-success {
  background-color: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.12) !important;
  color: #16a34a !important;
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.12) !important;
  color: #d97706 !important;
}

/* Dropdowns Premium */
.dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border: 1px solid var(--dropdown-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px !important;
}

.dropdown-item {
  border-radius: 8px !important;
  margin: 2px 0 !important;
  padding: 8px 16px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-premium) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--dropdown-hover) !important;
  color: var(--text-heading) !important;
}

.dropdown-divider {
  border-color: var(--border-light) !important;
  margin: 6px 0 !important;
}

/* Stepper Overrides */
.wizard-steps::before {
  background: var(--border-color) !important;
}

.step-number {
  background: var(--bg-surface-3) !important;
  color: var(--text-muted) !important;
  border: 2px solid var(--bg-body) !important;
  font-family: 'Inter', sans-serif !important;
  transition: all var(--transition-premium) !important;
}

.step-title {
  color: var(--text-muted) !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.08em !important;
  transition: all var(--transition-premium) !important;
}

.step-item.active .step-number {
  background: var(--primary) !important;
  color: var(--text-on-primary) !important;
  box-shadow: 0 0 0 4px var(--primary-light) !important;
}

.step-item.active .step-title {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.step-item.completed .step-number {
  background: var(--c-green) !important;
  color: #fff !important;
}

.step-item.completed .step-title {
  color: var(--c-green) !important;
}

/* ─── FASE 5: MICRO-ANIMATIONS, UTILITIES, SCROLLBAR ─── */

/* Animations */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-slide-up {
  animation: fadeSlideUp 0.35s var(--transition-premium) forwards !important;
}

/* Apply entry animations to active overlays */
.dropdown-menu.show, .modal.show .modal-dialog, .toast-item {
  animation: fadeSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes pulse-brand {
  0% {
    box-shadow: 0 0 0 0 rgba(105, 108, 255, 0.4);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(105, 108, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(105, 108, 255, 0);
  }
}

.pulse-brand {
  animation: pulse-brand 2s infinite !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track) !important;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb) !important;
  border-radius: 100px !important;
  border: 2px solid var(--scrollbar-track) !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary) !important;
}

/* Premium utility classes */
.text-premium-heading {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-heading) !important;
}

.text-label-sm {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
}

.surface-glass {
  background-color: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .surface-glass {
  background-color: rgba(18, 22, 28, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

 

/* ─── SWEETALERT BULLETPROOF OVERRIDES ─── */
html body h2#swal2-title,
html body h2.swal2-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

html body div.swal2-toast h2#swal2-title,
html body div.swal2-toast h2.swal2-title,
html body .swal2-container.swal2-toast h2.swal2-title,
html body .swal2-container.swal2-toast h2#swal2-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

html body .swal2-html-container {
  font-size: 0.9rem !important;
}

/* Extra specific for toasts */
html body .swal2-container.swal2-bottom-end h2#swal2-title,
html body .swal2-container.swal2-bottom-end h2.swal2-title,
html body .swal2-container.swal2-bottom-end .swal2-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

html body .swal2-container.swal2-bottom-end .swal2-html-container {
  font-size: 0.85rem !important;
}
/* Fix table dropdowns pushing page width by opening to the left */
.table .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  top: 100% !important;
  margin-top: 8px !important;
}