.navbar-theme,
.sidebar-theme,
body
{
    transition: background-color 0.3s ease;
}

/* ============================================
   TEMA DEFAULT (Bootstrap stock) — light y dark
   Aplica cuando data-theme-mode="default".
   Solo reseteamos variables custom a valores stock
   para que Bootstrap tome el control.
   ============================================ */

:root[data-theme-mode="default"] {
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --bs-nav-link-color: var(--bs-primary);
    --bs-nav-link-hover-color: #0a58ca;
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-link-active-color: #fff;
    --navbar-bg: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --body-bg: #F3F0EF;
    --footer-border: #D1D5DB;
    --footer-bg: #FFFFFF;
    --efecto_hover: #F8F9FA;
    --select: #FFFFFF;
    --select_border: #dee2e6;
    --select_color: #212529;
    --select_dropdown: #FFFFFF;
    --select_option: #FFFFFF;
    --select_highligthed: #0d6efd;
    --step-pending-bg: #dee2e6;
    --step-pending-text: #495057;
}

:root[data-theme-mode="default"][data-bs-theme="dark"] {
    --navbar-bg: #212529;
    --sidebar-bg: #212529;
    --body-bg: #212529;
    --footer-border: #3A3F45;
    --footer-bg: #212529;
    --efecto_hover: #2B3035;
    --select: #212529;
    --select_border: #495057;
    --select_color: #f8f9fa;
    --select_dropdown: #212529;
    --select_option: #212529;
    --select_highligthed: #0d6efd;
    --step-pending-bg: #3a3f45;
    --step-pending-text: #f8f9fa;
}

/* ============================================
   TEMA CHUBUT (custom) — light
   Aplica cuando data-theme-mode="chubut".
   (Sin :root suelto para no chocar con Default.)
   ============================================ */

:root[data-theme-mode="chubut"] {
    --bs-primary: #ff682c;
    --bs-primary-rgb: 255, 104, 44;
    --bs-secondary: #cccccc;
    --bs-secondary-rgb: 204, 204, 204;
    --bs-info: #5894a7;
    --bs-info-rgb: 88, 148, 167;
    --bs-success: #21708c;
    --bs-success-rgb: 33, 112, 140;
    --bs-warning: #ffc815;
    --bs-warning-rgb: 255, 200, 21;
    --bs-danger: #a02e2e;
    --bs-danger-rgb: 160, 46, 46;
    --bs-nav-link-color: var(--bs-primary);
    --bs-nav-link-hover-color: #cc4f1a;
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-link-active-color: #fff;
    --navbar-bg: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --body-bg: #F3F0EF;
    --footer-border: #D1D5DB;
    --footer-bg: #FFFFFF;
    --section-line-bg: var(--bs-border-color);
    --efecto_hover: #F8F9FA;
    --select: #FFFFFF;
    --select_border: #dee2e6;
    --select_color: #212529;
    --select_dropdown: #FFFFFF;
    --select_option: #FFFFFF;
    --select_highligthed: #ff682c;
    --step-pending-bg: #cccccc;
    --step-pending-text: #495057;
}

/* ============================================
   Fallback: si el JS no setea el atributo
   data-theme-mode (cookie bloqueada, JS off, etc.)
   mantenemos la paleta Chubut como default de fábrica.
   ============================================ */

:root:not([data-theme-mode]) {
    --bs-primary: #ff682c;
    --bs-primary-rgb: 255, 104, 44;
    --bs-secondary: #cccccc;
    --bs-secondary-rgb: 204, 204, 204;
    --bs-info: #5894a7;
    --bs-info-rgb: 88, 148, 167;
    --bs-success: #21708c;
    --bs-success-rgb: 33, 112, 140;
    --bs-warning: #ffc815;
    --bs-warning-rgb: 255, 200, 21;
    --bs-danger: #a02e2e;
    --bs-danger-rgb: 160, 46, 46;
    --bs-nav-link-color: var(--bs-primary);
    --bs-nav-link-hover-color: #cc4f1a;
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-link-active-color: #fff;
    --navbar-bg: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --body-bg: #F3F0EF;
    --footer-border: #D1D5DB;
    --footer-bg: #FFFFFF;
    --section-line-bg: var(--bs-border-color);
    --efecto_hover: #F8F9FA;
    --select: #FFFFFF;
    --select_border: #dee2e6;
    --select_color: #212529;
    --select_dropdown: #FFFFFF;
    --select_option: #FFFFFF;
    --select_highligthed: #ff682c;
    --step-pending-bg: #cccccc;
    --step-pending-text: #495057;
}

/* ============================================
   TEMA CHUBUT — dark
   ============================================ */

:root[data-theme-mode="chubut"][data-bs-theme="dark"] {
    --navbar-bg: #212529;
    --sidebar-bg: #212529;
    --body-bg: #2C2C2F;
    --footer-border: #3A3F45;
    --footer-bg: #212529;
    --section-line-bg: #3A3F45;
    --efecto_hover: #2B3035;
    --select: #212529;
    --select_border: #495057;
    --select_color: #f8f9fa;
    --select_dropdown: #212529;
    --select_option: #212529;
    --select_highligthed: #ff682c;
    --step-pending-bg: #3a3f45;
    --step-pending-text: #f8f9fa;
}

/* ============================================
   Overrides de componentes Bootstrap
   SOLO aplican en TEMA CHUBUT (light y dark)
   En Default, Bootstrap toma el control.
   ============================================ */

:root[data-theme-mode="chubut"] .text-orange-custom {
    color: #ff682c !important;
}

:root[data-theme-mode="chubut"] .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ff682c;
    --bs-btn-border-color: #ff682c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e65a1f;
    --bs-btn-hover-border-color: #e65a1f;
    --bs-btn-focus-shadow-rgb: 255, 104, 44;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #cc4f1a;
    --bs-btn-active-border-color: #cc4f1a;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ff682c;
    --bs-btn-disabled-border-color: #ff682c;
}

:root[data-theme-mode="chubut"] .btn-outline-primary {
    --bs-btn-color: #ff682c;
    --bs-btn-border-color: #ff682c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff682c;
    --bs-btn-hover-border-color: #ff682c;
    --bs-btn-focus-shadow-rgb: 255, 104, 44;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ff682c;
    --bs-btn-active-border-color: #ff682c;
    --bs-btn-disabled-color: #ff682c;
    --bs-btn-disabled-border-color: #ff682c;
}

:root[data-theme-mode="chubut"] .bg-primary {
    background-color: #ff682c !important;
}

:root[data-theme-mode="chubut"] .text-primary {
    color: #ff682c !important;
}

:root[data-theme-mode="chubut"] .border-primary {
    border-color: #ff682c !important;
}

:root[data-theme-mode="chubut"] .link-primary {
    color: #ff682c !important;
}
:root[data-theme-mode="chubut"] .link-primary:hover {
    color: #e65a1f !important;
}

:root[data-theme-mode="chubut"] .alert-primary {
    color: #cc4f1a;
    background-color: #ffe5d6;
    border-color: #ffceb0;
}
:root[data-theme-mode="chubut"] .alert-primary .alert-link {
    color: #a8431b;
}

:root[data-theme-mode="chubut"] .badge.bg-primary {
    background-color: #ff682c !important;
}

:root[data-theme-mode="chubut"] .btn-secondary {
    --bs-btn-color: #212529;
    --bs-btn-bg: #cccccc;
    --bs-btn-border-color: #cccccc;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #b3b3b3;
    --bs-btn-hover-border-color: #b3b3b3;
    --bs-btn-focus-shadow-rgb: 204, 204, 204;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #999999;
    --bs-btn-active-border-color: #999999;
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: #cccccc;
    --bs-btn-disabled-border-color: #cccccc;
}

:root[data-theme-mode="chubut"] .btn-outline-secondary {
    --bs-btn-color: #cccccc;
    --bs-btn-border-color: #cccccc;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #cccccc;
    --bs-btn-hover-border-color: #cccccc;
    --bs-btn-focus-shadow-rgb: 204, 204, 204;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #cccccc;
    --bs-btn-active-border-color: #cccccc;
    --bs-btn-disabled-color: #cccccc;
    --bs-btn-disabled-border-color: #cccccc;
}

:root[data-theme-mode="chubut"] .bg-secondary {
    background-color: #cccccc !important;
}

:root[data-theme-mode="chubut"] .text-secondary {
    color: #cccccc !important;
}

:root[data-theme-mode="chubut"] .border-secondary {
    border-color: #cccccc !important;
}

:root[data-theme-mode="chubut"] .link-secondary {
    color: #cccccc !important;
}
:root[data-theme-mode="chubut"] .link-secondary:hover {
    color: #999999 !important;
}

:root[data-theme-mode="chubut"] .alert-secondary {
    color: #636363;
    background-color: #f0f0f0;
    border-color: #dcdcdc;
}

:root[data-theme-mode="chubut"] .badge.bg-secondary {
    background-color: #cccccc !important;
    color: #212529 !important;
}

:root[data-theme-mode="chubut"] .btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5894a7;
    --bs-btn-border-color: #5894a7;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4a7d8d;
    --bs-btn-hover-border-color: #4a7d8d;
    --bs-btn-focus-shadow-rgb: 88, 148, 167;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3e6876;
    --bs-btn-active-border-color: #3e6876;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5894a7;
    --bs-btn-disabled-border-color: #5894a7;
}

:root[data-theme-mode="chubut"] .btn-outline-info {
    --bs-btn-color: #5894a7;
    --bs-btn-border-color: #5894a7;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5894a7;
    --bs-btn-hover-border-color: #5894a7;
    --bs-btn-focus-shadow-rgb: 88, 148, 167;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5894a7;
    --bs-btn-active-border-color: #5894a7;
    --bs-btn-disabled-color: #5894a7;
    --bs-btn-disabled-border-color: #5894a7;
}

:root[data-theme-mode="chubut"] .bg-info {
    background-color: #5894a7 !important;
}

:root[data-theme-mode="chubut"] .text-info {
    color: #5894a7 !important;
}

:root[data-theme-mode="chubut"] .border-info {
    border-color: #5894a7 !important;
}

:root[data-theme-mode="chubut"] .link-info {
    color: #5894a7 !important;
}
:root[data-theme-mode="chubut"] .link-info:hover {
    color: #3e6876 !important;
}

:root[data-theme-mode="chubut"] .alert-info {
    color: #2c4a55;
    background-color: #e1edf1;
    border-color: #c9dde3;
}

:root[data-theme-mode="chubut"] .badge.bg-info {
    background-color: #5894a7 !important;
}

:root[data-theme-mode="chubut"] .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #21708c;
    --bs-btn-border-color: #21708c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1a5d75;
    --bs-btn-hover-border-color: #1a5d75;
    --bs-btn-focus-shadow-rgb: 33, 112, 140;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #154c5f;
    --bs-btn-active-border-color: #154c5f;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #21708c;
    --bs-btn-disabled-border-color: #21708c;
}

:root[data-theme-mode="chubut"] .btn-outline-success {
    --bs-btn-color: #21708c;
    --bs-btn-border-color: #21708c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #21708c;
    --bs-btn-hover-border-color: #21708c;
    --bs-btn-focus-shadow-rgb: 33, 112, 140;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #21708c;
    --bs-btn-active-border-color: #21708c;
    --bs-btn-disabled-color: #21708c;
    --bs-btn-disabled-border-color: #21708c;
}

:root[data-theme-mode="chubut"] .bg-success {
    background-color: #21708c !important;
}

:root[data-theme-mode="chubut"] .text-success {
    color: #21708c !important;
}

:root[data-theme-mode="chubut"] .border-success {
    border-color: #21708c !important;
}

:root[data-theme-mode="chubut"] .link-success {
    color: #21708c !important;
}
:root[data-theme-mode="chubut"] .link-success:hover {
    color: #154c5f !important;
}

:root[data-theme-mode="chubut"] .alert-success {
    color: #113d4e;
    background-color: #d4e6ed;
    border-color: #b0d2dd;
}

:root[data-theme-mode="chubut"] .badge.bg-success {
    background-color: #21708c !important;
}

:root[data-theme-mode="chubut"] .btn-warning {
    --bs-btn-color: #212529;
    --bs-btn-bg: #ffc815;
    --bs-btn-border-color: #ffc815;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #e6b400;
    --bs-btn-hover-border-color: #e6b400;
    --bs-btn-focus-shadow-rgb: 255, 200, 21;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #cc9f00;
    --bs-btn-active-border-color: #cc9f00;
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: #ffc815;
    --bs-btn-disabled-border-color: #ffc815;
}

:root[data-theme-mode="chubut"] .btn-outline-warning {
    --bs-btn-color: #ffc815;
    --bs-btn-border-color: #ffc815;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #ffc815;
    --bs-btn-hover-border-color: #ffc815;
    --bs-btn-focus-shadow-rgb: 255, 200, 21;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #ffc815;
    --bs-btn-active-border-color: #ffc815;
    --bs-btn-disabled-color: #ffc815;
    --bs-btn-disabled-border-color: #ffc815;
}

:root[data-theme-mode="chubut"] .bg-warning {
    background-color: #ffc815 !important;
}

:root[data-theme-mode="chubut"] .text-warning {
    color: #ffc815 !important;
}

:root[data-theme-mode="chubut"] .border-warning {
    border-color: #ffc815 !important;
}

:root[data-theme-mode="chubut"] .link-warning {
    color: #ffc815 !important;
}
:root[data-theme-mode="chubut"] .link-warning:hover {
    color: #cc9f00 !important;
}

:root[data-theme-mode="chubut"] .alert-warning {
    color: #7a5c00;
    background-color: #fff4cc;
    border-color: #ffe999;
}

:root[data-theme-mode="chubut"] .badge.bg-warning {
    background-color: #ffc815 !important;
    color: #212529 !important;
}

:root[data-theme-mode="chubut"] .btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #a02e2e;
    --bs-btn-border-color: #a02e2e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8a2828;
    --bs-btn-hover-border-color: #8a2828;
    --bs-btn-focus-shadow-rgb: 160, 46, 46;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #732222;
    --bs-btn-active-border-color: #732222;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #a02e2e;
    --bs-btn-disabled-border-color: #a02e2e;
}

:root[data-theme-mode="chubut"] .btn-outline-danger {
    --bs-btn-color: #a02e2e;
    --bs-btn-border-color: #a02e2e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #a02e2e;
    --bs-btn-hover-border-color: #a02e2e;
    --bs-btn-focus-shadow-rgb: 160, 46, 46;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a02e2e;
    --bs-btn-active-border-color: #a02e2e;
    --bs-btn-disabled-color: #a02e2e;
    --bs-btn-disabled-border-color: #a02e2e;
}

:root[data-theme-mode="chubut"] .bg-danger {
    background-color: #a02e2e !important;
}

:root[data-theme-mode="chubut"] .text-danger {
    color: #a02e2e !important;
}

:root[data-theme-mode="chubut"] .border-danger {
    border-color: #a02e2e !important;
}

:root[data-theme-mode="chubut"] .link-danger {
    color: #a02e2e !important;
}
:root[data-theme-mode="chubut"] .link-danger:hover {
    color: #732222 !important;
}

:root[data-theme-mode="chubut"] .alert-danger {
    color: #5b1818;
    background-color: #f3d8d8;
    border-color: #e8b8b8;
}

:root[data-theme-mode="chubut"] .badge.bg-danger {
    background-color: #a02e2e !important;
}

/* Dropdown items activos: fondo primary del tema activo */
:root[data-theme-mode="chubut"] .dropdown-item.active,
:root[data-theme-mode="chubut"] .dropdown-item:active,
:root[data-theme-mode="chubut"] .dropdown-item:focus {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

:root[data-theme-mode="default"] .dropdown-item.active,
:root[data-theme-mode="default"] .dropdown-item:active,
:root[data-theme-mode="default"] .dropdown-item:focus {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Nav-tabs en listados: pestañas inactivas en color primary */
:root[data-theme-mode="chubut"] .nav-tabs .nav-link {
    color: var(--bs-primary);
    border-color: transparent;
}

:root[data-theme-mode="chubut"] .nav-tabs .nav-link:hover,
:root[data-theme-mode="chubut"] .nav-tabs .nav-link:focus {
    color: #cc4f1a;
    border-color: transparent;
    isolation: isolate;
}

:root[data-theme-mode="chubut"] .nav-tabs .nav-link.active,
:root[data-theme-mode="chubut"] .nav-tabs .nav-item.show .nav-link {
    color: #212529;
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
}

:root[data-theme-mode="chubut"][data-bs-theme="dark"] .nav-tabs .nav-link.active,
:root[data-theme-mode="chubut"][data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
}

/* Protección: el sidebar sigue usando su color normal, no se tiñe de primary */
:root[data-theme-mode="chubut"] .sidemenu-area .sidemenu .navbar-nav .nav-link {
    color: inherit;
}

:root[data-theme-mode="chubut"] .sidemenu-area .sidemenu .navbar-nav .nav-link > .bi,
:root[data-theme-mode="chubut"] .sidemenu-area .sidemenu .navbar-nav .nav-link > i {
    color: var(--bs-primary);
}

:root[data-theme-mode="chubut"] .sidemenu-area .sidemenu .navbar-nav .nav-link:hover,
:root[data-theme-mode="chubut"] .sidemenu-area .sidemenu .navbar-nav .nav-link:focus {
    color: inherit;
}

:root[data-theme-mode="chubut"] .sidemenu-area .sidemenu .navbar-nav .nav-link:hover > .bi,
:root[data-theme-mode="chubut"] .sidemenu-area .sidemenu .navbar-nav .nav-link:focus > .bi,
:root[data-theme-mode="chubut"] .sidemenu-area .sidemenu .navbar-nav .nav-link:hover > i,
:root[data-theme-mode="chubut"] .sidemenu-area .sidemenu .navbar-nav .nav-link:focus > i {
    color: var(--bs-primary);
}

/* ============================================
   DataTables — paginación al tema activo
   Los botones .page-link y .paginate_button
   heredan el primary del tema via variables.
   ============================================ */

:root[data-theme-mode="default"] .page-link {
    color: var(--bs-primary);
}
:root[data-theme-mode="default"] .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
:root[data-theme-mode="default"] .paginate_button.current,
:root[data-theme-mode="default"] .paginate_button.current:hover {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

:root[data-theme-mode="chubut"] .page-link {
    color: var(--bs-primary);
}
:root[data-theme-mode="chubut"] .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
:root[data-theme-mode="chubut"] .paginate_button.current,
:root[data-theme-mode="chubut"] .paginate_button.current:hover {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Preloader: fondo primary del tema activo */
.preloader {
    background-color: var(--bs-primary);
}

/* Iconos del navbar en color primary (solo tema Chubut) */
:root[data-theme-mode="chubut"] .navbar-theme .bi,
:root[data-theme-mode="chubut"] .navbar-theme #sidebarToggle i,
:root[data-theme-mode="chubut"] .navbar-theme #theme-toggle i {
    color: var(--bs-primary);
}

/* ============================================
   Estilos de layout (navbar, sidebar, footer)
   Aplican en AMBOS temas — usan variables
   ============================================ */

.navbar-theme {
    background-color: var(--navbar-bg) !important;
}

.sidebar-theme{
    background-color: var(--sidebar-bg) !important;
}

body{
    background-color: var(--body-bg) !important;
}

footer{
    background-color: var(--footer-bg) !important;
}

.section-title h5::after {
    background-color: var(--bs-primary);
}

.sidemenu-area .sidemenu .navbar-nav .nav-link:hover, .sidemenu-area .sidemenu .navbar-nav .nav-link:focus {
    background: var(--efecto_hover);
}

.select2-container--default .select2-selection--single{
    background-color: var(--select) !important;
    border-color: var(--select_border) !important;
    color: var(--select_color) !important;
}

.select2-container--default .select2-selection__rendered {
    color: var(--select_color) !important;
}

.select2-dropdown {
    background-color: var(--select) !important;
}

.select2-results__option {
    background-color: var(--select_option) !important;
}

.select2-results__option--highlighted {
    background-color: var(--select_highligthed) !important;
}

/* ============================================
   Componentes custom reutilizables
   Usan CSS variables para heredar el color del tema activo.
   Aplican en AMBOS temas (default y chubut).
   ============================================ */

/* Tarjeta con tira lateral de color y fondo tenue.
   Pensada para alertas, cabeceras de solicitud y bloques informativos.
   Se combina con un modificador de color:
     .alert-card.alert-card-danger   → rojo
     .alert-card.alert-card-warning  → amarillo
     .alert-card.alert-card-primary  → azul del tema
     .alert-card.alert-card-success  → verde */
.alert-card {
    background-color: rgba(var(--card-color-rgb), 0.08);
    border-left: 5px solid rgb(var(--card-color-rgb)) !important;
}
.alert-card-danger,
.alert-card-warning,
.alert-card-primary,
.alert-card-success {
    /* Variable local: se sobreescribe abajo según el modificador. */
    --card-color-rgb: var(--bs-danger-rgb);
}
.alert-card-warning { --card-color-rgb: var(--bs-warning-rgb); }
.alert-card-primary { --card-color-rgb: var(--bs-primary-rgb); }
.alert-card-success { --card-color-rgb: var(--bs-success-rgb); }

/* Círculo de ícono de 42x42 dentro de una .alert-card. */
.alert-icon {
    width: 42px;
    height: 42px;
    background-color: rgba(var(--card-color-rgb), 0.18);
    --card-color-rgb: var(--bs-danger-rgb);
}
.alert-icon-warning { --card-color-rgb: var(--bs-warning-rgb); }
.alert-icon-primary { --card-color-rgb: var(--bs-primary-rgb); }
.alert-icon-success { --card-color-rgb: var(--bs-success-rgb); }

/* Bloque interior de una .alert-card con borde dashed.
   Para listas o párrafos que resaltan dentro del alert. */
.alert-inner {
    background-color: rgba(var(--card-color-rgb), 0.05);
    border: 1px dashed rgba(var(--card-color-rgb), 0.25);
    --card-color-rgb: var(--bs-danger-rgb);
}
.alert-inner-warning { --card-color-rgb: var(--bs-warning-rgb); }
.alert-inner-primary { --card-color-rgb: var(--bs-primary-rgb); }
.alert-inner-success { --card-color-rgb: var(--bs-success-rgb); }

/* ============================================
   Wizard stepper — paso pendiente (disabled)
   Centralizado acá para que respete los 4 modos
   (Default/Chubut × light/dark) vía variables.
   El layout/forma vive en static/css/pasos_flecha.css.
   ============================================ */

.step.disabled {
    background-color: var(--step-pending-bg) !important;
    color: var(--step-pending-text) !important;
}
.step.disabled .step-num { opacity: 0.9; }

[data-bs-theme="dark"] .step.disabled .step-num { opacity: 1; }