/* ========================================
   VARIABLES CSS PARA TEMAS (LIGHT & DARK)
   Paleta Pink-Desh adaptada (https://html.designstream.co.in/pink-desh/)
   Estructura: gris azulado claro + sidebar/cards blancos en light;
               grises oscuros en dark.
   Accent unico: dorado #f7b03e.
   Semanticos reducidos a escala de grises + variante dorada.
   ======================================== */

:root {
    /* Accent unico = dorado Pink-Desh */
    --primary-color: #f7b03e;
    --primary-hover: #e09a2c;
    --primary-dark: #c97f1c;
    --secondary-color: #7b777a;
    --secondary-hover: #5a5a5a;
    --accent-color: #f7b03e;
    --accent-hover: #e09a2c;
    --accent-glow: rgba(247, 176, 62, 0.18);

    /* Fondos - Light Mode (Pink-Desh light) */
    --bg-body: #f1f3f6;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --bg-card: #ffffff;
    --bg-card-elevated: #f7f8fa;
    --bg-hover: #f5f6f8;
    --bg-hover-subtle: #fafbfc;

    /* Texto - Light Mode */
    --text-primary: #444444;
    --text-secondary: #5f5f5f;
    --text-muted: #6b6b6b;
    --text-inverse: #ffffff;

    /* Tipografia Pink-Desh adaptada para lectura continua */
    --font-family-base: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-body: 1rem;
    --font-size-table: 0.9375rem;
    --font-size-small: 0.875rem;
    --line-height-body: 1.5;
    --heading-font-weight: 600;

    /* Bordes y sombras - Light Mode */
    --border-color: #e4e5e7;
    --border-color-subtle: #eef0f3;
    --border-radius-card: 2px;
    --border-radius-btn: 2px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.14);
    --inner-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.04);

    /* Sidebar - blanco en light mode (Pink-Desh) */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 70px;
    --sidebar-bg: #ffffff;
    --sidebar-bg-end: #ffffff;
    --sidebar-text: #444444;
    --sidebar-text-hover: #f7b03e;
    --sidebar-active-bg: rgba(247, 176, 62, 0.08);
    --sidebar-active-text: #f7b03e;
    --sidebar-active-border: #f7b03e;
    --sidebar-border-accent: #e4e5e7;

    /* Header */
    --header-height: 60px;
    --header-bg: #ffffff;
    --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    /* Estados "semanticos" reducidos a grises + variante dorada
       (decision deliberada: solo accent + escala de grises) */
    --success-color: #f7b03e;
    --success-light: #f9c46d;
    --warning-color: #c97f1c;
    --warning-light: #d99a3e;
    --danger-color: #555555;
    --danger-light: #777777;
    --info-color: #7b777a;
    --info-light: #999999;

    /* Transiciones */
    --transition-speed: 0.3s;
    --transition-easing: ease;

    /* ===== Overrides de variables Bootstrap (tema claro) ===== */
    --bs-body-bg: var(--bg-body);
    --bs-body-color: var(--text-primary);
    --bs-body-color-rgb: 68, 68, 68;
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--bg-card-elevated);
    --bs-secondary-bg-rgb: 247, 248, 250;
    --bs-tertiary-bg: var(--bg-hover);
    --bs-border-color: var(--border-color);
    --bs-emphasis-color: var(--text-primary);
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 247, 176, 62;
    --bs-success: var(--success-color);
    --bs-success-rgb: 247, 176, 62;
    --bs-warning: var(--warning-color);
    --bs-warning-rgb: 201, 127, 28;
    --bs-danger: var(--danger-color);
    --bs-danger-rgb: 85, 85, 85;
    --bs-info: var(--info-color);
    --bs-info-rgb: 123, 119, 122;
}

/* ========================================
   DARK MODE — Grises oscuros (Pink-Desh dark)
   ======================================== */

[data-theme="dark"] {
    --primary-color: #f7b03e;
    --primary-hover: #f9c46d;
    --primary-dark: #e09a2c;
    --secondary-color: #7b777a;
    --secondary-hover: #beb7b7;
    --accent-color: #f7b03e;
    --accent-hover: #f9c46d;
    --accent-glow: rgba(247, 176, 62, 0.22);

    --bg-body: #212227;
    --bg-sidebar: #272a31;
    --bg-header: #272a31;
    --bg-card: #272a31;
    --bg-card-elevated: #2f323a;
    --bg-hover: #2f323a;
    --bg-hover-subtle: #2a2d34;

    --text-primary: #eeeaea;
    --text-secondary: #c4bebe;
    --text-muted: #aaa4a4;
    --text-inverse: #1a1a1a;

    --border-color: rgba(255, 255, 255, 0.06);
    --border-color-subtle: rgba(255, 255, 255, 0.03);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.6);
    --inner-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

    --sidebar-bg: #272a31;
    --sidebar-bg-end: #272a31;
    --sidebar-text: var(--text-primary);
    --sidebar-text-hover: #f7b03e;
    --sidebar-active-bg: rgba(247, 176, 62, 0.12);
    --sidebar-active-text: #f7b03e;
    --sidebar-active-border: #f7b03e;
    --sidebar-border-accent: rgba(255, 255, 255, 0.04);

    --header-bg: #272a31;

    --success-color: #f7b03e;
    --success-light: #f9c46d;
    --warning-color: #c97f1c;
    --warning-light: #d99a3e;
    --danger-color: #beb7b7;
    --danger-light: #d4cfcf;
    --info-color: #7b777a;
    --info-light: #999999;

    /* ===== Overrides de variables Bootstrap (tema oscuro) ===== */
    --bs-body-bg: var(--bg-body);
    --bs-body-color: var(--text-primary);
    --bs-body-color-rgb: 238, 234, 234;
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--bg-card-elevated);
    --bs-secondary-bg-rgb: 47, 50, 58;
    --bs-tertiary-bg: var(--bg-hover);
    --bs-border-color: var(--border-color);
    --bs-emphasis-color: var(--text-primary);
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 247, 176, 62;
    --bs-success: var(--success-color);
    --bs-success-rgb: 247, 176, 62;
    --bs-warning: var(--warning-color);
    --bs-warning-rgb: 201, 127, 28;
    --bs-danger: var(--danger-color);
    --bs-danger-rgb: 190, 183, 183;
    --bs-info: var(--info-color);
    --bs-info-rgb: 123, 119, 122;
}

/* ========================================
   VARIABLES RGB PARA TRANSPARENCIAS
   ======================================== */

:root {
    --primary-color-rgb: 247, 176, 62;
    --success-color-rgb: 247, 176, 62;
    --warning-color-rgb: 201, 127, 28;
    --danger-color-rgb: 85, 85, 85;
    --info-color-rgb: 123, 119, 122;
    --accent-color-rgb: 247, 176, 62;
}

[data-theme="dark"] {
    --primary-color-rgb: 247, 176, 62;
    --accent-color-rgb: 247, 176, 62;
    --danger-color-rgb: 190, 183, 183;
    --info-color-rgb: 123, 119, 122;
}

/* ========================================
   ESTILOS GLOBALES (tablas, forms, modales, etc.)
   ======================================== */

.text-secondary {
    color: var(--text-secondary) !important;
}

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

.main-content small,
.main-content .small,
.modal-content small,
.modal-content .small {
    font-size: var(--font-size-small);
    line-height: 1.45;
}

/* Tablas Bootstrap */
.table {
    --bs-table-bg: var(--bg-card);
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: var(--bg-hover);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--bg-hover);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    color: var(--text-primary);
    font-size: var(--font-size-table);
    line-height: var(--line-height-body);
}

.table thead {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.table thead th {
    font-weight: 700;
    font-size: var(--font-size-small);
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 0.75rem 0.75rem;
    white-space: nowrap;
}

.table thead th .sort-link {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.table thead th .sort-link:hover {
    color: var(--primary-color);
}

.table th,
.table td {
    border-color: var(--border-color);
    color: var(--text-primary);
    line-height: var(--line-height-body);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: var(--bg-hover);
    color: var(--text-primary);
}

.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: var(--bg-hover);
    color: var(--text-primary);
}

/* Cards y Paneles */
.card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card-header {
    background-color: var(--bg-card);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

.card-footer {
    background-color: var(--bg-card);
    border-top-color: var(--border-color);
    color: var(--text-primary);
}

.card-body {
    color: var(--text-primary);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-card);
    border-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.18);
}

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

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-secondary);
    opacity: 1;
}

.form-check-input {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

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

.form-check-input:disabled {
    opacity: 0.6;
}

.form-label {
    color: var(--text-primary);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.45;
}

.form-text {
    color: var(--text-muted);
    font-size: var(--font-size-small);
    line-height: 1.45;
}

.form-check-label {
    color: var(--text-primary);
}

/* Select2 Dark Mode */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-body);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-results__option {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-results__option--selected {
    background-color: rgba(var(--primary-color-rgb), 0.2) !important;
    color: var(--text-primary) !important;
}

/* Input Groups */
.input-group-text {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* List Groups */
.list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.list-group-item:hover {
    background-color: var(--bg-hover);
}

.list-group-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-inverse);
}

/* Alerts */
.alert {
    border-color: var(--border-color);
}

/* Modals */
.modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    border-radius: var(--border-radius-card);
}

.modal-header {
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

.modal-footer {
    border-top-color: var(--border-color);
}

.modal-body {
    color: var(--text-primary);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-primary);
}

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

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

/* Nav Tabs */
.nav-tabs {
    border-bottom-color: var(--border-color);
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
}

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

.nav-tabs .nav-link.active {
    background-color: var(--bg-card);
    border-color: var(--border-color) var(--border-color) var(--bg-card);
    color: var(--text-primary);
}

/* Badges */
.badge {
    transition: background-color 0.3s ease;
}

/* Breadcrumb */
.breadcrumb {
    background-color: var(--bg-hover);
}

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

.breadcrumb-item a {
    color: var(--primary-color);
}

/* Pagination */
.page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--primary-color);
}

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

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

.page-item.disabled .page-link {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* ========================================
   DATATABLES DARK MODE
   ======================================== */

.dataTables_wrapper {
    color: var(--text-primary);
    font-size: var(--font-size-table);
    line-height: var(--line-height-body);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
    color: var(--text-primary);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--border-radius-btn);
    padding: 4px 8px;
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    background-color: var(--bg-card);
    border-color: var(--primary-color);
    color: var(--text-primary);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.18);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-btn);
    margin: 0 2px;
    padding: 5px 10px;
}

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

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

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

.dataTables_wrapper .dataTables_empty {
    color: var(--text-secondary);
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-color: var(--bg-hover);
}

/* El fondo va en TODOS los th del encabezado, no solo en los ordenables.
   Bootstrap le pone --bs-table-bg (= --bg-card, blanco) a cada celda, tapando el
   gris del <thead>; la regla .sorting de arriba lo repone, pero una columna con
   orderable: false (Acciones, en casi todos los grids) nunca recibe esa clase y
   se quedaba blanca, desentonando con el resto del encabezado. */
table.dataTable thead th {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
    background-color: var(--bg-hover);
}

table.dataTable tbody td {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

table.dataTable tbody tr {
    background-color: var(--bg-card);
}

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

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: var(--bg-card);
}

table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even {
    background-color: var(--bg-hover);
}

/* Fila seleccionada.
   DataTables 1.13 pinta la selección con "box-shadow: inset 0 0 0 9999px rgb(13,110,253)"
   sobre cada celda (azul Bootstrap), y ese relleno tapa cualquier background-color: por eso
   la regla dorada de abajo por sí sola no se veía. Se corrige en tres frentes:
   1) las variables que el propio CSS de DataTables consulta,
   2) el box-shadow, con el dorado del tema en translúcido,
   3) una barra lateral dorada, para que la selección se distinga sin depender solo del tono. */
:root {
    --dt-row-selected: var(--primary-color-rgb);
    --dt-row-selected-text: 68, 68, 68;   /* --text-primary del tema claro (#444444) */
    --dt-row-selected-link: var(--primary-color-rgb);
}

[data-theme="dark"] {
    --dt-row-selected-text: 190, 183, 183; /* --text-primary del tema oscuro (#beb7b7) */
}

table.dataTable tbody tr.selected {
    background-color: rgba(var(--primary-color-rgb), 0.18) !important;
}

/* Aplica a los grids DataTables y también a las tablas Bootstrap normales
   (Usuarios, por ejemplo, arma su tbody a mano y no usa DataTables). */
table.dataTable > tbody > tr.selected > *,
table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > *,
table.dataTable.table-hover > tbody > tr.selected:hover > *,
.table > tbody > tr.selected > *,
.table.table-hover > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--primary-color-rgb), 0.45) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="dark"] table.dataTable > tbody > tr.selected > *,
[data-theme="dark"] table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > *,
[data-theme="dark"] table.dataTable.table-hover > tbody > tr.selected:hover > *,
[data-theme="dark"] .table > tbody > tr.selected > *,
[data-theme="dark"] .table.table-hover > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--primary-color-rgb), 0.42) !important;
    /* Sobre el dorado resultante en oscuro, --text-primary (#beb7b7) queda en ~3:1;
       este tono lo sube por encima de 5:1. */
    color: #fdfbfb !important;
}

/* Barra lateral dorada en la primera celda: marca la fila aunque el fondo sea sutil. */
table.dataTable > tbody > tr.selected > *:first-child,
.table > tbody > tr.selected > *:first-child {
    border-left: 4px solid var(--primary-color) !important;
}

table.dataTable tbody tr.selected td {
    color: var(--text-primary);
}

/* Un enlace dorado sobre fondo dorado no se leería: hereda el color de la celda
   y se distingue por el subrayado. */
table.dataTable > tbody > tr.selected a {
    color: inherit !important;
    text-decoration: underline;
}

/* ========================================
   BOTONES UNIFICADOS - ESTILO PINK-DESH
   Referencia: https://html.designstream.co.in/pink-desh/light/
   Filosofia: dorado #f7b03e como unico accent, hover negro/dorado.
   Todas las variantes Bootstrap (.btn-primary/.btn-success/.btn-danger/
   .btn-warning/.btn-info/.btn-secondary) y sus outlines comparten el
   mismo lenguaje visual.
   ======================================== */

.btn {
    text-transform: capitalize;
    font-size: var(--font-size-small);
    font-weight: 600;
    border-radius: var(--border-radius-btn);
    padding: 0.375rem 0.85rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 0.18rem rgba(var(--primary-color-rgb), 0.25);
    outline: none;
}

.btn-xs {
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
}

.btn-sm {
    padding: 0.25rem 0.55rem;
    font-size: 0.8125rem;
}

.btn-lg {
    padding: 0.65rem 1.4rem;
    font-size: 1rem;
}

.btn i.bi,
.btn i.fa {
    vertical-align: -1px;
}

/* ---- Primary (accent dorado Pink-Desh) ---- */
.btn-primary,
.btn-theme {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #222222;
    --bs-btn-hover-border-color: #222222;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
    --bs-btn-disabled-color: #ffffff;
    color: #ffffff;
}

/* ---- Success (variante dorada Pink-Desh) ---- */
.btn-success {
    --bs-btn-bg: var(--success-color);
    --bs-btn-border-color: var(--success-color);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #222222;
    --bs-btn-hover-border-color: #222222;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--success-light);
    --bs-btn-active-border-color: var(--success-light);
    --bs-btn-disabled-bg: var(--success-color);
    --bs-btn-disabled-border-color: var(--success-color);
    --bs-btn-disabled-color: #ffffff;
    color: #ffffff;
}

/* ---- Warning (dorado oscuro Pink-Desh) ---- */
.btn-warning {
    --bs-btn-bg: var(--warning-color);
    --bs-btn-border-color: var(--warning-color);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #222222;
    --bs-btn-hover-border-color: #222222;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--warning-light);
    --bs-btn-active-border-color: var(--warning-light);
    --bs-btn-disabled-bg: var(--warning-color);
    --bs-btn-disabled-border-color: var(--warning-color);
    --bs-btn-disabled-color: #ffffff;
    color: #ffffff;
}

/* ---- Danger (gris oscuro Pink-Desh) ---- */
.btn-danger {
    --bs-btn-bg: var(--danger-color);
    --bs-btn-border-color: var(--danger-color);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #222222;
    --bs-btn-hover-border-color: #222222;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--danger-light);
    --bs-btn-active-border-color: var(--danger-light);
    --bs-btn-disabled-bg: var(--danger-color);
    --bs-btn-disabled-border-color: var(--danger-color);
    --bs-btn-disabled-color: #ffffff;
    color: #ffffff;
}

/* ---- Info (gris medio Pink-Desh) ---- */
.btn-info {
    --bs-btn-bg: var(--info-color);
    --bs-btn-border-color: var(--info-color);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #222222;
    --bs-btn-hover-border-color: #222222;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--info-light);
    --bs-btn-active-border-color: var(--info-light);
    --bs-btn-disabled-bg: var(--info-color);
    --bs-btn-disabled-border-color: var(--info-color);
    --bs-btn-disabled-color: #ffffff;
    color: #ffffff;
}

/* ---- Secondary / Default (transparente con borde, Pink-Desh btn-default) ---- */
.btn-secondary,
.btn-default {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--border-color);
    --bs-btn-color: var(--text-secondary);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--border-color);
    --bs-btn-disabled-color: var(--text-muted);
}

/* ---- Light (blanco/gris claro, hover dorado Pink-Desh btn-white) ---- */
.btn-light {
    --bs-btn-bg: var(--bg-card);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-color: var(--text-primary);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-bg: var(--bg-card);
    --bs-btn-disabled-color: var(--text-muted);
}

/* ---- Dark ---- */
.btn-dark {
    --bs-btn-bg: #222222;
    --bs-btn-border-color: #222222;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
}

/* ---- Outline variants - todas convergen al dorado en hover (Pink-Desh) ---- */
.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

.btn-outline-secondary {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: var(--text-muted);
    --bs-btn-disabled-border-color: var(--border-color);
}

.btn-outline-success,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: var(--text-muted);
    --bs-btn-disabled-border-color: var(--border-color);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger-color);
    --bs-btn-border-color: var(--danger-color);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--danger-color);
    --bs-btn-hover-border-color: var(--danger-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--danger-light);
    --bs-btn-active-border-color: var(--danger-light);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: var(--danger-color);
    --bs-btn-disabled-border-color: var(--danger-color);
}

/* ---- btn-check (radio/checkbox como botones) ---- */
.btn-check:checked + .btn,
.btn-check:active + .btn {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

/* ---- Botones link ---- */
.btn-link {
    --bs-btn-color: var(--primary-color);
    --bs-btn-hover-color: var(--primary-hover);
    --bs-btn-active-color: var(--primary-dark);
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}

/* ---- Close button (modales/alerts/toasts) ---- */
.btn-close {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ---- Dark mode: ajustes finos para outlines/secondary ---- */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-success,
[data-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .btn-outline-info,
[data-theme="dark"] .btn-outline-light,
[data-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--text-primary);
}

[data-theme="dark"] .btn-light {
    --bs-btn-bg: var(--bg-card-elevated);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-color: var(--text-primary);
}