:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #fff200;
    --bs-secondary: #95d0dd;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-body-font-family: "Inter", sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #000000;
    --bs-body-bg: #fff;
    --bs-link-color: #5f5702;
    --bs-link-hover-color: #252201;
    --bs-heading-color: #212529;
    --bs-border-width: 1px;
    --bs-border-color: #dad9cf;
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-disabled-opacity: 0.65;
    --bs-focus-ring-opacity: 0.25;
    --form-control-focus-border-color: #fff200;
    --navbar-bg: #fff200;
    --navbar-color: #000000;
    --navbar-font-family: inherit;
    --color-bg-active: #cfe2ff;
    --bs-body-color-mute: #6c757d;
    --btn-primary-text: #212529;
    --btn-secondary-text: #000000;
    --btn-light-text: #000000;
    --btn-mute-text: #000000;
    --btn-outline-primary-text: #5f5702;
    --btn-outline-secondary-text: #5f5702;
    --text-utility-primary-override: f;
    --text-utility-secondary-override: #95d0dd;
    --text-utility-danger-override: #dc3545;
    --shadow-x: 0;
    --shadow-y: 0.5rem;
    --shadow-blur: 1rem;
    --shadow-color: rgba(0, 0, 0, 0.15);
    --shadow-sm-x: 0;
    --shadow-sm-y: 0.125rem;
    --shadow-sm-blur: 0.25rem;
    --shadow-sm-color: rgba(0, 0, 0, 0.075);
    --shadow-lg-x: 0;
    --shadow-lg-y: 1rem;
    --shadow-lg-blur: 3rem;
    --shadow-lg-color: rgba(0, 0, 0, 0.175);
    --page-bg-color-val: #f0f2f5;
    --focus-enabled-val: true;
    --focus-shadow-x: 0;
    --focus-shadow-y: 0;
    --focus-shadow-blur: 0;
    --focus-shadow-color: rgba(13, 110, 253, 0.25);
    --bs-primary-rgb: 255, 242, 0;
    --bs-primary-hover: #f2e600;
    --bs-secondary-rgb: 149, 208, 221;
    --bs-secondary-hover: #8dc5d2;
    --bs-success-rgb: 25, 135, 84;
    --bs-success-hover: #188050;
    --bs-danger-rgb: 220, 53, 69;
    --bs-danger-hover: #d13241;
    --bs-warning-rgb: 255, 193, 7;
    --bs-warning-hover: #f2b707;
    --bs-info-rgb: 13, 202, 240;
    --bs-info-hover: #0cc0e4;
    --bs-light-rgb: 248, 249, 250;
    --bs-light-hover: #ebeced;
    --bs-dark-rgb: 33, 37, 41;
    --bs-dark-hover: #1f2327;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 0, 0, 0;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-gray-100-rgb: 248, 249, 250;
    --bs-gray-200-rgb: 233, 236, 239;
    --bs-gray-300-rgb: 222, 226, 230;
    --bs-gray-400-rgb: 206, 212, 218;
    --bs-gray-500-rgb: 173, 181, 189;
    --bs-gray-600-rgb: 108, 117, 125;
    --bs-gray-700-rgb: 73, 80, 87;
    --bs-gray-800-rgb: 52, 58, 64;
    --bs-gray-900-rgb: 33, 37, 41;
    --bs-gray-dark-rgb: 52, 58, 64;
    --bs-body-color-mute-rgb: 108, 117, 125;
    --bs-focus-ring-color: rgba(255, 242, 0, 0.25);
    --bs-primary-bg-subtle: #fffccc;
    --bs-primary-text-emphasis: #999100;
    --bs-primary-border-subtle: #fffa99;
    --bs-btn-primary-color: #212529;
    --bs-btn-primary-bg: #fff200;
    --bs-btn-primary-border-color: #fff200;
    --bs-btn-primary-hover-bg: #f2e600;
    --bs-btn-primary-hover-border-color: #efe300;
    --bs-btn-primary-hover-color: #212529;
    --bs-btn-primary-active-bg: #ebdf00;
    --bs-btn-primary-active-border-color: #e8dc00;
    --bs-btn-primary-active-color: #212529;
    --bs-btn-primary-disabled-bg: #fff200;
    --bs-btn-primary-disabled-border-color: #fff200;
    --bs-btn-primary-disabled-color: #212529;
    --bs-secondary-bg-subtle: #eaf6f8;
    --bs-secondary-text-emphasis: #597d85;
    --bs-secondary-border-subtle: #d5ecf1;
    --bs-btn-secondary-color: #000000;
    --bs-btn-secondary-bg: #95d0dd;
    --bs-btn-secondary-border-color: #95d0dd;
    --bs-btn-secondary-hover-bg: #8dc5d2;
    --bs-btn-secondary-hover-border-color: #8cc3cf;
    --bs-btn-secondary-hover-color: #000000;
    --bs-btn-secondary-active-bg: #89c0cc;
    --bs-btn-secondary-active-border-color: #88bdc9;
    --bs-btn-secondary-active-color: #000000;
    --bs-btn-secondary-disabled-bg: #95d0dd;
    --bs-btn-secondary-disabled-border-color: #95d0dd;
    --bs-btn-secondary-disabled-color: #000000;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-success-text-emphasis: #0f5132;
    --bs-success-border-subtle: #a3cfbb;
    --bs-btn-success-color: #fff;
    --bs-btn-success-bg: #198754;
    --bs-btn-success-border-color: #198754;
    --bs-btn-success-hover-bg: #188050;
    --bs-btn-success-hover-border-color: #177f4f;
    --bs-btn-success-hover-color: #fff;
    --bs-btn-success-active-bg: #177c4d;
    --bs-btn-success-active-border-color: #177b4d;
    --bs-btn-success-active-color: #fff;
    --bs-btn-success-disabled-bg: #198754;
    --bs-btn-success-disabled-border-color: #198754;
    --bs-btn-success-disabled-color: #fff;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-danger-text-emphasis: #842029;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-btn-danger-color: #fff;
    --bs-btn-danger-bg: #dc3545;
    --bs-btn-danger-border-color: #dc3545;
    --bs-btn-danger-hover-bg: #d13241;
    --bs-btn-danger-hover-border-color: #ce3241;
    --bs-btn-danger-hover-color: #fff;
    --bs-btn-danger-active-bg: #cb3140;
    --bs-btn-danger-active-border-color: #c8303f;
    --bs-btn-danger-active-color: #fff;
    --bs-btn-danger-disabled-bg: #dc3545;
    --bs-btn-danger-disabled-border-color: #dc3545;
    --bs-btn-danger-disabled-color: #fff;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-warning-text-emphasis: #997404;
    --bs-warning-border-subtle: #ffe69c;
    --bs-btn-warning-color: #000000;
    --bs-btn-warning-bg: #ffc107;
    --bs-btn-warning-border-color: #ffc107;
    --bs-btn-warning-hover-bg: #f2b707;
    --bs-btn-warning-hover-border-color: #efb507;
    --bs-btn-warning-hover-color: #000000;
    --bs-btn-warning-active-bg: #ebb206;
    --bs-btn-warning-active-border-color: #e8b006;
    --bs-btn-warning-active-color: #000000;
    --bs-btn-warning-disabled-bg: #ffc107;
    --bs-btn-warning-disabled-border-color: #ffc107;
    --bs-btn-warning-disabled-color: #000000;
    --bs-info-bg-subtle: #cff4fc;
    --bs-info-text-emphasis: #087990;
    --bs-info-border-subtle: #9eeaf9;
    --bs-btn-info-color: #fff;
    --bs-btn-info-bg: #0dcaf0;
    --bs-btn-info-border-color: #0dcaf0;
    --bs-btn-info-hover-bg: #0cc0e4;
    --bs-btn-info-hover-border-color: #0cbde1;
    --bs-btn-info-hover-color: #fff;
    --bs-btn-info-active-bg: #0cbadd;
    --bs-btn-info-active-border-color: #0cb8db;
    --bs-btn-info-active-color: #fff;
    --bs-btn-info-disabled-bg: #0dcaf0;
    --bs-btn-info-disabled-border-color: #0dcaf0;
    --bs-btn-info-disabled-color: #fff;
    --bs-light-bg-subtle: #fefefe;
    --bs-light-text-emphasis: #959596;
    --bs-light-border-subtle: #fcfdfd;
    --bs-btn-light-color: #000000;
    --bs-btn-light-bg: #f8f9fa;
    --bs-btn-light-border-color: #f8f9fa;
    --bs-btn-light-hover-bg: #ebeced;
    --bs-btn-light-hover-border-color: #e9eaeb;
    --bs-btn-light-hover-color: #000000;
    --bs-btn-light-active-bg: #e5e6e6;
    --bs-btn-light-active-border-color: #e2e3e4;
    --bs-btn-light-active-color: #000000;
    --bs-btn-light-disabled-bg: #f8f9fa;
    --bs-btn-light-disabled-border-color: #f8f9fa;
    --bs-btn-light-disabled-color: #000000;
    --bs-dark-bg-subtle: #d3d3d4;
    --bs-dark-text-emphasis: #141619;
    --bs-dark-border-subtle: #a6a8a9;
    --bs-btn-dark-color: #fff;
    --bs-btn-dark-bg: #212529;
    --bs-btn-dark-border-color: #212529;
    --bs-btn-dark-hover-bg: #1f2327;
    --bs-btn-dark-hover-border-color: #1f2326;
    --bs-btn-dark-hover-color: #fff;
    --bs-btn-dark-active-bg: #1e2226;
    --bs-btn-dark-active-border-color: #1e2225;
    --bs-btn-dark-active-color: #fff;
    --bs-btn-dark-disabled-bg: #212529;
    --bs-btn-dark-disabled-border-color: #212529;
    --bs-btn-dark-disabled-color: #fff;
    --bs-form-check-checked-bg-color: var(--bs-primary);
    --bs-form-check-checked-border-color: var(--bs-primary);
    --bs-form-check-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
    /* === Custom Persistence Vars === */
    --btn-primary-text: #212529;
    --btn-secondary-text: #000000;
    --btn-light-text: #000000;
    --btn-mute-text: #000000;
    --btn-outline-primary-text: #5f5702;
    --btn-outline-secondary-text: #5f5702;
    --text-utility-primary-override: f;
    --text-utility-secondary-override: #95d0dd;
    --text-utility-danger-override: #dc3545;
    --page-bg-color-val: #f0f2f5;
    --shadow-x: 0;
    --shadow-y: 0.5rem;
    --shadow-blur: 1rem;
    --shadow-color: rgba(0, 0, 0, 0.15);
    --shadow-sm-x: 0;
    --shadow-sm-y: 0.125rem;
    --shadow-sm-blur: 0.25rem;
    --shadow-sm-color: rgba(0, 0, 0, 0.075);
    --shadow-lg-x: 0;
    --shadow-lg-y: 1rem;
    --shadow-lg-blur: 3rem;
    --shadow-lg-color: rgba(0, 0, 0, 0.175);
    --focus-enabled-val: true;
    --focus-shadow-x: 0;
    --focus-shadow-y: 0;
    --focus-shadow-blur: 0;
    --focus-shadow-color: rgba(13, 110, 253, 0.25);
    --form-control-focus-border-color: #fff200;
    /* Fix: Checkboxes y Radios (Variables de formulario) */
    --bs-form-check-checked-bg-color: var(--bs-primary);
    --bs-form-check-checked-border-color: var(--bs-primary);
    --bs-form-check-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
}


/* --- Estilos originales del usuario preservados --- */
/* --- 1. DEFINICIÓN DEL TEMA DEL SITIO --- */
/* Modifica estos valores para cambiar el tema de todo el sitio. */


/* --- 2. ESTILOS GENERALES Y SIDEBAR --- */
body {
    display: flex;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.sidebar {
    width: 250px;
    height: 100vh;
    background: var(--bs-light); /* OK */
    position: fixed;
    top: 56px;
    left: 0;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    z-index: 1051;
    transition: left 0.3s;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); /* OK */
}

    .sidebar .user-info {
        text-align: center;
        margin-bottom: 1rem;
    }

        .sidebar .user-info .avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: var(--bs-white);
            border: 2px solid var(--bs-primary); /* Actualizado a Primary */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--bs-primary); /* Actualizado a Primary */
            font-size: 22px;
            margin: 0 auto;
        }

    .sidebar .nav-link {
        color: var(--bs-body-color);
        display: flex;
        align-items: center;
        position: relative;
        padding: 0.5rem 1rem;
    }

        .sidebar .nav-link i {
            margin-right: 10px;
            width: 1.25em;
            text-align: center;
        }

        .sidebar .nav-link.active {
            background-color: var(--color-bg-active, var(--bs-primary-bg-subtle)); /* Mantenido o usa subtle */
            color: var(--bs-primary); /* Actualizado a Primary */
            border-right: 3px solid var(--bs-primary); /* Actualizado a Primary */
            padding-right: calc(1rem - 3px);
        }

        .sidebar .nav-link:not(.active) {
            border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
        }

    .sidebar .nav-item:last-child .nav-link:not(.active) {
        border-bottom: none;
    }


/* --- 3. ESTILOS DE PERFIL Y CONTENIDO --- */
.container-profile {
    margin-top: 35px;
    max-width: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-wrapper {
    display: flex;
    gap: 1rem;
}

.profile-card {
    background: var(--bs-body-bg);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem;
    text-align: left;
    box-shadow: var(--bs-box-shadow-sm);
    flex: 1;
    max-width: 350px;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.profile-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid var(--bs-primary); /* Actualizado a Primary */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
    color: var(--bs-primary); /* Actualizado a Primary */
    margin: auto;
    position: relative;
    background-color: var(--bs-light);
}

    .profile-avatar i {
        position: absolute;
        bottom: 0;
        right: 0;
        background: var(--bs-white);
        border-radius: 50%;
        padding: 5px;
        font-size: 16px;
        cursor: pointer;
        color: var(--bs-primary);
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    }

.info-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-box {
    background: var(--bs-body-bg);
    border-radius: var(--bs-border-radius-lg);
    padding: 1rem;
    box-shadow: var(--bs-box-shadow-sm);
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

    .info-box h6 {
        font-size: 14px;
        font-weight: bold;
        color: var(--bs-secondary-color);
        margin-bottom: 5px;
    }

    .info-box p {
        margin: 0;
        font-size: 16px;
        color: var(--bs-body-color);
    }

.content {
    margin-left: 250px;
    flex-grow: 1;
    padding: 2rem;
    margin-top: 70px;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

/* --- 4. NAVBAR --- */
.navbar {
    z-index: 1053;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--navbar-bg, var(--bs-primary)); /* OK */
    color: var(--navbar-color, var(--bs-white)); /* OK */
    font-family: var(--navbar-font-family, inherit); /* OK */
    height: 56px;
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    .navbar .container, .navbar .container-fluid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }


    .navbar .navbar-brand {
        color: inherit;
        font-size: var(--logo-font-size, 1.5rem);
        line-height: 1;
        margin: 0 auto;
        padding: 0;
        display: flex;
        align-items: center;
        text-decoration: none;
    }

        .navbar .navbar-brand img {
            height: var(--logo-image-height, 25px);
            object-fit: contain;
            filter: var(--logo-image-filter, none);
        }


    .navbar .btn {
        color: inherit; /* OK */
        border: none;
        background: none;
        padding: 0.375rem 0.75rem;
        line-height: inherit;
        display: inline-flex;
        align-items: center;
    }

        .navbar .btn i {
            font-size: 1.5rem;
        }

#menu-toggle {
    position: absolute;
    left: 1rem;
    background-color: transparent;
    border-color: transparent;
    /* Color heredado de .navbar */
}

    #menu-toggle:hover {
        background-color: var(--color-primary-hover, #218838); /* Usa variable custom */
        border-color: var(--color-primary-border-hover, #1e7e34); /* Usa variable custom */
    }

/* --- 5. COMPONENTES (SweetAlert, Botones) --- */
.swal2-actions-custom {
    display: flex !important;
    justify-content: center !important;
    gap: 10px;
}
/* SweetAlert usa primary ahora para confirmar */
.swal2-confirm-custom {
    background-color: var(--bs-primary); /* Actualizado */
    color: var(--bs-white); /* Asume contraste blanco */
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-primary); /* Actualizado */
    width: 100px;
    height: 100px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    border-radius: 0 !important;
    padding: 0 !important;
}

    .swal2-confirm-custom:hover {
        filter: brightness(90%);
    }


.swal2-cancel-custom {
    background-color: transparent;
    color: var(--bs-danger);
    border: 1px solid var(--bs-danger);
    width: 100px;
    height: 100px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    border-radius: 0 !important;
    padding: 0 !important;
}

    .swal2-cancel-custom:hover {
        background-color: var(--bs-danger);
        color: var(--bs-white);
    }


.btn {
    border-radius: var(--bs-border-radius);
}

    .btn img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

.money-btn {
    border-radius: var(--bs-border-radius-pill);
    font-size: 0.85rem;
    padding: 4px 14px;
}


/* --- 6. INPUTS --- */
.form-control, .form-select {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

::placeholder {
    color: var(--bs-secondary-color);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--bs-secondary-color);
    opacity: 1;
}

::-ms-input-placeholder {
    color: var(--bs-secondary-color);
    opacity: 1;
}

.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary); /* Foco primary */
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); /* Foco primary */
    outline: 0;
}

.underline-input {
    border: none;
    border-bottom-width: var(--underline-input-border-width, 2px);
    border-bottom-style: solid;
    border-bottom-color: var(--underline-input-border-color, var(--bs-border-color));
    border-radius: 0;
    background: transparent;
    transition: border-color 0.2s ease-in-out;
    font-size: 1.2rem;
    padding: 0.375rem 0;
    line-height: 1.5;
    width: 100%;
    color: var(--bs-body-color);
}

    .underline-input:focus {
        border-bottom-color: var(--bs-primary); /* Actualizado a Primary */
        outline: none;
        box-shadow: none !important;
    }

.InputH {
    font-size: 1.6rem;
    font-weight: 250;
    border-bottom-width: 3px;
}

.code-digit {
    width: 40px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

.code-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Quitar spinners */
.code-digit::-webkit-outer-spin-button,
.code-digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.code-digit {
    -moz-appearance: textfield;
}


/* --- 7. DEUDA ITEM --- */
.deuda-item-init {
    cursor: pointer;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}

    .list-group-item.active,
    .deuda-item-init.active {
        background-color: var(--color-bg-active, var(--bs-primary)) !important; /* Mantenido o usa primary */
        border-left: 4px solid var(--bs-primary) !important;
        color: var(--bs-white) !important;
        font-weight: bold;
        border-color: var(--bs-primary) !important;
    }

        .deuda-item-init.active .fw-semibold {
            font-weight: bold !important;
        }

        .deuda-item-init.active h6 {
            color: var(--bs-white) !important;
        }

        .deuda-item-init.active .form-check-input {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

/* --- 8. ESTADO DISABLED --- */
*:disabled, .disabled {
    pointer-events: none !important;
}


/* --- 9. AJUSTES RESPONSIVE --- */
@media (max-width: 992px) {
    .sidebar {
        left: -250px;
    }

        .sidebar.show {
            left: 0;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
        }

    .content {
        --bs-gutter-x: 1.5rem;
        margin-left: 0;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        max-width: 100%;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .profile-wrapper {
        flex-direction: column;
    }

    .profile-card {
        max-width: 100%;
    }

    #menu-toggle {
        position: static;
        margin-right: auto;
    }

    .navbar .navbar-brand {
        margin-left: -40px;
    }

    .navbar .container, .navbar .container-fluid {
        justify-content: flex-start;
    }
}




/* --- Sobrescritura de Componentes BS --- */

/* --- Sobrescritura de Componentes BS --- */

/* === Fondo de Página Global === */
html, body {
    background-color: #f0f2f5 !important;
}

/* === Texto Base Universal === */
/* Asegura que el color del body se aplique al texto base, solucionando la herencia rota */
body {
    color: var(--bs-body-color) !important; /* Forzar aquí para máxima prioridad en el <body> */
}
/* 1. Forzamos el color del texto en elementos comunes sin clases específicas, incluyendo headers y labels */
:root:where(div, span, p, li, label):not(.btn):not([class*="alert"]):not([class*="text-"]):not([class*="bg-"]):not([class*="form-"]) {
    color: var(--bs-body-color) !important;
}

/* 2. Forzamos los encabezados (h1-h6) a usar el color de encabezado si está definido, o body color como fallback */
html h1, html h2, html h3, html h4, html h5, html h6 { /* Aumentamos la especificidad usando 'html' para forzar la anulación */
    color: #212529 !important;
}

/* 3. Forzamos los enlaces (a) que NO tienen una clase de utilidad de texto a usar el link color. */
a:not([class*="text-"]) {
    color: var(--bs-link-color) !important;
}

    a:not([class*="text-"]):hover {
        color: var(--bs-link-hover-color) !important;
    }

/* === Placeholder Color === */
input::placeholder, textarea::placeholder {
    color: var(--bs-body-color) !important;
    opacity: 0.6;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: var(--bs-body-color) !important;
    opacity: 0.6;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: var(--bs-body-color) !important;
    opacity: 0.6;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: var(--bs-body-color) !important;
    opacity: 0.6;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
    color: var(--bs-body-color) !important;
    opacity: 0.6;
}

/* === Form Control Focus Override (.form-control, select, textarea) === */
.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: #fff200 !important; /* Usa el valor directo o --bs-primary */
    box-shadow: 0 0 0 rgba(13, 110, 253, 0.25) !important; /* Usa la sombra amigable */
}

/* === Form Control Fixes (Radio/Checkbox checked state) === */
.form-check-input:checked {
    /* Fondo: usa primary */
    background-color: var(--bs-primary) !important;
    /* Borde: usa primary */
    border-color: var(--bs-primary) !important;
}

.form-check-input:focus {
    /* Sombra de foco: usa primary-rgb */
    box-shadow: 0 0 0 0.25rem rgba(255, 242, 0, var(--bs-focus-ring-opacity)) !important;
    border-color: var(--bs-primary) !important;
}

.form-check-input[type="checkbox"]:checked {
    /* Icono de check (SVG) - Usa el color de contraste resuelto (sin #) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

.form-check-input[type="radio"]:checked {
    /* Icono de radio (SVG) - Usa el color de contraste resuelto (sin #) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23212529'/%3e%3c/svg%3e") !important;
}

/* === Input Range Fixes === */
.form-range::-webkit-slider-thumb {
    background: var(--bs-primary) !important;
}

.form-range::-moz-range-thumb {
    background: var(--bs-primary) !important;
}

.form-range::-webkit-slider-runnable-track {
    background: var(--bs-gray-300) !important; /* Usar un gris base como fondo de track */
}

.form-range::-moz-range-track {
    background: var(--bs-gray-300) !important;
}

/* === Navbar Overrides === */
.navbar {
    background-color: var(--navbar-bg) !important; /* Usa la variable de Root resuelta */
    min-height: var(--navbar-height); /* Usa la variable de Root */
}

.navbar-brand, .navbar-nav .nav-link, .navbar-text, .navbar-toggler {
    color: var(--navbar-color) !important;
}

.navbar-toggler {
    border-color: var(--navbar-color);
}

.navbar-toggler-icon {
    /* Usa la variable --navbar-color resuelta para el SVG */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.btn-primary {
    color: var(--btn-primary-text) !important; /* Usa el override/calculado de Root */

    background-color: var(--bs-btn-primary-bg) !important;
    border-color: var(--bs-btn-primary-border-color) !important;
}

    .btn-primary:hover {
        color: var(--btn-primary-text) !important;
        background-color: var(--bs-btn-primary-hover-bg) !important;
        border-color: var(--bs-btn-primary-hover-border-color) !important;
    }

    .btn-primary:focus, .btn-primary.focus {
        color: var(--btn-primary-text) !important;
        background-color: var(--bs-btn-primary-hover-bg) !important;
        border-color: var(--bs-btn-primary-hover-border-color) !important;
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-primary:active, .btn-primary.active {
        color: var(--btn-primary-text) !important;
        background-color: var(--bs-btn-primary-active-bg) !important;
        border-color: var(--bs-btn-primary-active-border-color) !important;
    }

    .btn-primary:disabled, .btn-primary.disabled {
        color: var(--btn-primary-text) !important;
        background-color: var(--bs-btn-primary-disabled-bg) !important;
        border-color: var(--bs-btn-primary-disabled-border-color) !important;
    }

.btn-outline-primary {
    /* Usa el override si está definido, si no, usa el color base de BS */
    color: #5f5702 !important;
    border-color: var(--bs-primary) !important;
}

    .btn-outline-primary:hover {
        color: var(--btn-primary-text) !important; /* El texto en hover es el del botón sólido */
        background-color: var(--bs-primary) !important; /* Color base */
        border-color: var(--bs-primary) !important;
    }

    .btn-outline-primary:focus, .btn-outline-primary.focus {
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-outline-primary:active, .btn-outline-primary.active {
        color: var(--btn-primary-text) !important;
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
    }

    .btn-outline-primary:disabled, .btn-outline-primary.disabled {
        /* Usa el color de texto normal o el override de outline si está definido */
        color: #5f5702 !important;
        background-color: transparent !important;
    }

.alert-primary {
    color: var(--bs-primary-text-emphasis) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}

    .alert-primary .alert-link {
        color: var(--bs-primary-text-emphasis) !important;
        font-weight: bold; /* Opcional */
    }

.badge.text-bg-primary, .badge.bg-primary { /* Añadido .badge.bg-t */
    color: var(--btn-primary-text) !important; /* Reusa color de botón (override) */
    background-color: var(--bs-primary) !important; /* Usa color base */
}

.text-primary {
    color: var(--text-utility-primary-override) !important; /* Usa el override de texto */
}

.btn-secondary {
    color: var(--btn-secondary-text) !important; /* Usa el override/calculado de Root */

    background-color: var(--bs-btn-secondary-bg) !important;
    border-color: var(--bs-btn-secondary-border-color) !important;
}

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

    .btn-secondary:focus, .btn-secondary.focus {
        color: var(--btn-secondary-text) !important;
        background-color: var(--bs-btn-secondary-hover-bg) !important;
        border-color: var(--bs-btn-secondary-hover-border-color) !important;
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-secondary:active, .btn-secondary.active {
        color: var(--btn-secondary-text) !important;
        background-color: var(--bs-btn-secondary-active-bg) !important;
        border-color: var(--bs-btn-secondary-active-border-color) !important;
    }

    .btn-secondary:disabled, .btn-secondary.disabled {
        color: var(--btn-secondary-text) !important;
        background-color: var(--bs-btn-secondary-disabled-bg) !important;
        border-color: var(--bs-btn-secondary-disabled-border-color) !important;
    }

.btn-outline-secondary {
    /* Usa el override si está definido, si no, usa el color base de BS */
    color: #5f5702 !important;
    border-color: var(--bs-secondary) !important;
}

    .btn-outline-secondary:hover {
        color: var(--btn-secondary-text) !important; /* El texto en hover es el del botón sólido */
        background-color: var(--bs-secondary) !important; /* Color base */
        border-color: var(--bs-secondary) !important;
    }

    .btn-outline-secondary:focus, .btn-outline-secondary.focus {
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-outline-secondary:active, .btn-outline-secondary.active {
        color: var(--btn-secondary-text) !important;
        background-color: var(--bs-secondary) !important;
        border-color: var(--bs-secondary) !important;
    }

    .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
        /* Usa el color de texto normal o el override de outline si está definido */
        color: #5f5702 !important;
        background-color: transparent !important;
    }

.alert-secondary {
    color: var(--bs-secondary-text-emphasis) !important;
    background-color: var(--bs-secondary-bg-subtle) !important;
    border-color: var(--bs-secondary-border-subtle) !important;
}

    .alert-secondary .alert-link {
        color: var(--bs-secondary-text-emphasis) !important;
        font-weight: bold; /* Opcional */
    }

.badge.text-bg-secondary, .badge.bg-secondary { /* Añadido .badge.bg-t */
    color: var(--btn-secondary-text) !important; /* Reusa color de botón (override) */
    background-color: var(--bs-secondary) !important; /* Usa color base */
}

.text-secondary {
    color: var(--text-utility-secondary-override) !important; /* Usa el override de texto */
}

.btn-success {
    color: var(--btn-success-text) !important; /* Usa el override/calculado de Root */

    background-color: var(--bs-btn-success-bg) !important;
    border-color: var(--bs-btn-success-border-color) !important;
}

    .btn-success:hover {
        color: var(--btn-success-text) !important;
        background-color: var(--bs-btn-success-hover-bg) !important;
        border-color: var(--bs-btn-success-hover-border-color) !important;
    }

    .btn-success:focus, .btn-success.focus {
        color: var(--btn-success-text) !important;
        background-color: var(--bs-btn-success-hover-bg) !important;
        border-color: var(--bs-btn-success-hover-border-color) !important;
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-success:active, .btn-success.active {
        color: var(--btn-success-text) !important;
        background-color: var(--bs-btn-success-active-bg) !important;
        border-color: var(--bs-btn-success-active-border-color) !important;
    }

    .btn-success:disabled, .btn-success.disabled {
        color: var(--btn-success-text) !important;
        background-color: var(--bs-btn-success-disabled-bg) !important;
        border-color: var(--bs-btn-success-disabled-border-color) !important;
    }

.btn-outline-success {
    /* Usa el override si está definido, si no, usa el color base de BS */
    color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

    .btn-outline-success:hover {
        color: var(--btn-success-text) !important; /* El texto en hover es el del botón sólido */
        background-color: var(--bs-success) !important; /* Color base */
        border-color: var(--bs-success) !important;
    }

    .btn-outline-success:focus, .btn-outline-success.focus {
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-outline-success:active, .btn-outline-success.active {
        color: var(--btn-success-text) !important;
        background-color: var(--bs-success) !important;
        border-color: var(--bs-success) !important;
    }

    .btn-outline-success:disabled, .btn-outline-success.disabled {
        /* Usa el color de texto normal o el override de outline si está definido */
        color: var(--bs-success) !important;
        background-color: transparent !important;
    }

.alert-success {
    color: var(--bs-success-text-emphasis) !important;
    background-color: var(--bs-success-bg-subtle) !important;
    border-color: var(--bs-success-border-subtle) !important;
}

    .alert-success .alert-link {
        color: var(--bs-success-text-emphasis) !important;
        font-weight: bold; /* Opcional */
    }

.badge.text-bg-success, .badge.bg-success { /* Añadido .badge.bg-t */
    color: var(--btn-success-text) !important; /* Reusa color de botón (override) */
    background-color: var(--bs-success) !important; /* Usa color base */
}

.text-success {
    color: var(--text-utility-success-override) !important; /* Usa el override de texto */
}

.btn-danger {
    color: var(--btn-danger-text) !important; /* Usa el override/calculado de Root */

    background-color: var(--bs-btn-danger-bg) !important;
    border-color: var(--bs-btn-danger-border-color) !important;
}

    .btn-danger:hover {
        color: var(--btn-danger-text) !important;
        background-color: var(--bs-btn-danger-hover-bg) !important;
        border-color: var(--bs-btn-danger-hover-border-color) !important;
    }

    .btn-danger:focus, .btn-danger.focus {
        color: var(--btn-danger-text) !important;
        background-color: var(--bs-btn-danger-hover-bg) !important;
        border-color: var(--bs-btn-danger-hover-border-color) !important;
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-danger:active, .btn-danger.active {
        color: var(--btn-danger-text) !important;
        background-color: var(--bs-btn-danger-active-bg) !important;
        border-color: var(--bs-btn-danger-active-border-color) !important;
    }

    .btn-danger:disabled, .btn-danger.disabled {
        color: var(--btn-danger-text) !important;
        background-color: var(--bs-btn-danger-disabled-bg) !important;
        border-color: var(--bs-btn-danger-disabled-border-color) !important;
    }

.btn-outline-danger {
    /* Usa el override si está definido, si no, usa el color base de BS */
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

    .btn-outline-danger:hover {
        color: var(--btn-danger-text) !important; /* El texto en hover es el del botón sólido */
        background-color: var(--bs-danger) !important; /* Color base */
        border-color: var(--bs-danger) !important;
    }

    .btn-outline-danger:focus, .btn-outline-danger.focus {
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-outline-danger:active, .btn-outline-danger.active {
        color: var(--btn-danger-text) !important;
        background-color: var(--bs-danger) !important;
        border-color: var(--bs-danger) !important;
    }

    .btn-outline-danger:disabled, .btn-outline-danger.disabled {
        /* Usa el color de texto normal o el override de outline si está definido */
        color: var(--bs-danger) !important;
        background-color: transparent !important;
    }

.alert-danger {
    color: var(--bs-danger-text-emphasis) !important;
    background-color: var(--bs-danger-bg-subtle) !important;
    border-color: var(--bs-danger-border-subtle) !important;
}

    .alert-danger .alert-link {
        color: var(--bs-danger-text-emphasis) !important;
        font-weight: bold; /* Opcional */
    }

.badge.text-bg-danger, .badge.bg-danger { /* Añadido .badge.bg-t */
    color: var(--btn-danger-text) !important; /* Reusa color de botón (override) */
    background-color: var(--bs-danger) !important; /* Usa color base */
}

.text-danger {
    color: var(--text-utility-danger-override) !important; /* Usa el override de texto */
}

.btn-warning {
    color: var(--btn-warning-text) !important; /* Usa el override/calculado de Root */

    background-color: var(--bs-btn-warning-bg) !important;
    border-color: var(--bs-btn-warning-border-color) !important;
}

    .btn-warning:hover {
        color: var(--btn-warning-text) !important;
        background-color: var(--bs-btn-warning-hover-bg) !important;
        border-color: var(--bs-btn-warning-hover-border-color) !important;
    }

    .btn-warning:focus, .btn-warning.focus {
        color: var(--btn-warning-text) !important;
        background-color: var(--bs-btn-warning-hover-bg) !important;
        border-color: var(--bs-btn-warning-hover-border-color) !important;
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-warning:active, .btn-warning.active {
        color: var(--btn-warning-text) !important;
        background-color: var(--bs-btn-warning-active-bg) !important;
        border-color: var(--bs-btn-warning-active-border-color) !important;
    }

    .btn-warning:disabled, .btn-warning.disabled {
        color: var(--btn-warning-text) !important;
        background-color: var(--bs-btn-warning-disabled-bg) !important;
        border-color: var(--bs-btn-warning-disabled-border-color) !important;
    }

.btn-outline-warning {
    /* Usa el override si está definido, si no, usa el color base de BS */
    color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
}

    .btn-outline-warning:hover {
        color: var(--btn-warning-text) !important; /* El texto en hover es el del botón sólido */
        background-color: var(--bs-warning) !important; /* Color base */
        border-color: var(--bs-warning) !important;
    }

    .btn-outline-warning:focus, .btn-outline-warning.focus {
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-outline-warning:active, .btn-outline-warning.active {
        color: var(--btn-warning-text) !important;
        background-color: var(--bs-warning) !important;
        border-color: var(--bs-warning) !important;
    }

    .btn-outline-warning:disabled, .btn-outline-warning.disabled {
        /* Usa el color de texto normal o el override de outline si está definido */
        color: var(--bs-warning) !important;
        background-color: transparent !important;
    }

.alert-warning {
    color: var(--bs-warning-text-emphasis) !important;
    background-color: var(--bs-warning-bg-subtle) !important;
    border-color: var(--bs-warning-border-subtle) !important;
}

    .alert-warning .alert-link {
        color: var(--bs-warning-text-emphasis) !important;
        font-weight: bold; /* Opcional */
    }

.badge.text-bg-warning, .badge.bg-warning { /* Añadido .badge.bg-t */
    color: var(--btn-warning-text) !important; /* Reusa color de botón (override) */
    background-color: var(--bs-warning) !important; /* Usa color base */
}

.text-warning {
    color: var(--text-utility-warning-override) !important; /* Usa el override de texto */
}

.btn-info {
    color: var(--btn-info-text) !important; /* Usa el override/calculado de Root */

    background-color: var(--bs-btn-info-bg) !important;
    border-color: var(--bs-btn-info-border-color) !important;
}

    .btn-info:hover {
        color: var(--btn-info-text) !important;
        background-color: var(--bs-btn-info-hover-bg) !important;
        border-color: var(--bs-btn-info-hover-border-color) !important;
    }

    .btn-info:focus, .btn-info.focus {
        color: var(--btn-info-text) !important;
        background-color: var(--bs-btn-info-hover-bg) !important;
        border-color: var(--bs-btn-info-hover-border-color) !important;
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-info:active, .btn-info.active {
        color: var(--btn-info-text) !important;
        background-color: var(--bs-btn-info-active-bg) !important;
        border-color: var(--bs-btn-info-active-border-color) !important;
    }

    .btn-info:disabled, .btn-info.disabled {
        color: var(--btn-info-text) !important;
        background-color: var(--bs-btn-info-disabled-bg) !important;
        border-color: var(--bs-btn-info-disabled-border-color) !important;
    }

.btn-outline-info {
    /* Usa el override si está definido, si no, usa el color base de BS */
    color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
}

    .btn-outline-info:hover {
        color: var(--btn-info-text) !important; /* El texto en hover es el del botón sólido */
        background-color: var(--bs-info) !important; /* Color base */
        border-color: var(--bs-info) !important;
    }

    .btn-outline-info:focus, .btn-outline-info.focus {
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-outline-info:active, .btn-outline-info.active {
        color: var(--btn-info-text) !important;
        background-color: var(--bs-info) !important;
        border-color: var(--bs-info) !important;
    }

    .btn-outline-info:disabled, .btn-outline-info.disabled {
        /* Usa el color de texto normal o el override de outline si está definido */
        color: var(--bs-info) !important;
        background-color: transparent !important;
    }

.alert-info {
    color: var(--bs-info-text-emphasis) !important;
    background-color: var(--bs-info-bg-subtle) !important;
    border-color: var(--bs-info-border-subtle) !important;
}

    .alert-info .alert-link {
        color: var(--bs-info-text-emphasis) !important;
        font-weight: bold; /* Opcional */
    }

.badge.text-bg-info, .badge.bg-info { /* Añadido .badge.bg-t */
    color: var(--btn-info-text) !important; /* Reusa color de botón (override) */
    background-color: var(--bs-info) !important; /* Usa color base */
}

.text-info {
    color: var(--text-utility-info-override) !important; /* Usa el override de texto */
}

.btn-light {
    color: var(--btn-light-text) !important; /* Usa el override/calculado de Root */

    background-color: var(--bs-btn-light-bg) !important;
    border-color: var(--bs-btn-light-border-color) !important;
}

    .btn-light:hover {
        color: var(--btn-light-text) !important;
        background-color: var(--bs-btn-light-hover-bg) !important;
        border-color: var(--bs-btn-light-hover-border-color) !important;
    }

    .btn-light:focus, .btn-light.focus {
        color: var(--btn-light-text) !important;
        background-color: var(--bs-btn-light-hover-bg) !important;
        border-color: var(--bs-btn-light-hover-border-color) !important;
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-light:active, .btn-light.active {
        color: var(--btn-light-text) !important;
        background-color: var(--bs-btn-light-active-bg) !important;
        border-color: var(--bs-btn-light-active-border-color) !important;
    }

    .btn-light:disabled, .btn-light.disabled {
        color: var(--btn-light-text) !important;
        background-color: var(--bs-btn-light-disabled-bg) !important;
        border-color: var(--bs-btn-light-disabled-border-color) !important;
    }

.btn-outline-light {
    /* Usa el override si está definido, si no, usa el color base de BS */
    color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
}

    .btn-outline-light:hover {
        color: var(--btn-light-text) !important; /* El texto en hover es el del botón sólido */
        background-color: var(--bs-light) !important; /* Color base */
        border-color: var(--bs-light) !important;
    }

    .btn-outline-light:focus, .btn-outline-light.focus {
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-outline-light:active, .btn-outline-light.active {
        color: var(--btn-light-text) !important;
        background-color: var(--bs-light) !important;
        border-color: var(--bs-light) !important;
    }

    .btn-outline-light:disabled, .btn-outline-light.disabled {
        /* Usa el color de texto normal o el override de outline si está definido */
        color: var(--bs-light) !important;
        background-color: transparent !important;
    }

.alert-light {
    color: var(--bs-light-text-emphasis) !important;
    background-color: var(--bs-light-bg-subtle) !important;
    border-color: var(--bs-light-border-subtle) !important;
}

    .alert-light .alert-link {
        color: var(--bs-light-text-emphasis) !important;
        font-weight: bold; /* Opcional */
    }

.badge.text-bg-light, .badge.bg-light { /* Añadido .badge.bg-t */
    color: var(--btn-light-text) !important; /* Reusa color de botón (override) */
    background-color: var(--bs-light) !important; /* Usa color base */
}

.text-light {
    color: var(--text-utility-light-override) !important; /* Usa el override de texto */
}

.btn-dark {
    color: var(--btn-dark-text) !important; /* Usa el override/calculado de Root */

    background-color: var(--bs-btn-dark-bg) !important;
    border-color: var(--bs-btn-dark-border-color) !important;
}

    .btn-dark:hover {
        color: var(--btn-dark-text) !important;
        background-color: var(--bs-btn-dark-hover-bg) !important;
        border-color: var(--bs-btn-dark-hover-border-color) !important;
    }

    .btn-dark:focus, .btn-dark.focus {
        color: var(--btn-dark-text) !important;
        background-color: var(--bs-btn-dark-hover-bg) !important;
        border-color: var(--bs-btn-dark-hover-border-color) !important;
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-dark:active, .btn-dark.active {
        color: var(--btn-dark-text) !important;
        background-color: var(--bs-btn-dark-active-bg) !important;
        border-color: var(--bs-btn-dark-active-border-color) !important;
    }

    .btn-dark:disabled, .btn-dark.disabled {
        color: var(--btn-dark-text) !important;
        background-color: var(--bs-btn-dark-disabled-bg) !important;
        border-color: var(--bs-btn-dark-disabled-border-color) !important;
    }

.btn-outline-dark {
    /* Usa el override si está definido, si no, usa el color base de BS */
    color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

    .btn-outline-dark:hover {
        color: var(--btn-dark-text) !important; /* El texto en hover es el del botón sólido */
        background-color: var(--bs-dark) !important; /* Color base */
        border-color: var(--bs-dark) !important;
    }

    .btn-outline-dark:focus, .btn-outline-dark.focus {
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-outline-dark:active, .btn-outline-dark.active {
        color: var(--btn-dark-text) !important;
        background-color: var(--bs-dark) !important;
        border-color: var(--bs-dark) !important;
    }

    .btn-outline-dark:disabled, .btn-outline-dark.disabled {
        /* Usa el color de texto normal o el override de outline si está definido */
        color: var(--bs-dark) !important;
        background-color: transparent !important;
    }

.alert-dark {
    color: var(--bs-dark-text-emphasis) !important;
    background-color: var(--bs-dark-bg-subtle) !important;
    border-color: var(--bs-dark-border-subtle) !important;
}

    .alert-dark .alert-link {
        color: var(--bs-dark-text-emphasis) !important;
        font-weight: bold; /* Opcional */
    }

.badge.text-bg-dark, .badge.bg-dark { /* Añadido .badge.bg-t */
    color: var(--btn-dark-text) !important; /* Reusa color de botón (override) */
    background-color: var(--bs-dark) !important; /* Usa color base */
}

.text-dark {
    color: var(--text-utility-dark-override) !important; /* Usa el override de texto */
}

.btn-mute {
    color: var(--btn-mute-text) !important; /* Usa el override/calculado de Root */

    background-color: transparent !important;
    border-color: transparent !important;
}

    .btn-mute:hover {
        color: var(--btn-mute-text) !important;
        background-color: var(--bs-gray-200) !important; /* Usar un gris claro para hover de mute */
        border-color: transparent !important;
    }

    .btn-mute:focus, .btn-mute.focus {
        color: var(--btn-mute-text) !important;
        background-color: var(--bs-gray-200) !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .btn-mute:active, .btn-mute.active {
        color: var(--btn-mute-text) !important;
        background-color: var(--bs-gray-300) !important;
        border-color: transparent !important;
    }

    .btn-mute:disabled, .btn-mute.disabled {
        color: var(--btn-mute-text) !important;
        background-color: transparent !important;
        border-color: transparent !important;
    }

.btn-outline-mute {
    /* Usa el override si está definido, si no, usa el color base de BS */
    color: var(--bs-mute) !important;
    border-color: var(--bs-mute) !important;
}

    .btn-outline-mute:hover {
        color: var(--btn-mute-text) !important; /* El texto en hover es el del botón sólido */
        background-color: var(--bs-mute) !important; /* Color base */
        border-color: var(--bs-mute) !important;
    }

    .btn-outline-mute:focus, .btn-outline-mute.focus {
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    }

    .btn-outline-mute:active, .btn-outline-mute.active {
        color: var(--btn-mute-text) !important;
        background-color: var(--bs-mute) !important;
        border-color: var(--bs-mute) !important;
    }

    .btn-outline-mute:disabled, .btn-outline-mute.disabled {
        /* Usa el color de texto normal o el override de outline si está definido */
        color: var(--bs-mute) !important;
        background-color: transparent !important;
    }

.text-muted {
    color: var(--text-utility-mute-override) !important; /* Usa el override de mute */
}