/* ============================================================
   DESIGN SYSTEM — ERP Santorini / FluIA
   Sistema de diseno visual centralizado.
   Todas las variables y estilos base se definen aqui.
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Variables)
   ------------------------------------------------------------ */

:root {
  /* --- Paleta Principal --- */
  --ds-primary:          #2563eb;
  --ds-primary-hover:    #1d4ed8;
  --ds-primary-light:    #dbeafe;
  --ds-primary-subtle:   #eff6ff;
  --ds-primary-rgb:      37, 99, 235;

  --ds-secondary:        #64748b;
  --ds-secondary-hover:  #475569;
  --ds-secondary-light:  #e2e8f0;
  --ds-secondary-rgb:    100, 116, 139;

  /* --- Colores de Estado --- */
  --ds-success:          #10b981;
  --ds-success-hover:    #059669;
  --ds-success-light:    #d1fae5;
  --ds-success-subtle:   #ecfdf5;
  --ds-success-rgb:      16, 185, 129;

  --ds-warning:          #f59e0b;
  --ds-warning-hover:    #d97706;
  --ds-warning-light:    #fef3c7;
  --ds-warning-subtle:   #fffbeb;
  --ds-warning-rgb:      245, 158, 11;

  --ds-danger:           #ef4444;
  --ds-danger-hover:     #dc2626;
  --ds-danger-light:     #fee2e2;
  --ds-danger-subtle:    #fef2f2;
  --ds-danger-rgb:       239, 68, 68;

  --ds-info:             #0ea5e9;
  --ds-info-hover:       #0284c7;
  --ds-info-light:       #e0f2fe;
  --ds-info-subtle:      #f0f9ff;
  --ds-info-rgb:         14, 165, 233;

  /* --- Grises (Light Mode) --- */
  --ds-gray-50:          #f8fafc;
  --ds-gray-100:         #f1f5f9;
  --ds-gray-200:         #e2e8f0;
  --ds-gray-300:         #cbd5e1;
  --ds-gray-400:         #94a3b8;
  --ds-gray-500:         #64748b;
  --ds-gray-600:         #475569;
  --ds-gray-700:         #334155;
  --ds-gray-800:         #1e293b;
  --ds-gray-900:         #0f172a;

  /* --- Superficies (Light Mode por defecto) --- */
  --ds-bg-body:          #f1f5f9;
  --ds-bg-surface:       #ffffff;
  --ds-bg-surface-raised:#ffffff;
  --ds-bg-surface-overlay:#ffffff;
  --ds-bg-sidebar:       #ffffff;
  --ds-bg-navbar:        #ffffff;
  --ds-bg-input:         #ffffff;
  --ds-bg-hover:         #f8fafc;
  --ds-bg-active:        #eff6ff;

  /* --- Textos (Light Mode) --- */
  --ds-text-primary:     #0f172a;
  --ds-text-secondary:   #475569;
  --ds-text-muted:       #94a3b8;
  --ds-text-disabled:    #cbd5e1;
  --ds-text-inverse:     #ffffff;
  --ds-text-link:        #2563eb;
  --ds-text-link-hover:  #1d4ed8;

  /* --- Bordes --- */
  --ds-border-color:     #e2e8f0;
  --ds-border-light:     #f1f5f9;
  --ds-border-strong:    #cbd5e1;
  --ds-border-focus:     #2563eb;

  /* --- Tipografia --- */
  --ds-font-family:      'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ds-font-mono:        'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;

  --ds-text-xs:          0.75rem;     /* 12px */
  --ds-text-sm:          0.8125rem;   /* 13px */
  --ds-text-base:        0.875rem;    /* 14px */
  --ds-text-md:          1rem;        /* 16px */
  --ds-text-lg:          1.125rem;    /* 18px */
  --ds-text-xl:          1.25rem;     /* 20px */
  --ds-text-2xl:         1.5rem;      /* 24px */
  --ds-text-3xl:         1.875rem;    /* 30px */

  --ds-font-light:       300;
  --ds-font-normal:      400;
  --ds-font-medium:      500;
  --ds-font-semibold:    600;
  --ds-font-bold:        700;

  --ds-leading-tight:    1.25;
  --ds-leading-normal:   1.5;
  --ds-leading-relaxed:  1.625;

  /* --- Spacing --- */
  --ds-space-1:          0.25rem;   /* 4px */
  --ds-space-2:          0.5rem;    /* 8px */
  --ds-space-3:          0.75rem;   /* 12px */
  --ds-space-4:          1rem;      /* 16px */
  --ds-space-5:          1.25rem;   /* 20px */
  --ds-space-6:          1.5rem;    /* 24px */
  --ds-space-8:          2rem;      /* 32px */
  --ds-space-10:         2.5rem;    /* 40px */
  --ds-space-12:         3rem;      /* 48px */
  --ds-space-16:         4rem;      /* 64px */

  /* --- Border Radius --- */
  --ds-radius-sm:        0.25rem;   /* 4px */
  --ds-radius-md:        0.5rem;    /* 8px */
  --ds-radius-lg:        0.75rem;   /* 12px */
  --ds-radius-xl:        1rem;      /* 16px */
  --ds-radius-2xl:       1.5rem;    /* 24px */
  --ds-radius-full:      9999px;

  /* --- Sombras --- */
  --ds-shadow-xs:        0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ds-shadow-sm:        0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --ds-shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --ds-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --ds-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --ds-shadow-inner:     inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --ds-shadow-focus:     0 0 0 3px rgba(37, 99, 235, 0.25);
  --ds-shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.25);

  /* --- Transiciones --- */
  --ds-transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-base:    200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-slow:    300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-Index --- */
  --ds-z-dropdown:       1000;
  --ds-z-sticky:         1020;
  --ds-z-fixed:          1030;
  --ds-z-modal-backdrop:  1040;
  --ds-z-modal:          1050;
  --ds-z-popover:        1060;
  --ds-z-tooltip:        1070;
  --ds-z-toast:          1080;

  /* --- Sidebar --- */
  --ds-sidebar-width:    250px;
  --ds-sidebar-collapsed: 0px;
  --ds-navbar-height:    64px;

  /* --- Graficos (Paleta para charts) --- */
  --ds-chart-1:          #2563eb;
  --ds-chart-2:          #10b981;
  --ds-chart-3:          #f59e0b;
  --ds-chart-4:          #ef4444;
  --ds-chart-5:          #8b5cf6;
  --ds-chart-6:          #06b6d4;
  --ds-chart-7:          #f97316;
  --ds-chart-8:          #ec4899;
}


/* ------------------------------------------------------------
   2. TIPOGRAFIA BASE
   ------------------------------------------------------------ */

h1, .h1 {
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-font-bold);
  line-height: var(--ds-leading-tight);
  letter-spacing: -0.025em;
}

h2, .h2 {
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-font-semibold);
  line-height: var(--ds-leading-tight);
  letter-spacing: -0.02em;
}

h3, .h3 {
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-font-semibold);
  line-height: var(--ds-leading-tight);
}

h4, .h4 {
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-font-semibold);
  line-height: var(--ds-leading-normal);
}

h5, .h5 {
  font-size: var(--ds-text-md);
  font-weight: var(--ds-font-medium);
  line-height: var(--ds-leading-normal);
}

h6, .h6 {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-font-medium);
  line-height: var(--ds-leading-normal);
}

.ds-caption {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-normal);
  color: var(--ds-text-muted);
  letter-spacing: 0.02em;
}

.ds-overline {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-text-muted);
}

.ds-label {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  color: var(--ds-text-secondary);
}


/* ------------------------------------------------------------
   3. COMPONENTES BASE — Cards
   ------------------------------------------------------------ */

.card {
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  transition: box-shadow var(--ds-transition-base), transform var(--ds-transition-base);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ds-border-color);
  padding: var(--ds-space-4) var(--ds-space-5);
  font-weight: var(--ds-font-semibold);
  font-size: var(--ds-text-base);
}

.card-body {
  padding: var(--ds-space-5);
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--ds-border-color);
  padding: var(--ds-space-3) var(--ds-space-5);
}

.card-hover:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-2px);
}

.card-simple-hover:hover {
  box-shadow: var(--ds-shadow-md);
}


/* ------------------------------------------------------------
   4. COMPONENTES BASE — Botones
   ------------------------------------------------------------ */

.btn {
  font-weight: var(--ds-font-medium);
  font-size: var(--ds-text-sm);
  border-radius: var(--ds-radius-md);
  padding: 0.5rem 1rem;
  transition: all var(--ds-transition-fast);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.btn:focus,
.btn.focus {
  box-shadow: var(--ds-shadow-focus);
}

.btn-primary {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
  color: var(--ds-text-inverse);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ds-primary-hover);
  border-color: var(--ds-primary-hover);
  color: var(--ds-text-inverse);
}

.btn-success {
  background-color: var(--ds-success);
  border-color: var(--ds-success);
  color: var(--ds-text-inverse);
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--ds-success-hover);
  border-color: var(--ds-success-hover);
  color: var(--ds-text-inverse);
}

.btn-danger {
  background-color: var(--ds-danger);
  border-color: var(--ds-danger);
  color: var(--ds-text-inverse);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--ds-danger-hover);
  border-color: var(--ds-danger-hover);
  color: var(--ds-text-inverse);
}

.btn-warning {
  background-color: var(--ds-warning);
  border-color: var(--ds-warning);
  color: var(--ds-text-inverse);
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--ds-warning-hover);
  border-color: var(--ds-warning-hover);
  color: var(--ds-text-inverse);
}

.btn-outline-primary {
  color: var(--ds-primary);
  border-color: var(--ds-primary);
  background: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
  color: var(--ds-text-inverse);
}

.btn-outline-secondary {
  color: var(--ds-secondary);
  border-color: var(--ds-border-strong);
  background: transparent;
}

.btn-outline-secondary:hover {
  background-color: var(--ds-gray-100);
  border-color: var(--ds-border-strong);
  color: var(--ds-text-primary);
}

.btn-sm {
  padding: 0.3rem 0.75rem;
  font-size: var(--ds-text-xs);
  border-radius: var(--ds-radius-sm);
}

.btn-lg {
  padding: 0.65rem 1.5rem;
  font-size: var(--ds-text-md);
  border-radius: var(--ds-radius-md);
}

#button_inicio {
  padding: 0.75rem 2.5rem;
  font-size: var(--ds-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--ds-font-semibold);
  border: none;
  border-radius: var(--ds-radius-full);
  cursor: pointer;
  outline: none;
  transition: all var(--ds-transition-slow);
}


/* ------------------------------------------------------------
   5. COMPONENTES BASE — Formularios
   ------------------------------------------------------------ */

.form-control {
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-md);
  padding: 0.5rem 0.875rem;
  font-size: var(--ds-text-base);
  color: var(--ds-text-primary);
  background-color: var(--ds-bg-input);
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.form-control:focus {
  border-color: var(--ds-border-focus);
  box-shadow: var(--ds-shadow-focus);
  outline: 0;
}

.form-control::placeholder {
  color: var(--ds-text-muted);
  font-weight: var(--ds-font-normal);
}

.form-control.is-valid {
  border-color: var(--ds-success);
}

.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(var(--ds-success-rgb), 0.25);
}

.form-control.is-invalid {
  border-color: var(--ds-danger);
}

.form-control.is-invalid:focus {
  box-shadow: var(--ds-shadow-focus-danger);
}

.form-control-lg {
  padding: 0.65rem 1rem;
  font-size: var(--ds-text-md);
  border-radius: var(--ds-radius-md);
}

label,
.form-label {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  color: var(--ds-text-secondary);
  margin-bottom: var(--ds-space-1);
}

.form-group {
  margin-bottom: var(--ds-space-4);
}

.form-text {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

.custom-select {
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-primary);
  background-color: var(--ds-bg-input);
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.custom-select:focus {
  border-color: var(--ds-border-focus);
  box-shadow: var(--ds-shadow-focus);
}

/* Form row spacing */
.form-row {
  margin-left: calc(var(--ds-space-2) * -1);
  margin-right: calc(var(--ds-space-2) * -1);
}

.form-row > .col,
.form-row > [class*="col-"] {
  padding-left: var(--ds-space-2);
  padding-right: var(--ds-space-2);
}

/* Custom switches */
.custom-switch .custom-control-label::before {
  border-radius: var(--ds-radius-full);
  border-color: var(--ds-border-strong);
  background-color: var(--ds-bg-surface);
  transition: background-color var(--ds-transition-fast), border-color var(--ds-transition-fast);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
}

.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: var(--ds-shadow-focus);
}

/* Custom checkbox */
.custom-checkbox .custom-control-label::before {
  border-radius: var(--ds-radius-sm);
  border-color: var(--ds-border-strong);
  transition: all var(--ds-transition-fast);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: var(--ds-shadow-focus);
}

/* Card footer with form actions */
.card-footer .btn {
  min-width: 100px;
}

.card-footer .btn-secondary {
  background-color: transparent;
  border-color: var(--ds-border-strong);
  color: var(--ds-text-secondary);
}

.card-footer .btn-secondary:hover {
  background-color: var(--ds-gray-100);
  border-color: var(--ds-border-strong);
  color: var(--ds-text-primary);
}

/* Textarea */
textarea.form-control {
  min-height: 80px;
  resize: vertical;
}

/* Input group */
.input-group-text {
  background-color: var(--ds-gray-50);
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
}

/* DateRangePicker override */
.daterangepicker {
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  font-family: var(--ds-font-family);
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--ds-primary);
  color: var(--ds-text-inverse);
}

.daterangepicker td.in-range {
  background-color: var(--ds-primary-subtle);
  color: var(--ds-primary);
}

.daterangepicker .btn-primary {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
}

/* Bootstrap datepicker override */
.datepicker {
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  border: 1px solid var(--ds-border-color);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background-color: var(--ds-primary);
}

.datepicker table tr td.today {
  background-color: var(--ds-primary-light);
  color: var(--ds-primary);
}


/* ------------------------------------------------------------
   6. COMPONENTES BASE — Tablas
   ------------------------------------------------------------ */

.table {
  color: var(--ds-text-primary);
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-text-muted);
  border-bottom: 2px solid var(--ds-border-color);
  padding: var(--ds-space-3) var(--ds-space-4);
  white-space: nowrap;
  background: var(--ds-bg-surface);
}

.table tbody td {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border-light);
  vertical-align: middle;
  font-size: var(--ds-text-sm);
}

.table tbody tr {
  transition: background-color var(--ds-transition-fast);
}

.table tbody tr:hover {
  background-color: var(--ds-bg-hover);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--ds-gray-50);
}

.table-striped tbody tr:nth-of-type(odd):hover {
  background-color: var(--ds-bg-hover);
}

/* Table borderless override */
.table-borderless thead th {
  border-bottom: 2px solid var(--ds-border-color);
}

.table-borderless tbody td {
  border-bottom: 1px solid var(--ds-border-light);
}

/* Table inside cards — flush edges */
.card-body .table {
  margin-bottom: 0;
}

.card-body.my-n2 .table thead th:first-child,
.card-body.my-n2 .table tbody td:first-child {
  padding-left: var(--ds-space-5);
}

.card-body.my-n2 .table thead th:last-child,
.card-body.my-n2 .table tbody td:last-child {
  padding-right: var(--ds-space-5);
}

/* Status icons in tables */
.table .fe-check.text-success {
  color: var(--ds-success) !important;
}

.table .fe-x.text-danger {
  color: var(--ds-danger) !important;
}

.table .text-info {
  color: var(--ds-info) !important;
}

/* Action dropdown in tables */
.table .dropdown .btn-sm,
.table .btn-sm[data-toggle="dropdown"] {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-muted);
  background: transparent;
  border: none;
  transition: all var(--ds-transition-fast);
}

.table .dropdown .btn-sm:hover,
.table .btn-sm[data-toggle="dropdown"]:hover {
  background-color: var(--ds-bg-hover);
  color: var(--ds-text-primary);
}

.table .dropdown .btn-sm::after,
.table .more-vertical::after {
  display: none;
}

/* Dropdown menu for table actions */
.table .dropdown-menu {
  min-width: 180px;
  padding: var(--ds-space-1) 0;
}

.table .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-2) var(--ds-space-4);
  font-size: var(--ds-text-sm);
}

.table .dropdown-item i {
  font-size: 14px;
  opacity: 0.6;
}

.table .dropdown-item:hover i {
  opacity: 1;
}

/* Delete action highlighted */
.table .dropdown-item[href*="eliminar"],
.table .dropdown-item[href*="delete"] {
  color: var(--ds-danger);
}

.table .dropdown-item[href*="eliminar"]:hover,
.table .dropdown-item[href*="delete"]:hover {
  background-color: var(--ds-danger-subtle);
  color: var(--ds-danger);
}

/* Collapsible rows (productos accordion) */
.table .collapse.in,
.table .collapse.show {
  background-color: var(--ds-bg-hover);
}

.table .collapse td {
  border-bottom: 1px solid var(--ds-border-color);
}

.table .accordion-toggle {
  cursor: pointer;
}

.table .accordion-toggle:hover {
  background-color: var(--ds-bg-hover);
}

/* Card title in list pages */
.card-header .card-title {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary);
  margin: 0;
}

/* Card header with actions */
.card-header .float-right .btn,
.card-header .float-right a {
  font-size: var(--ds-text-sm);
}


/* ------------------------------------------------------------
   7. COMPONENTES BASE — Badges y Etiquetas
   ------------------------------------------------------------ */

.badge {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  padding: 0.25em 0.65em;
  border-radius: var(--ds-radius-full);
  letter-spacing: 0.02em;
}

.badge-primary,
.badge-pill.badge-primary {
  background-color: var(--ds-primary-light);
  color: var(--ds-primary);
}

.badge-success,
.badge-pill.badge-success {
  background-color: var(--ds-success-light);
  color: var(--ds-success-hover);
}

.badge-warning,
.badge-pill.badge-warning {
  background-color: var(--ds-warning-light);
  color: var(--ds-warning-hover);
}

.badge-danger,
.badge-pill.badge-danger {
  background-color: var(--ds-danger-light);
  color: var(--ds-danger-hover);
}

.badge-info,
.badge-pill.badge-info {
  background-color: var(--ds-info-light);
  color: var(--ds-info-hover);
}


/* ------------------------------------------------------------
   8. COMPONENTES BASE — Alertas
   ------------------------------------------------------------ */

.alert {
  border-radius: var(--ds-radius-md);
  border: 1px solid transparent;
  padding: var(--ds-space-3) var(--ds-space-4);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
}

.alert-success {
  background-color: var(--ds-success-subtle);
  border-color: var(--ds-success-light);
  color: var(--ds-success-hover);
}

.alert-danger {
  background-color: var(--ds-danger-subtle);
  border-color: var(--ds-danger-light);
  color: var(--ds-danger-hover);
}

.alert-warning {
  background-color: var(--ds-warning-subtle);
  border-color: var(--ds-warning-light);
  color: var(--ds-warning-hover);
}

.alert-info {
  background-color: var(--ds-info-subtle);
  border-color: var(--ds-info-light);
  color: var(--ds-info-hover);
}


/* ------------------------------------------------------------
   9. COMPONENTES BASE — Modales
   ------------------------------------------------------------ */

.modal-content {
  border: none;
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-xl);
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--ds-border-color);
  padding: var(--ds-space-4) var(--ds-space-5);
}

.modal-title {
  font-weight: var(--ds-font-semibold);
  font-size: var(--ds-text-lg);
}

.modal-body {
  padding: var(--ds-space-5);
}

.modal-footer {
  border-top: 1px solid var(--ds-border-color);
  padding: var(--ds-space-3) var(--ds-space-5);
}


/* ------------------------------------------------------------
   10. COMPONENTES BASE — Dropdowns
   ------------------------------------------------------------ */

.dropdown-menu {
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-space-2) 0;
  margin-top: var(--ds-space-1);
}

.dropdown-item {
  padding: var(--ds-space-2) var(--ds-space-4);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ds-bg-hover);
  color: var(--ds-text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--ds-primary-subtle);
  color: var(--ds-primary);
}

.dropdown-divider {
  border-top: 1px solid var(--ds-border-light);
  margin: var(--ds-space-2) 0;
}


/* ------------------------------------------------------------
   11. COMPONENTES BASE — Navegacion (Nav/Tabs/Pills)
   ------------------------------------------------------------ */

.nav-link {
  color: var(--ds-text-secondary);
  font-weight: var(--ds-font-medium);
  font-size: var(--ds-text-sm);
  transition: color var(--ds-transition-fast), background-color var(--ds-transition-fast);
  border-radius: var(--ds-radius-md);
}

.nav-link:hover {
  color: var(--ds-text-primary);
}

.nav-tabs .nav-link {
  border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
}

.nav-tabs .nav-link.active {
  font-weight: var(--ds-font-semibold);
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
}

.nav-pills .nav-link.active {
  background-color: var(--ds-primary);
  color: var(--ds-text-inverse);
}


/* ------------------------------------------------------------
   12. COMPONENTES BASE — Paginacion
   ------------------------------------------------------------ */

.page-link {
  color: var(--ds-text-secondary);
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-md) !important;
  margin: 0 2px;
  padding: 0.35rem 0.75rem;
  font-size: var(--ds-text-sm);
  transition: all var(--ds-transition-fast);
}

.page-link:hover {
  background-color: var(--ds-bg-hover);
  border-color: var(--ds-border-strong);
  color: var(--ds-text-primary);
}

.page-item.active .page-link {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
  color: var(--ds-text-inverse);
}

.page-item.disabled .page-link {
  color: var(--ds-text-disabled);
  background-color: var(--ds-bg-surface);
}


/* ------------------------------------------------------------
   13. COMPONENTES BASE — Tooltips
   ------------------------------------------------------------ */

.tooltip-inner {
  background-color: var(--ds-gray-800);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-1) var(--ds-space-3);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
}


/* ------------------------------------------------------------
   14. UTILIDADES NUEVAS
   ------------------------------------------------------------ */

/* Texto */
.text-primary-ds   { color: var(--ds-primary) !important; }
.text-success-ds   { color: var(--ds-success) !important; }
.text-warning-ds   { color: var(--ds-warning) !important; }
.text-danger-ds    { color: var(--ds-danger) !important; }
.text-info-ds      { color: var(--ds-info) !important; }
.text-muted-ds     { color: var(--ds-text-muted) !important; }

/* Backgrounds */
.bg-primary-subtle { background-color: var(--ds-primary-subtle) !important; }
.bg-success-subtle { background-color: var(--ds-success-subtle) !important; }
.bg-warning-subtle { background-color: var(--ds-warning-subtle) !important; }
.bg-danger-subtle  { background-color: var(--ds-danger-subtle) !important; }
.bg-info-subtle    { background-color: var(--ds-info-subtle) !important; }

/* Sombras */
.shadow-ds-sm      { box-shadow: var(--ds-shadow-sm) !important; }
.shadow-ds-md      { box-shadow: var(--ds-shadow-md) !important; }
.shadow-ds-lg      { box-shadow: var(--ds-shadow-lg) !important; }
.shadow-ds-xl      { box-shadow: var(--ds-shadow-xl) !important; }

/* Bordes redondeados */
.rounded-ds-sm     { border-radius: var(--ds-radius-sm) !important; }
.rounded-ds-md     { border-radius: var(--ds-radius-md) !important; }
.rounded-ds-lg     { border-radius: var(--ds-radius-lg) !important; }
.rounded-ds-xl     { border-radius: var(--ds-radius-xl) !important; }

/* Transiciones */
.transition-fast   { transition: all var(--ds-transition-fast); }
.transition-base   { transition: all var(--ds-transition-base); }
.transition-slow   { transition: all var(--ds-transition-slow); }

/* Truncar texto */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Focus visible */
*:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background-color: var(--ds-primary-light);
  color: var(--ds-primary-hover);
}


/* ------------------------------------------------------------
   15. ANIMACIONES
   ------------------------------------------------------------ */

@keyframes ds-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ds-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ds-slideInRight {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.ds-animate-fadeIn    { animation: ds-fadeIn var(--ds-transition-slow) ease-out; }
.ds-animate-fadeInUp  { animation: ds-fadeInUp var(--ds-transition-slow) ease-out; }
.ds-animate-slideIn   { animation: ds-slideInRight var(--ds-transition-slow) ease-out; }
.ds-animate-pulse     { animation: ds-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }


/* ------------------------------------------------------------
   16. DATATABLES OVERRIDE (Comprehensive)
   ------------------------------------------------------------ */

/* Wrapper layout */
.dataTables_wrapper {
  padding-top: var(--ds-space-2);
}

.dataTables_wrapper .row:first-child {
  margin-bottom: var(--ds-space-3);
}

.dataTables_wrapper .row:last-child {
  margin-top: var(--ds-space-3);
}

/* Length selector */
.dataTables_wrapper .dataTables_length {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-md);
  padding: 0.3rem 2rem 0.3rem 0.5rem;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-primary);
  background-color: var(--ds-bg-input);
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
  margin: 0 var(--ds-space-1);
}

.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--ds-border-focus);
  box-shadow: var(--ds-shadow-focus);
  outline: 0;
}

/* Search filter */
.dataTables_wrapper .dataTables_filter {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-lg);
  padding: 0.4rem 0.875rem;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-primary);
  background-color: var(--ds-bg-input);
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast), width var(--ds-transition-base);
  min-width: 200px;
  margin-left: var(--ds-space-2);
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ds-border-focus);
  box-shadow: var(--ds-shadow-focus);
  outline: 0;
  min-width: 260px;
}

/* Info text */
.dataTables_wrapper .dataTables_info {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  padding-top: var(--ds-space-2);
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
  padding-top: var(--ds-space-1);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--ds-radius-md) !important;
  margin: 0 2px;
  padding: 0.3rem 0.7rem !important;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary) !important;
  border: 1px solid var(--ds-border-color) !important;
  background: var(--ds-bg-surface) !important;
  transition: all var(--ds-transition-fast);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--ds-bg-hover) !important;
  border-color: var(--ds-border-strong) !important;
  color: var(--ds-text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--ds-primary) !important;
  border-color: var(--ds-primary) !important;
  color: var(--ds-text-inverse) !important;
  font-weight: var(--ds-font-medium);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--ds-text-disabled) !important;
  background: var(--ds-bg-surface) !important;
  border-color: var(--ds-border-light) !important;
  cursor: default;
}

/* Processing indicator */
.dataTables_wrapper .dataTables_processing {
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-5);
  box-shadow: var(--ds-shadow-md);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
  z-index: 10;
}

/* Scroll body */
.dataTables_wrapper .dataTables_scrollBody {
  border-bottom: 1px solid var(--ds-border-color);
}

.dataTables_wrapper .dataTables_scrollHead {
  border-bottom: none;
}

/* Sorting arrows */
.dataTables_wrapper table.dataTable thead .sorting::before,
.dataTables_wrapper table.dataTable thead .sorting::after,
.dataTables_wrapper table.dataTable thead .sorting_asc::before,
.dataTables_wrapper table.dataTable thead .sorting_asc::after,
.dataTables_wrapper table.dataTable thead .sorting_desc::before,
.dataTables_wrapper table.dataTable thead .sorting_desc::after {
  opacity: 0.3;
}

.dataTables_wrapper table.dataTable thead .sorting_asc::before,
.dataTables_wrapper table.dataTable thead .sorting_desc::after {
  opacity: 0.8;
}

/* Empty table message */
.dataTables_wrapper .dataTables_empty {
  text-align: center;
  padding: var(--ds-space-10) var(--ds-space-4);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
}

/* Responsive collapsed rows */
.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before {
  background-color: var(--ds-primary);
  border-radius: var(--ds-radius-sm);
  box-shadow: none;
}


/* ------------------------------------------------------------
   17. SELECT2 OVERRIDE
   ------------------------------------------------------------ */

.select2-container--default .select2-selection--single {
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-md);
  height: calc(1.5em + 1rem + 2px);
  padding: 0.375rem 0.75rem;
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--ds-border-focus);
  box-shadow: var(--ds-shadow-focus);
}

.select2-dropdown {
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ds-primary);
  color: var(--ds-text-inverse);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-2);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--ds-border-focus);
  box-shadow: var(--ds-shadow-focus);
  outline: 0;
}


/* ------------------------------------------------------------
   18. APEXCHARTS OVERRIDE
   ------------------------------------------------------------ */

.apexcharts-canvas {
  font-family: var(--ds-font-family) !important;
}

.apexcharts-title-text {
  font-weight: var(--ds-font-semibold) !important;
  fill: var(--ds-text-primary) !important;
}

.apexcharts-subtitle-text {
  fill: var(--ds-text-muted) !important;
}

.apexcharts-legend-text {
  color: var(--ds-text-secondary) !important;
  font-size: var(--ds-text-sm) !important;
}

.apexcharts-tooltip {
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  border: 1px solid var(--ds-border-color) !important;
  font-family: var(--ds-font-family) !important;
}

.apexcharts-tooltip-title {
  background-color: var(--ds-bg-hover) !important;
  border-bottom: 1px solid var(--ds-border-color) !important;
  font-weight: var(--ds-font-medium) !important;
  font-size: var(--ds-text-sm) !important;
}

.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
  font-size: var(--ds-text-xs) !important;
  fill: var(--ds-text-muted) !important;
}

.apexcharts-gridline {
  stroke: var(--ds-border-light) !important;
}

/* Chart container card */
.chart-container {
  padding: var(--ds-space-4);
}


/* ------------------------------------------------------------
   19. FULLCALENDAR OVERRIDE
   ------------------------------------------------------------ */

.fc {
  font-family: var(--ds-font-family);
}

.fc .fc-toolbar-title {
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary);
}

.fc .fc-button {
  background-color: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-color);
  color: var(--ds-text-secondary);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  border-radius: var(--ds-radius-md);
  padding: 0.35rem 0.75rem;
  transition: all var(--ds-transition-fast);
}

.fc .fc-button:hover {
  background-color: var(--ds-bg-hover);
  border-color: var(--ds-border-strong);
  color: var(--ds-text-primary);
}

.fc .fc-button-active,
.fc .fc-button:active {
  background-color: var(--ds-primary) !important;
  border-color: var(--ds-primary) !important;
  color: var(--ds-text-inverse) !important;
}

.fc .fc-col-header-cell {
  background-color: var(--ds-bg-hover);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-text-muted);
  padding: var(--ds-space-2);
}

.fc .fc-daygrid-day-number {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  padding: var(--ds-space-1) var(--ds-space-2);
}

.fc .fc-daygrid-day.fc-day-today {
  background-color: var(--ds-primary-subtle);
}

.fc .fc-event {
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-xs);
  padding: 2px 4px;
  border: none;
}

.fc .fc-daygrid-body td,
.fc .fc-col-header-cell {
  border-color: var(--ds-border-light);
}

.fc .fc-scrollgrid {
  border-color: var(--ds-border-color);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}