/* ============================================================
   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;
}


/* ------------------------------------------------------------
   20. INDICADORES DE VENCIMIENTO (Facturas/Pagos)
   ------------------------------------------------------------ */

/* Resaltado de filas por urgencia */
.row-overdue-warning {
  background-color: rgba(var(--ds-warning-rgb), 0.08) !important;
}

.row-overdue-warning:hover {
  background-color: rgba(var(--ds-warning-rgb), 0.12) !important;
}

.row-overdue-danger {
  background-color: rgba(var(--ds-danger-rgb), 0.08) !important;
}

.row-overdue-danger:hover {
  background-color: rgba(var(--ds-danger-rgb), 0.12) !important;
}

.row-overdue-critical {
  background-color: rgba(var(--ds-danger-rgb), 0.15) !important;
}

.row-overdue-critical:hover {
  background-color: rgba(var(--ds-danger-rgb), 0.2) !important;
}

/* Badges de días de atraso */
.badge-overdue {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  padding: 0.25em 0.6em;
  border-radius: var(--ds-radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

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

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

.badge-overdue-late {
  background-color: rgba(var(--ds-warning-rgb), 0.3);
  color: #92400e;
}

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

.badge-overdue-paid {
  background-color: var(--ds-success-subtle);
  color: var(--ds-success);
}

/* Tarjeta KPI de vencidos */
.kpi-card-danger {
  border-left: 4px solid var(--ds-danger);
}

.kpi-card-danger .kpi-value {
  color: var(--ds-danger);
}

.kpi-card-warning {
  border-left: 4px solid var(--ds-warning);
}

.kpi-card-warning .kpi-value {
  color: var(--ds-warning);
}

/* Filtro rápido de estados */
.filter-quick-buttons {
  display: flex;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--ds-space-3);
}

.filter-quick-buttons .btn-filter {
  padding: 0.35rem 0.85rem;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  border-radius: var(--ds-radius-full);
  border: 1px solid var(--ds-border-color);
  background-color: var(--ds-bg-surface);
  color: var(--ds-text-secondary);
  transition: all var(--ds-transition-fast);
  cursor: pointer;
}

.filter-quick-buttons .btn-filter:hover {
  border-color: var(--ds-border-strong);
  background-color: var(--ds-bg-hover);
  color: var(--ds-text-primary);
}

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

.filter-quick-buttons .btn-filter.btn-filter-danger.active {
  background-color: var(--ds-danger);
  border-color: var(--ds-danger);
}

.filter-quick-buttons .btn-filter.btn-filter-warning.active {
  background-color: var(--ds-warning);
  border-color: var(--ds-warning);
}

.filter-quick-buttons .btn-filter.btn-filter-success.active {
  background-color: var(--ds-success);
  border-color: var(--ds-success);
}

/* Contador de badge en filtro */
.btn-filter .filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: var(--ds-font-semibold);
  border-radius: var(--ds-radius-full);
  background-color: rgba(0, 0, 0, 0.1);
}

.btn-filter.active .filter-count {
  background-color: rgba(255, 255, 255, 0.25);
}

/* Tooltip mejorado para fechas */
.date-tooltip {
  position: relative;
  cursor: help;
}

.date-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--ds-space-1) var(--ds-space-2);
  background-color: var(--ds-gray-800);
  color: var(--ds-text-inverse);
  font-size: var(--ds-text-xs);
  white-space: nowrap;
  border-radius: var(--ds-radius-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ds-transition-fast), visibility var(--ds-transition-fast);
  z-index: var(--ds-z-tooltip);
}

.date-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Icono de alerta junto al monto */
.amount-with-alert {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.amount-with-alert .alert-icon {
  color: var(--ds-danger);
  font-size: 12px;
  animation: ds-pulse 2s ease-in-out infinite;
}


/* ------------------------------------------------------------
   21. MODALES DE FORMULARIOS (Finance Forms)
   ------------------------------------------------------------ */

/* Modal grande para formularios */
.modal-form-lg .modal-dialog {
  max-width: 720px;
  margin: 1.75rem auto;
}

@media (max-width: 768px) {
  .modal-form-lg .modal-dialog {
    max-width: calc(100% - 1rem);
    margin: 0.5rem;
  }
}

/* Contenido del modal */
.modal-form-lg .modal-content {
  border: none;
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-xl);
  overflow: hidden;
}

/* Header del modal */
.modal-form-lg .modal-header {
  background: var(--ds-bg-surface);
  border-bottom: 1px solid var(--ds-border-color);
  padding: var(--ds-space-4) var(--ds-space-5);
  align-items: center;
}

.modal-form-lg .modal-title {
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary);
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}

.modal-form-lg .modal-title .fe {
  color: var(--ds-primary);
  font-size: 1.25rem;
}

.modal-form-lg .close {
  padding: var(--ds-space-2);
  margin: calc(var(--ds-space-2) * -1);
  opacity: 0.5;
  transition: opacity var(--ds-transition-fast);
}

.modal-form-lg .close:hover {
  opacity: 1;
}

/* Body del modal */
.modal-form-lg .modal-body {
  padding: var(--ds-space-5);
  background: var(--ds-bg-surface);
}

/* Grid de formulario */
.form-grid {
  display: grid;
  gap: var(--ds-space-4);
}

.form-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Span completo para campos anchos */
.form-grid .col-span-2 {
  grid-column: span 2;
}

.form-grid .col-span-3 {
  grid-column: span 3;
}

@media (max-width: 768px) {
  .form-grid .col-span-2,
  .form-grid .col-span-3 {
    grid-column: span 1;
  }
}

/* Grupo de formulario mejorado */
.form-group-modal {
  margin-bottom: 0;
}

.form-group-modal label {
  display: block;
  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-modal label .required {
  color: var(--ds-danger);
  margin-left: 2px;
}

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

.form-group-modal .form-control:focus {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-shadow-focus);
  outline: none;
}

.form-group-modal .form-control::placeholder {
  color: var(--ds-text-muted);
}

/* Select estilizado */
.form-group-modal select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem;
}

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

/* Mensaje de ayuda */
.form-group-modal .form-text {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  margin-top: var(--ds-space-1);
}

/* Estados de validación */
.form-group-modal .form-control.is-invalid {
  border-color: var(--ds-danger);
}

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

.form-group-modal .invalid-feedback {
  display: block;
  font-size: var(--ds-text-xs);
  color: var(--ds-danger);
  margin-top: var(--ds-space-1);
}

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

/* Footer del modal */
.modal-form-lg .modal-footer {
  background: var(--ds-gray-50);
  border-top: 1px solid var(--ds-border-color);
  padding: var(--ds-space-3) var(--ds-space-5);
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-2);
}

.dark .modal-form-lg .modal-footer {
  background: rgba(255,255,255,.02);
}

/* Botones del modal */
.modal-form-lg .btn-modal-cancel {
  padding: 0.5rem 1.25rem;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  color: var(--ds-text-secondary);
  background: transparent;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition: all var(--ds-transition-fast);
}

.modal-form-lg .btn-modal-cancel:hover {
  background: var(--ds-bg-hover);
  border-color: var(--ds-border-strong);
  color: var(--ds-text-primary);
}

.modal-form-lg .btn-modal-save {
  padding: 0.5rem 1.5rem;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  color: var(--ds-text-inverse);
  background: var(--ds-primary);
  border: 1px solid var(--ds-primary);
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition: all var(--ds-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
}

.modal-form-lg .btn-modal-save:hover {
  background: var(--ds-primary-hover);
  border-color: var(--ds-primary-hover);
}

.modal-form-lg .btn-modal-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Spinner de carga */
.modal-form-lg .btn-modal-save .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}

.modal-form-lg .btn-modal-save.loading .spinner {
  display: block;
}

.modal-form-lg .btn-modal-save.loading .btn-text {
  display: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Animación de entrada del modal */
.modal-form-lg.fade .modal-dialog {
  transform: scale(0.95) translateY(-10px);
  transition: transform var(--ds-transition-slow);
}

.modal-form-lg.show .modal-dialog {
  transform: scale(1) translateY(0);
}

/* Overlay del modal */
.modal-backdrop.show {
  opacity: 0.5;
}

/* Separador de secciones en el formulario */
.form-section-divider {
  margin: var(--ds-space-4) 0;
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-border-light);
}

.form-section-title {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--ds-space-3);
}

/* Alertas dentro del modal */
.modal-alert {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  margin-bottom: var(--ds-space-4);
  display: none;
}

.modal-alert.show {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}

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

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

.modal-alert .fe {
  font-size: 1rem;
}


/* ------------------------------------------------------------
   22. BOTONES DE ACCION EN TABLAS (Inline Actions)
   ------------------------------------------------------------ */

/* Contenedor de acciones en fila */
.table-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

/* Botón de acción individual */
.table-actions .btn-table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: all var(--ds-transition-fast);
  text-decoration: none;
}

.table-actions .btn-table-action:hover {
  background: var(--ds-bg-hover);
  color: var(--ds-text-primary);
  text-decoration: none;
}

.table-actions .btn-table-action:active {
  transform: scale(0.95);
}

.table-actions .btn-table-action .fe {
  font-size: 14px;
}

/* Variantes de color */
.table-actions .btn-table-action.action-edit:hover {
  background: var(--ds-primary-subtle);
  color: var(--ds-primary);
}

.table-actions .btn-table-action.action-view:hover {
  background: var(--ds-info-subtle);
  color: var(--ds-info);
}

.table-actions .btn-table-action.action-verify:hover {
  background: var(--ds-success-subtle);
  color: var(--ds-success);
}

.table-actions .btn-table-action.action-unverify:hover {
  background: var(--ds-warning-subtle);
  color: var(--ds-warning);
}

.table-actions .btn-table-action.action-delete:hover {
  background: var(--ds-danger-subtle);
  color: var(--ds-danger);
}

/* Estado deshabilitado */
.table-actions .btn-table-action.disabled,
.table-actions .btn-table-action:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tooltip para acciones */
.table-actions .btn-table-action {
  position: relative;
}

.table-actions .btn-table-action[title] {
  /* Los tooltips se manejan con Bootstrap o title nativo */
}

/* Separador entre grupos de acciones */
.table-actions .action-separator {
  width: 1px;
  height: 16px;
  background: var(--ds-border-color);
  margin: 0 0.25rem;
}


/* ------------------------------------------------------------
   23. DRAWER LATERAL (Slide-over Panel)
   ------------------------------------------------------------ */

/* Overlay backdrop */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--ds-transition-slow),
    visibility var(--ds-transition-slow);
  z-index: var(--ds-z-modal-backdrop);
}

.drawer-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.dark .drawer-backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* Drawer container */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 480px;
  max-width: 100%;
  background: var(--ds-bg-surface);
  box-shadow:
    -8px 0 30px rgba(0, 0, 0, 0.12),
    -2px 0 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--ds-transition-slow) cubic-bezier(0.32, 0.72, 0, 1);
  z-index: var(--ds-z-modal);
  overflow: hidden;
}

.drawer.show {
  transform: translateX(0);
}

.dark .drawer {
  box-shadow:
    -8px 0 30px rgba(0, 0, 0, 0.4),
    -2px 0 8px rgba(0, 0, 0, 0.3),
    inset 1px 0 0 rgba(255, 255, 255, 0.05);
}

@media (max-width: 520px) {
  .drawer {
    width: 100%;
  }
}

/* Drawer header */
.drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border-color);
  background: var(--ds-bg-surface);
}

.drawer-header-content {
  flex: 1;
  min-width: 0;
}

.drawer-title {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin: 0 0 var(--ds-space-1);
}

.drawer-title-text {
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-font-bold);
  color: var(--ds-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.drawer-title-text .folio {
  color: var(--ds-text-muted);
  font-weight: var(--ds-font-semibold);
}

.drawer-subtitle {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
  margin: 0;
}

/* Status badges */
.drawer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--ds-radius-full);
  white-space: nowrap;
}

.drawer-status-paid {
  background: var(--ds-success-light);
  color: var(--ds-success-hover);
}

.drawer-status-partial {
  background: var(--ds-warning-light);
  color: var(--ds-warning-hover);
}

.drawer-status-pending {
  background: var(--ds-danger-light);
  color: var(--ds-danger-hover);
}

.drawer-status-verified {
  background: var(--ds-primary-light);
  color: var(--ds-primary);
}

.drawer-status .fe {
  font-size: 0.75rem;
}

/* Close button */
.drawer-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: all var(--ds-transition-fast);
}

.drawer-close:hover {
  background: var(--ds-bg-hover);
  color: var(--ds-text-primary);
}

.drawer-close:active {
  transform: scale(0.95);
}

.drawer-close .fe {
  font-size: 1.25rem;
}

/* Drawer body - scrollable content */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Custom scrollbar for drawer */
.drawer-body::-webkit-scrollbar {
  width: 6px;
}

.drawer-body::-webkit-scrollbar-track {
  background: transparent;
}

.drawer-body::-webkit-scrollbar-thumb {
  background: var(--ds-border-strong);
  border-radius: 3px;
}

.drawer-body::-webkit-scrollbar-thumb:hover {
  background: var(--ds-text-muted);
}

/* Content sections */
.drawer-section {
  padding: var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border-light);
}

.drawer-section:last-child {
  border-bottom: none;
}

.drawer-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-space-4);
}

.drawer-section-title h3 {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-text-muted);
  margin: 0;
}

/* Info grid */
.drawer-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-4);
}

.drawer-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.drawer-info-item.full-width {
  grid-column: span 2;
}

.drawer-info-label {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  font-weight: var(--ds-font-medium);
}

.drawer-info-value {
  font-size: var(--ds-text-base);
  color: var(--ds-text-primary);
  font-weight: var(--ds-font-medium);
}

.drawer-info-value.amount {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-font-bold);
  letter-spacing: -0.02em;
}

.drawer-info-value.amount-success {
  color: var(--ds-success);
}

.drawer-info-value.amount-danger {
  color: var(--ds-danger);
}

/* Abonos list */
.drawer-abonos-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

.drawer-abono-item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3);
  background: var(--ds-bg-hover);
  border-radius: var(--ds-radius-md);
  transition: background var(--ds-transition-fast);
}

.drawer-abono-item:hover {
  background: var(--ds-gray-100);
}

.dark .drawer-abono-item {
  background: rgba(255, 255, 255, 0.03);
}

.dark .drawer-abono-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.drawer-abono-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-success-light);
  color: var(--ds-success);
  flex-shrink: 0;
}

.drawer-abono-icon .fe {
  font-size: 1rem;
}

.drawer-abono-content {
  flex: 1;
  min-width: 0;
}

.drawer-abono-amount {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary);
  font-family: var(--ds-font-mono);
}

.drawer-abono-meta {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}

.drawer-abono-meta .separator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ds-text-disabled);
}

.drawer-abono-actions {
  display: flex;
  gap: var(--ds-space-1);
}

.drawer-abono-actions .btn-table-action {
  width: 28px;
  height: 28px;
}

/* Empty state for abonos */
.drawer-empty-state {
  text-align: center;
  padding: var(--ds-space-6) var(--ds-space-4);
  color: var(--ds-text-muted);
}

.drawer-empty-state .fe {
  font-size: 2rem;
  margin-bottom: var(--ds-space-2);
  opacity: 0.4;
}

.drawer-empty-state p {
  font-size: var(--ds-text-sm);
  margin: 0;
}

/* Drawer footer */
.drawer-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--ds-border-color);
  background: var(--ds-gray-50);
}

.dark .drawer-footer {
  background: rgba(0, 0, 0, 0.2);
}

/* Summary section in footer */
.drawer-summary {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border-color);
}

.drawer-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--ds-text-sm);
}

.drawer-summary-row .label {
  color: var(--ds-text-muted);
}

.drawer-summary-row .value {
  font-weight: var(--ds-font-medium);
  font-family: var(--ds-font-mono);
  color: var(--ds-text-primary);
}

.drawer-summary-row.total {
  padding-top: var(--ds-space-2);
  border-top: 1px dashed var(--ds-border-color);
  margin-top: var(--ds-space-1);
}

.drawer-summary-row.total .label {
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary);
}

.drawer-summary-row.total .value {
  font-size: var(--ds-text-md);
  font-weight: var(--ds-font-bold);
}

.drawer-summary-row.total .value.has-debt {
  color: var(--ds-danger);
}

.drawer-summary-row.total .value.paid {
  color: var(--ds-success);
}

/* Footer actions */
.drawer-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4) var(--ds-space-5);
}

.drawer-actions .btn-drawer {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 0.625rem 1rem;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  border-radius: var(--ds-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ds-transition-fast);
  text-decoration: none;
}

.drawer-actions .btn-drawer:hover {
  text-decoration: none;
}

.drawer-actions .btn-drawer .fe {
  font-size: 1rem;
}

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

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

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

.btn-drawer-secondary:hover {
  background: var(--ds-bg-hover);
  border-color: var(--ds-border-strong);
  color: var(--ds-text-primary);
}

.btn-drawer-danger {
  background: transparent;
  border-color: var(--ds-danger-light);
  color: var(--ds-danger);
}

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

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

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

/* Verified state - lock actions */
.drawer.is-verified .drawer-actions .btn-drawer-primary,
.drawer.is-verified .drawer-actions .btn-drawer-danger {
  opacity: 0.5;
  pointer-events: none;
}

/* Loading state */
.drawer.is-loading .drawer-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-3);
  color: var(--ds-text-muted);
}

.drawer-loader-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ds-border-color);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: drawer-spin 0.8s linear infinite;
}

@keyframes drawer-spin {
  to { transform: rotate(360deg); }
}

/* Animations for content */
.drawer.show .drawer-header,
.drawer.show .drawer-section,
.drawer.show .drawer-footer {
  animation: drawer-fadeIn 0.3s ease-out backwards;
}

.drawer.show .drawer-header {
  animation-delay: 0.1s;
}

.drawer.show .drawer-section:nth-child(1) {
  animation-delay: 0.15s;
}

.drawer.show .drawer-section:nth-child(2) {
  animation-delay: 0.2s;
}

.drawer.show .drawer-footer {
  animation-delay: 0.25s;
}

@keyframes drawer-fadeIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ------------------------------------------------------------
   22. ACTIVITY TIMELINE
   ------------------------------------------------------------ */

.activity-timeline {
  padding: 0;
}

.activity-timeline-item {
  display: flex;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border-light);
  transition: background-color var(--ds-transition-fast);
}

.activity-timeline-item:hover {
  background-color: var(--ds-bg-hover);
}

.activity-timeline-item:last-child {
  border-bottom: none;
}

/* Indicator circle */
.activity-timeline-indicator {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ds-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-sm);
  margin-top: 0.125rem;
}

.activity-timeline-indicator--success {
  background: rgba(var(--ds-success-rgb), 0.1);
  color: var(--ds-success);
}
.activity-timeline-indicator--info {
  background: rgba(var(--ds-info-rgb), 0.1);
  color: var(--ds-info);
}
.activity-timeline-indicator--primary {
  background: rgba(var(--ds-primary-rgb), 0.1);
  color: var(--ds-primary);
}
.activity-timeline-indicator--warning {
  background: rgba(var(--ds-warning-rgb), 0.1);
  color: var(--ds-warning);
}
.activity-timeline-indicator--danger {
  background: rgba(var(--ds-danger-rgb), 0.1);
  color: var(--ds-danger);
}
.activity-timeline-indicator--secondary {
  background: rgba(var(--ds-secondary-rgb), 0.1);
  color: var(--ds-secondary);
}

/* Content area */
.activity-timeline-content {
  flex: 1;
  min-width: 0;
}

.activity-timeline-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.activity-timeline-user {
  font-weight: var(--ds-font-semibold);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-primary);
}

.activity-timeline-badge {
  font-size: 0.625rem;
  font-weight: var(--ds-font-medium);
  padding: 0.15em 0.5em;
  border-radius: var(--ds-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.activity-timeline-badge--success {
  background: rgba(var(--ds-success-rgb), 0.1);
  color: var(--ds-success);
}
.activity-timeline-badge--info {
  background: rgba(var(--ds-info-rgb), 0.1);
  color: var(--ds-info);
}
.activity-timeline-badge--primary {
  background: rgba(var(--ds-primary-rgb), 0.1);
  color: var(--ds-primary);
}
.activity-timeline-badge--warning {
  background: rgba(var(--ds-warning-rgb), 0.1);
  color: var(--ds-warning);
}
.activity-timeline-badge--danger {
  background: rgba(var(--ds-danger-rgb), 0.1);
  color: var(--ds-danger);
}
.activity-timeline-badge--secondary {
  background: rgba(var(--ds-secondary-rgb), 0.1);
  color: var(--ds-secondary);
}

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

.activity-timeline-detail {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.activity-timeline-time {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  display: inline-flex;
  align-items: center;
}

/* Dark mode */
.dark .activity-timeline-item {
  border-bottom-color: rgba(255,255,255,.06);
}

.dark .activity-timeline-item:hover {
  background-color: rgba(255,255,255,.03);
}


/* =====================================================================
   23. USER CARDS & PROFILE
   ===================================================================== */

/* --- User Card (lista de usuarios) --- */
.user-card {
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-bg-surface);
  transition: all var(--ds-transition-fast);
  overflow: hidden;
}

.user-card:hover {
  border-color: var(--ds-primary);
  box-shadow: 0 4px 16px rgba(var(--ds-primary-rgb), 0.1);
  transform: translateY(-2px);
}

.user-card-body {
  padding: var(--ds-space-5) var(--ds-space-4) var(--ds-space-3);
  text-align: center;
}

/* Avatar circular */
.user-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--ds-radius-full);
  margin: 0 auto var(--ds-space-3);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

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

.user-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: var(--ds-font-semibold);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Colores para iniciales basados en data-color */
.user-avatar-initials[data-color="1"] { background: #6366f1; }
.user-avatar-initials[data-color="2"] { background: #8b5cf6; }
.user-avatar-initials[data-color="3"] { background: #ec4899; }
.user-avatar-initials[data-color="4"] { background: #f59e0b; }
.user-avatar-initials[data-color="5"] { background: #10b981; }
.user-avatar-initials[data-color="6"] { background: #3b82f6; }
.user-avatar-initials[data-color="7"] { background: #ef4444; }
.user-avatar-initials[data-color="8"] { background: #14b8a6; }

.user-avatar--lg {
  width: 96px;
  height: 96px;
}

.user-avatar--lg .user-avatar-initials {
  font-size: 2rem;
}

/* Info del card */
.user-card-name {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary);
  margin-bottom: 0.125rem;
}

.user-card-username {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-2);
}

.user-card-cargo {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  margin-bottom: var(--ds-space-2);
}

/* Badge de nivel */
.user-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  border-radius: var(--ds-radius-full);
  letter-spacing: 0.02em;
}

.user-level-badge--1 {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}
.user-level-badge--2 {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}
.user-level-badge--3 {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}
.user-level-badge--4 {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}
.user-level-badge--5 {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}

/* Footer del card */
.user-card-footer {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-top: 1px solid var(--ds-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-card-contact {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
}

.user-card-contact a {
  color: var(--ds-text-muted);
  text-decoration: none;
  transition: color var(--ds-transition-fast);
}

.user-card-contact a:hover {
  color: var(--ds-primary);
}

.user-card-actions {
  display: flex;
  gap: var(--ds-space-1);
}

.user-card-actions .btn {
  padding: 0.3rem 0.6rem;
  font-size: var(--ds-text-xs);
}

/* Estado dot */
.user-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  margin-right: 0.35rem;
}

.user-status-dot--active {
  background-color: var(--ds-success);
  box-shadow: 0 0 0 3px rgba(var(--ds-success-rgb), 0.15);
}

.user-status-dot--inactive {
  background-color: var(--ds-danger);
  box-shadow: 0 0 0 3px rgba(var(--ds-danger-rgb), 0.15);
}

/* --- Profile Page --- */
.profile-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);
  padding: var(--ds-space-5);
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-lg);
  margin-bottom: var(--ds-space-5);
}

.profile-header-info {
  flex: 1;
}

.profile-header-name {
  font-size: 1.5rem;
  font-weight: var(--ds-font-bold);
  color: var(--ds-text-primary);
  margin-bottom: 0.25rem;
}

.profile-header-username {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-2);
}

.profile-header-meta {
  display: flex;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
}

.profile-header-meta span {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.profile-section {
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-color);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  margin-bottom: var(--ds-space-5);
}

.profile-section-title {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary);
  margin-bottom: var(--ds-space-4);
  padding-bottom: var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border-light);
}

.profile-readonly-field {
  padding: var(--ds-space-3);
  background: var(--ds-bg-hover);
  border-radius: var(--ds-radius-md);
  margin-bottom: var(--ds-space-3);
}

.profile-readonly-field label {
  display: block;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.profile-readonly-field .value {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-primary);
  font-weight: var(--ds-font-medium);
}

/* Avatar upload */
.profile-avatar-upload {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.profile-avatar-upload:hover .profile-avatar-overlay {
  opacity: 1;
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--ds-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ds-transition-fast);
  color: #fff;
  font-size: 1.25rem;
}

/* Dark mode ajustes */
.dark .user-card {
  background: var(--ds-bg-surface);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark .user-card:hover {
  border-color: var(--ds-primary);
  box-shadow: 0 4px 16px rgba(var(--ds-primary-rgb), 0.15);
}

.dark .user-card-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.dark .profile-header {
  border-color: rgba(255, 255, 255, 0.08);
}

.dark .profile-section {
  border-color: rgba(255, 255, 255, 0.08);
}

.dark .profile-readonly-field {
  background: rgba(255, 255, 255, 0.04);
}

.dark .profile-section-title {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Responsive */
@media (max-width: 767.98px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
  }

  .profile-header-meta {
    justify-content: center;
  }
}


/* ============================================================
   24. IDENTIDAD VISUAL POR EMPRESA
   ============================================================ */

/* --- Watermark de empresa en main-content --- */
.main-content::before {
  content: '';
  position: fixed;
  bottom: -5%;
  right: -5%;
  width: 45vw;
  max-width: 500px;
  aspect-ratio: 1;
  background-image: var(--empresa-watermark-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

.dark .main-content::before {
  opacity: 0.03;
}

@media (max-width: 767.98px) {
  .main-content::before {
    width: 60vw;
    bottom: -3%;
    right: -8%;
  }
}

@media print {
  .main-content::before {
    display: none;
  }
}

/* --- Transiciones de cambio de empresa --- */
@keyframes empresa-fade-in {
  from {
    opacity: 0.3;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes empresa-logo-swap {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.empresa-transitioning {
  opacity: 0.3 !important;
  transition: opacity 200ms ease-out !important;
}

.empresa-entering {
  animation: empresa-fade-in 400ms ease-out;
}

/* --- Colores accent por empresa --- */
[data-empresa="santorini"] {
  --ds-primary:       #2563eb;
  --ds-primary-hover:  #1d4ed8;
  --ds-primary-light:  #dbeafe;
  --ds-primary-subtle: #eff6ff;
  --ds-primary-rgb:    37, 99, 235;
}

[data-empresa="fluia"] {
  --ds-primary:       #e51236;
  --ds-primary-hover:  #c81030;
  --ds-primary-light:  #fce4ec;
  --ds-primary-subtle: #fff1f3;
  --ds-primary-rgb:    229, 18, 54;
}

[data-empresa="corsario"] {
  --ds-primary:       #4a4c4b;
  --ds-primary-hover:  #3c3e3d;
  --ds-primary-light:  #e8e8e8;
  --ds-primary-subtle: #f5f5f5;
  --ds-primary-rgb:    74, 76, 75;
}

[data-empresa="tierradelsur"] {
  --ds-primary:       #5a8a2e;
  --ds-primary-hover:  #4a7325;
  --ds-primary-light:  #e8f5e0;
  --ds-primary-subtle: #f1f8ec;
  --ds-primary-rgb:    90, 138, 46;
}

[data-empresa="sodatal"] {
  --ds-primary:       #2874a6;
  --ds-primary-hover:  #21618c;
  --ds-primary-light:  #d4e6f1;
  --ds-primary-subtle: #eaf2f8;
  --ds-primary-rgb:    40, 116, 166;
}

[data-empresa="aissa"] {
  --ds-primary:       #5b4a9e;
  --ds-primary-hover:  #4a3d82;
  --ds-primary-light:  #e8e0f7;
  --ds-primary-subtle: #f3effb;
  --ds-primary-rgb:    91, 74, 158;
}

[data-empresa="santino"] {
  --ds-primary:       #8b6914;
  --ds-primary-hover:  #755810;
  --ds-primary-light:  #f5ecd0;
  --ds-primary-subtle: #faf5e6;
  --ds-primary-rgb:    139, 105, 20;
}

[data-empresa="vicenzo"] {
  --ds-primary:       #1a5276;
  --ds-primary-hover:  #154360;
  --ds-primary-light:  #d4e6f1;
  --ds-primary-subtle: #eaf2f8;
  --ds-primary-rgb:    26, 82, 118;
}

[data-empresa="mayoristatemuco"] {
  --ds-primary:       #b7410e;
  --ds-primary-hover:  #9a370c;
  --ds-primary-light:  #f9e0d2;
  --ds-primary-subtle: #fdf0e8;
  --ds-primary-rgb:    183, 65, 14;
}

/* --- Badge de empresa --- */
.empresa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.25rem 0.75rem;
  background-color: var(--ds-primary-subtle);
  color: var(--ds-primary);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  white-space: nowrap;
}

.empresa-badge img {
  height: 16px;
  width: 16px;
  object-fit: contain;
}

/* Card watermark de empresa */
.card-empresa-watermark {
  position: relative;
  overflow: hidden;
}

.card-empresa-watermark::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: -5%;
  width: 120px;
  height: 120px;
  background-image: var(--empresa-watermark-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.04;
  pointer-events: none;
}

.dark .card-empresa-watermark::after {
  opacity: 0.06;
}

/* --- Logo de empresa como fondo en headers de paginas (inyectado por JS) --- */
.page-header-brand-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 350px;
  height: 120%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.dark .page-header-brand-bg {
  opacity: 0.07;
}

/* ------------------------------------------------------------
   DataTables — Celdas compactas y columnas optimizadas
   ------------------------------------------------------------ */

/* Reducir padding en celdas de DataTables */
.dataTables_wrapper .table td,
.dataTables_wrapper .table th {
  padding: 0.4rem 0.5rem;
  white-space: nowrap;
}

/* Truncar texto largo con ellipsis */
.cell-truncate {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Columna de fechas agrupadas (emisión + pago) */
.cell-dates {
  font-size: 0.85em;
  line-height: 1.4;
  white-space: nowrap;
}

.cell-dates .date-label {
  font-weight: 600;
  color: var(--ds-secondary, #64748b);
  font-size: 0.9em;
}

/* FixedColumns — fondo correcto en columna fija */
.dtfc-fixed-right {
  background-color: var(--ds-bg-card, #fff);
}

.dark .dtfc-fixed-right {
  background-color: var(--ds-dark-bg-card, #1e293b);
}