:root {
    /* --- Dimensiones Globales --- */
    --header-height: 4rem; /* 64px - Altura fija para la barra de navegación */

    /* --- Colores de Logo --- */
    --morado-logotipo: #422c72;
    --celeste-logotipo: #6c9bca;
    --verde-logotipo: #3da83e;
    --lima-logotipo: #d1d832;
    --naranja-logotipo: #e09e53;
    --turquesa-logotipo: #71D3BB;
    --marron-logotipo: #b29175;

    /* --- Colores de Texto --- */
    --texto-claro: #ffffff;
    --texto-oscuro: #333333;
    --texto-ejemplo: #bdbdbd;

    /* --- Colores de fondo --- */
    --color-fondo-primario: #ffffff;
    --color-fondo-secundario: #f4f4e4;
    /* Para el fondo del cuerpo de la página */
    --borde-fondo-secundario: #dbd9c2;
    /* Para el borde de tabla y otros elementos */

    /* --- Foco Global --- */
    --global-focus-color: var(--celeste-logotipo);
    /* Color de foco por defecto */
    --global-focus-color-rgb: 108, 155, 202;
    /* RGB celeste por defecto */

    /* --- Tema Global de Tabla --- */
    --global-table-header-bg: var(--celeste-logotipo);
    /* Encabezado de tabla por defecto */
    --global-table-header-border-right: #668ec3;
    /* Celeste más oscuro por defecto */
    --global-table-stripe-rgb: 108, 155, 202;
    /* Celeste por defecto para franjas (muy claro) */
    --global-table-hover-rgb: 108, 155, 202;
    /* Celeste por defecto para hover (claro) */

    /* --- Colores de Paginación Base (Admin y Público si aplica) --- */
    --pagination-link-color: var(--celeste-logotipo);
    --pagination-link-hover-bg: #7a84b4;
    --pagination-link-hover-color: var(--texto-claro);
    --pagination-active-bg: #a2ccf6;
    --pagination-active-color: var(--texto-claro);
    --pagination-disabled-bg: #cdcdc8;
    --pagination-disabled-color: #adb5bd;
    --pagination-bar-height: 60px;
    /* Altura por defecto para contenedores de paginación */

    /* --- SweetAlert2 --- */
    --swal2-confirm-button-bg: var(--morado-logotipo);
    --swal2-confirm-button-hover-bg: #35235a;
    --swal2-confirm-button-active-bg: #2a1c47;
    --swal2-cancel-button-bg: #6c757d;
    --swal2-cancel-button-hover-bg: #5a6268;
    --swal2-cancel-button-active-bg: #545b62;
    --swal2-popup-bg: var(--color-fondo-primario);
    --swal2-title-color: var(--texto-oscuro);
    --swal2-html-container-color: var(--texto-oscuro);
    --swal2-icon-color-warning: var(--naranja-logotipo);
    --swal2-icon-color-error: #dc3545;
    --swal2-icon-color-success: var(--verde-logotipo);
    --swal2-icon-color-info: var(--celeste-logotipo);
    --swal2-icon-color-question: var(--celeste-logotipo);

    /* --- Material 3 Notification Colors (Added) --- */
    --m3-sys-color-surface: #FFF;
    --m3-sys-color-surface-container: #F3F3F3;
    --m3-sys-color-on-surface: #1D1B20;
    --m3-sys-color-outline-variant: #CAC4D0;
    
    --notif-color-danger-bg: #FFF8F7;
    --notif-color-danger-text: #C00018;
    --notif-color-danger-token: #B3261E;
    
    --notif-color-warning-bg: #FFFBEE;
    --notif-color-warning-text: #6A5500;
    --notif-color-warning-token: #E09E53;
    
    --notif-color-success-bg: #F0FDF4;
    --notif-color-success-text: #146c2e;
    --notif-color-success-token: #3da83e;
    
    --notif-color-info-bg: #F5FAFE;
    --notif-color-info-text: #004D78;
    --notif-color-info-token: #6c9bca;
}

/* --- Clases Generales y Fuentes --- */
body {
    background-color: var(--color-fondo-secundario);
    color: var(--texto-oscuro);
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding-bottom: calc(var(--pagination-bar-height, 60px) + 2rem);
    padding-top: var(--header-height); /* Usar la variable de altura del header */
}

/* Prevent text selection on material icons globally */
.material-symbols-outlined {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Asegurar que el navbar ocupe exactamente la altura definida */
.navbar {
    min-height: var(--header-height);
    /* Asegurar que el contenido esté centrado verticalmente si la altura aumenta */
    display: flex;
    align-items: center; 
}

.navbar-bg {
    background-color: var(--morado-logotipo);
}

.noto-sans-jp-light {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.noto-sans-jp-normal {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.noto-sans-jp-bold {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

/* --- Estilos de Alerta Global --- */
.global-alert {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 2px solid var(--borde-fondo-secundario);
    border-left-width: 8px;
    /* Borde lateral grueso y coloreado */
    border-radius: 0.75rem;
    /* Radio más suave */
    background-color: var(--color-fondo-primario) !important;
    color: var(--texto-oscuro);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.04);
}

.global-alert .global-alert-icon {
    font-size: 2rem;
    /* Ícono más grande */
    line-height: 1;
    margin-right: 1rem;
    flex-shrink: 0;
}

.global-alert .global-alert-content {
    flex-grow: 1;
    font-weight: 500;
    padding-right: 1rem;
    /* Espacio antes del botón de cerrar */
}

.global-alert .btn-close {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    opacity: 0.6;
    transition: opacity .15s ease-in-out;
    position: static;
}

.global-alert .btn-close:hover {
    opacity: 1;
}

.global-alert.alert-warning {
    border-left-color: var(--naranja-logotipo);
}

.global-alert.alert-warning .global-alert-icon {
    color: var(--naranja-logotipo);
}

.global-alert.alert-success {
    border-left-color: var(--verde-logotipo);
}

.global-alert.alert-success .global-alert-icon {
    color: var(--verde-logotipo);
}

.global-alert.alert-danger {
    border-left-color: #dc3545;
    /* Rojo de peligro de Bootstrap */
}

.global-alert.alert-danger .global-alert-icon {
    color: #dc3545;
}

.global-alert.alert-info {
    border-left-color: var(--celeste-logotipo);
}

.global-alert.alert-info .global-alert-icon {
    color: var(--celeste-logotipo);
}


/* --- Estilos de Tabla Global --- */
.global-table-responsive {
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-fondo-primario);
}

.global-table-responsive .table {
    width: auto;
    min-width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.global-table-responsive .table>thead th {
    color: var(--texto-claro);
    border-top: none;
    border-bottom: none;
    border-left: none;
    vertical-align: middle;
    font-weight: 500;
    white-space: nowrap;
}

.global-table-responsive .table>thead th:first-child {
    border-top-left-radius: calc(1rem - 5px);
}

.global-table-responsive .table>thead th:last-child {
    border-right: none;
    border-top-right-radius: calc(1rem - 5px);
}

.global-table-responsive .table>tbody td {
    border-right: 2px solid var(--borde-fondo-secundario);
    border-left: none;
    vertical-align: middle;
    border-top: 1px solid var(--borde-fondo-secundario);
    color: var(--texto-oscuro);
}

.global-table-responsive .table>tbody tr:first-child td {
    border-top: none;
}

.global-table-responsive .table>tbody td:last-child {
    border-right: none;
}

.global-table-responsive .table>tbody>tr:nth-of-type(odd) {
    background-color: rgba(var(--global-table-stripe-rgb), 0.04);
}

.global-table-responsive .table>tbody>tr:hover {
    background-color: rgba(var(--global-table-hover-rgb), 0.1);
}

.global-table-responsive .table .badge {
    vertical-align: middle;
}

.global-table-responsive .table a {
    color: var(--morado-logotipo);
    text-decoration: none;
}

.global-table-responsive .table a:hover {
    text-decoration: underline;
}

/* Override generic table link styles for links styled as buttons */
.global-table-responsive .table a.btn-pill-action,
.global-table-responsive .table a.btn-pill-action:hover {
    color: inherit; /* Inherit color from the specific .btn-pill-* class */
    text-decoration: none; /* Ensure no underline on hover */
}

/* Encabezados de Tabla Temáticos */
.global-table-responsive .table>thead.global-table-header-celeste th {
    background-color: var(--celeste-logotipo);
    border-top-color: var(--celeste-logotipo);
    border-bottom-color: var(--celeste-logotipo);
}

.global-table-responsive .table>thead.global-table-header-celeste th:not(:last-child) {
    border-right: 2px solid #668ec3;
}

.global-table-responsive .table>thead.global-table-header-verde th {
    background-color: var(--verde-logotipo);
    border-top-color: var(--verde-logotipo);
    border-bottom-color: var(--verde-logotipo);
}

.global-table-responsive .table>thead.global-table-header-verde th:not(:last-child) {
    border-right: 2px solid #318632;
}

.global-table-responsive .table>thead.global-table-header-lima th {
    background-color: var(--lima-logotipo);
    color: var(--texto-oscuro) !important;
    border-top-color: var(--lima-logotipo);
    border-bottom-color: var(--lima-logotipo);
}

.global-table-responsive .table>thead.global-table-header-lima th:not(:last-child) {
    border-right: 2px solid #b7be2a;
}

.global-table-responsive .table>thead.global-table-header-naranja th {
    background-color: var(--naranja-logotipo);
    border-top-color: var(--naranja-logotipo);
    border-bottom-color: var(--naranja-logotipo);
}

.global-table-responsive .table>thead.global-table-header-naranja th:not(:last-child) {
    border-right: 2px solid #c88a44;
}

.global-table-responsive .table>thead.global-table-header-morado th {
    background-color: var(--morado-logotipo);
    border-top-color: var(--morado-logotipo);
    border-bottom-color: var(--morado-logotipo);
}

.global-table-responsive .table>thead.global-table-header-morado th:not(:last-child) {
    border-right: 2px solid #35235a;
}

.global-table-responsive .table>thead.global-table-header-marron th {
    background-color: var(--marron-logotipo);
    color: var(--texto-claro) !important;
    border-top-color: var(--marron-logotipo);
    border-bottom-color: var(--marron-logotipo);
}

.global-table-responsive .table>thead.global-table-header-marron th:not(:last-child) {
    border-right: 2px solid #7f6251;
}

.global-table-responsive .table>thead:not([class*="global-table-header-"]) th {
    background-color: var(--global-table-header-bg);
    border-top-color: var(--global-table-header-bg);
    border-bottom-color: var(--global-table-header-bg);
}

.global-table-responsive .table>thead:not([class*="global-table-header-"]) th:not(:last-child) {
    border-right: 2px solid var(--global-table-header-border-right);
}


/* --- Estilos de Grupo de Entrada de Búsqueda Global --- */
.global-search-input-group {
    display: flex;
    align-items: stretch;
    min-width: 250px;
}

.global-search-input-group .global-search-icon-span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    min-height: calc(1.5em + 0.75rem + 8px);
    border: 2px solid var(--borde-fondo-secundario);
    border-right-width: 0;
    border-top-left-radius: 50rem;
    border-bottom-left-radius: 50rem;
    background-color: var(--color-fondo-primario);
    color: var(--texto-oscuro);
    line-height: 1.5;
    transition: border-color .15s ease-in-out;
    z-index: 1;
}

.global-search-input-group .global-search-input {
    flex-grow: 1;
    border: 2px solid var(--borde-fondo-secundario);
    border-left-width: 0;
    border-top-right-radius: 50rem;
    border-bottom-right-radius: 50rem;
    background-color: var(--color-fondo-primario);
    color: var(--texto-oscuro);
    box-shadow: none;
    outline: 0;
    min-height: calc(1.5em + 0.75rem + 8px);
    padding: 0.375rem 1rem;
    line-height: 1.5;
    margin-left: -4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    z-index: 2;
    width: 1%;
}

.global-search-input-group:focus-within .global-search-icon-span,
.global-search-input-group:focus-within .global-search-input {
    border-color: var(--global-focus-color);
    z-index: 3;
}

.global-search-input-group:focus-within .global-search-input {
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
    z-index: 4;
}

.global-search-input-group .global-search-icon-span .material-symbols-outlined {
    font-size: 1.2em;
    vertical-align: middle;
}

/* --- Estilos de Selección de Filtro Global (Bootstrap Dropdown) --- */
.global-filter-dropdown {
    width: 100%;
}

.global-filter-dropdown .btn.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50rem;
    background-color: var(--color-fondo-primario);
    color: var(--texto-oscuro);
    box-shadow: none;
    outline: 0;
    padding: 0.375rem 1rem;
    min-height: calc(1.5em + 0.75rem + 8px);
    line-height: 1.5;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
    /* Evitar que el texto se ajuste */
    overflow: hidden;
    /* Ocultar desbordamiento */
    text-overflow: ellipsis;
    /* Añadir puntos suspensivos para texto largo */
}

.global-filter-dropdown .btn.dropdown-toggle:focus {
    border-color: var(--global-focus-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
}

/* [FIX] Prevent dropdown toggles from becoming transparent on hover */
.global-filter-dropdown .btn.dropdown-toggle:hover,
.global-modal .dropdown .btn.dropdown-toggle:hover,
.global-form-control.dropdown-toggle:hover {
    background-color: var(--color-fondo-secundario);
    border-color: var(--borde-fondo-secundario);
}

.global-filter-dropdown .dropdown-menu {
    min-width: 100%;
    /* Al menos tan ancho como el botón */
    width: auto;
    /* Expandir para ajustar el contenido */
    border-radius: 1rem;
    border: 2px solid var(--borde-fondo-secundario);
    background-color: var(--color-fondo-primario);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    overflow: hidden;
}

.global-filter-dropdown .dropdown-item {
    color: var(--texto-oscuro);
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

.global-filter-dropdown .dropdown-item:hover,
.global-filter-dropdown .dropdown-item:focus {
    background-color: rgba(var(--global-table-hover-rgb), 0.15);
    color: var(--texto-oscuro);
}

.global-filter-dropdown .dropdown-item.active,
.global-filter-dropdown .dropdown-item:active {
    background-color: var(--celeste-logotipo);
    color: var(--texto-claro);
}

/* --- [NUEVO] Grupo de Autocompletado Global --- */
.global-autocomplete-group {
    position: relative;
}

.global-autocomplete-group .dropdown-menu {
    display: none;
    /* Se mostrará con JS añadiendo 'show' */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 100%;
    width: auto;
    border-radius: 1rem;
    border: 2px solid var(--borde-fondo-secundario);
    background-color: var(--color-fondo-primario);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    margin-top: 0.25rem;
    max-height: 250px;
    /* Altura máxima para evitar menús demasiado largos */
    overflow-y: auto;
    /* Scroll si el contenido excede la altura máxima */
}

/* Mostrar el menú cuando tiene la clase 'show' */
.global-autocomplete-group .dropdown-menu.show {
    display: block;
}

.global-autocomplete-group .dropdown-item {
    color: var(--texto-oscuro);
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-autocomplete-group .dropdown-item:hover,
.global-autocomplete-group .dropdown-item:focus {
    background-color: rgba(var(--global-table-hover-rgb), 0.15);
    color: var(--texto-oscuro);
}

.global-autocomplete-group .dropdown-item.active,
.global-autocomplete-group .dropdown-item:active {
    background-color: var(--celeste-logotipo);
    color: var(--texto-claro);
}

.global-autocomplete-group .dropdown-item strong {
    color: var(--morado-logotipo);
}

.global-autocomplete-group .no-results {
    color: var(--texto-oscuro);
    opacity: 0.7;
    padding: 0.5rem 1rem;
    cursor: default;
}

/* --- [NUEVO] Autocomplete con botón de limpiar --- */
.autocomplete-wrapper {
    position: relative;
}

.autocomplete-wrapper .form-control {
    /* Añadir padding a la derecha para hacer espacio para el ícono */
    padding-right: 2.5rem;
}

.autocomplete-wrapper .autocomplete-clear-icon {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    /* Color secundario de Bootstrap */
    display: none;
    /* Oculto por defecto */
    z-index: 5;
    line-height: 1;
    /* Para alinear verticalmente el ícono */
}

.autocomplete-wrapper .autocomplete-clear-icon:hover {
    color: #343a40;
    /* Más oscuro en hover */
}

/* Cuando el campo está bloqueado */
.autocomplete-wrapper.locked .form-control {
    background-color: #e9ecef;
    /* Color de fondo de solo lectura de Bootstrap */
    cursor: default;
}

/* --- Control de Formulario de Filtro Global (p.ej., para entradas de fecha en barras de filtro) --- */
.global-filter-form-control {
    display: inline-block;
    width: 100%;
    min-width: 180px;
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50rem;
    background-color: var(--color-fondo-primario);
    color: var(--texto-oscuro);
    box-shadow: none;
    outline: 0;
    padding: 0.375rem 1rem;
    min-height: calc(1.5em + 0.75rem + 8px);
    line-height: 1.5;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    vertical-align: middle;
}

.global-filter-form-control:focus {
    border-color: var(--global-focus-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
}

/* ---[NUEVO] Grupo de Píldoras de Filtro para Interruptores y Selecciones --- */
.global-filter-pill-group {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50rem;
    overflow: hidden;
    background-color: var(--color-fondo-primario);
    height: calc(1.5em + 0.75rem + 8px);
    /* Coincidir con otros controles de filtro */
}

.global-filter-pill-group .form-check.form-switch {
    display: flex;
    align-items: center;
    padding: 0.375rem 1rem;
    margin: 0;
    white-space: nowrap;
}

.global-filter-pill-group .form-check-input {
    margin-top: 0;
    /* Alinear verticalmente */
}

.global-filter-pill-group .form-select {
    border: none;
    border-left: 1px solid var(--borde-fondo-secundario);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.5;
    /* Añadir relleno para texto y flecha */
    padding-left: 1rem;
    padding-right: 2.5rem;
    /* Espacio para la flecha desplegable */
    background-position: right 0.75rem center;
}

.global-filter-pill-group .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
    z-index: 1;
}

/* --- Botones de Acción Globales tipo Píldora --- */
.btn-pill-action {
    border-radius: 50rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    min-height: calc(1.5em + 0.75rem + 8px);
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-pill-slim {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    min-height: auto;
    /* Sobrescribir el min-height de btn-pill-action */
    line-height: 1.4;
    /* Altura de línea ligeramente más pequeña */
}

.btn-pill-action:hover {
    filter: brightness(90%);
}

.btn-pill-action:active {
    filter: brightness(80%);
}

.btn-pill-action .material-symbols-outlined {
    margin-right: 0.35rem;
    font-size: 1.2em;
    line-height: 1;
}

.btn-pill-action.no-text .material-symbols-outlined {
    margin-right: 0.35rem; /* Ensure consistent spacing even without text class logic */
}
/* Note: The 'no-text' class logic was previously 'margin-right: 0' but seemed risky if misused. 
   Keeping the original provided logic for 'btn-pill-action.no-text' below */
.btn-pill-action.no-text .material-symbols-outlined {
    margin-right: 0;
}

.btn-pill-lima {
    background-color: var(--lima-logotipo);
    border-color: var(--lima-logotipo);
    color: var(--texto-oscuro);
}

.btn-pill-lima:hover {
    color: var(--texto-oscuro);
    background-color: #b7be2a;
    border-color: #b7be2a;
}

.btn-pill-lima:focus {
    box-shadow: 0 0 0 0.25rem rgba(209, 216, 50, 0.5);
    background-color: #a2a925;
    border-color: #a2a925;
}

.btn-pill-lima:active {
    background-color: #a2a925 !important;
    border-color: #a2a925 !important;
}

.btn-pill-morado {
    background-color: var(--morado-logotipo);
    border-color: var(--morado-logotipo);
    color: var(--texto-claro);
}

.btn-pill-morado:hover {
    background-color: #35235a;
    border-color: #35235a;
}

.btn-pill-morado:focus {
    box-shadow: 0 0 0 0.25rem rgba(66, 44, 114, 0.5);
    background-color: #2a1c47;
    border-color: #2a1c47;
}

.btn-pill-morado:active {
    background-color: #2a1c47 !important;
    border-color: #2a1c47 !important;
}

.btn-pill-celeste {
    background-color: var(--celeste-logotipo);
    border-color: var(--celeste-logotipo);
    color: var(--texto-claro);
}

.btn-pill-celeste:hover {
    background-color: #5a8ab8;
    border-color: #5a8ab8;
}

.btn-pill-celeste:focus {
    box-shadow: 0 0 0 0.25rem rgba(108, 155, 202, 0.5);
    background-color: #4e78a0;
    border-color: #4e78a0;
}

.btn-pill-celeste:active {
    background-color: #4e78a0 !important;
    border-color: #4e78a0 !important;
}

.btn-pill-verde {
    background-color: var(--verde-logotipo);
    border-color: var(--verde-logotipo);
    color: var(--texto-claro);
}

.btn-pill-verde:hover {
    background-color: #318632;
    border-color: #318632;
}

.btn-pill-verde:focus {
    box-shadow: 0 0 0 0.25rem rgba(61, 168, 62, 0.5);
    background-color: #29702a;
    border-color: #29702a;
}

.btn-pill-verde:active {
    background-color: #29702a !important;
    border-color: #29702a !important;
}

.btn-pill-naranja {
    background-color: var(--naranja-logotipo);
    border-color: var(--naranja-logotipo);
    color: var(--texto-claro);
}

.btn-pill-naranja:hover {
    background-color: #c88a44;
    border-color: #c88a44;
}

.btn-pill-naranja:focus {
    box-shadow: 0 0 0 0.25rem rgba(224, 158, 83, 0.5);
    background-color: #b07636;
    border-color: #b07636;
}

.btn-pill-naranja:active {
    background-color: #b07636 !important;
    border-color: #b07636 !important;
}

.btn-pill-marron {
    background-color: var(--marron-logotipo);
    border-color: var(--marron-logotipo);
    color: var(--texto-claro);
}

.btn-pill-marron:hover {
    color: var(--texto-claro);
    background-color: #7f6251;
    border-color: #7f6251;
}

.btn-pill-marron:focus {
    color: var(--texto-claro);
    box-shadow: 0 0 0 0.25rem rgba(178, 145, 117, 0.5);
    background-color: #7f6251;
    border-color: #7f6251;
}

.btn-pill-marron:active {
    background-color: #7f6251 !important;
    border-color: #7f6251 !important;
}

.btn-pill-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: var(--texto-claro);
}

.btn-pill-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-pill-secondary:focus {
    box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
    background-color: #545b62;
    border-color: #4e555b;
}

.btn-pill-secondary:active {
    background-color: #4e555b !important;
    border-color: #484e53 !important;
}

.btn-pill-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: var(--texto-claro);
}

.btn-pill-danger:hover {
    color: var(--texto-claro);
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-pill-danger:focus {
    color: var(--texto-claro);
    box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
    background-color: #bd2130;
    border-color: #b21f2d;
}

.btn-pill-danger:active {
    background-color: #b21f2d !important;
    border-color: #a61d2b !important;
}

/* --- [NUEVO] Píldora de Conmutación Global para Grupos de Botones --- */
.global-toggle-pill {
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50rem;
    overflow: hidden;
    display: inline-flex;
    background-color: var(--color-fondo-primario);
    padding: 0;
}

.global-toggle-pill .btn {
    border-width: 0;
    border-radius: 0;
    font-weight: 500;
    background-color: transparent;
    padding: 0.375rem 1rem;
    line-height: 1.5;
    transition: all .2s ease-in-out;
    flex-grow: 1;
}

/* Sobrescribir el hover/focus por defecto de Bootstrap en botones outline dentro de la píldora */
.global-toggle-pill .btn.btn-outline-primary,
.global-toggle-pill .btn.btn-outline-danger {
    color: var(--texto-oscuro);
}

.global-toggle-pill .btn.btn-outline-primary:hover:not(.active) {
    background-color: rgba(108, 155, 202, 0.1);
    /* celeste claro */
    color: var(--texto-oscuro);
}

.global-toggle-pill .btn.btn-outline-danger:hover:not(.active) {
    background-color: rgba(224, 158, 83, 0.1);
    /* naranja claro */
    color: var(--texto-oscuro);
}

/* Sobrescribir sombra de foco */
.global-toggle-pill .btn:focus {
    box-shadow: none;
}

.global-toggle-pill .btn-check:focus-visible+.btn {
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
    z-index: 1;
}

/* Sobrescribir colores de estado activo */
.global-toggle-pill .btn-check:checked+.btn.btn-outline-primary {
    background-color: var(--celeste-logotipo);
    color: var(--texto-claro);
}

.global-toggle-pill .btn-check:checked+.btn.btn-outline-danger {
    background-color: var(--naranja-logotipo);
    color: var(--texto-claro);
}

/* --- Modal Global: Estructura de Formulario Común --- */
.global-modal .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.global-modal .modal-content {
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 1rem;
    /* overflow: hidden; */
    /* Esta propiedad recorta los desplegables. Eliminada. */
}

.global-modal .modal-body {
    background-color: var(--color-fondo-secundario);
}

/* --- [NUEVO] Fix para el borde inferior redondeado cuando el footer está oculto --- */
.global-modal .modal-body.body-rounded-bottom {
    border-bottom-left-radius: calc(1rem - 5px);
    border-bottom-right-radius: calc(1rem - 5px);
}

.global-modal .form-control {
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50rem;
    background-color: var(--color-fondo-primario);
    color: var(--texto-oscuro);
    box-shadow: none;
    min-height: calc(1.5em + 0.75rem + 8px);
    padding: 0.375rem 1rem;
    line-height: 1.5;
    width: 100%;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.global-modal input[type="file"].form-control {
    line-height: 1.8;
    padding: 0.375rem 0.75rem !important;
}

.form-control[type="file"] {
    line-height: 1.8;
    padding: 0.375rem 0.75rem !important;
}


.global-modal .form-control:focus {
    border-color: var(--global-focus-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
    outline: 0;
}

.global-modal textarea.form-control {
    border-radius: 0.5rem;
}

/* --- Estilo de Grupo de Entrada para Modales --- */
.global-modal .input-group.global-modal-input-group {
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50rem;
    /* Forma de píldora para todo el grupo */
    overflow: hidden;
    /* Recortar hijos al border-radius del padre */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-color: var(--color-fondo-primario);
    min-height: calc(1.5em + 0.75rem + 8px);
    padding: 0;
}

/* --- [UPDATED] Style for readonly fields in modals (semi-transparent) --- */
.global-modal .form-control.readonly-field,
.global-modal .dropdown .btn.dropdown-toggle.readonly-field,
.global-modal .input-group.global-modal-input-group.readonly-field {
    opacity: 0.65;
    background-color: var(--color-fondo-primario); /* Use default background for transparency effect */
    cursor: not-allowed;
    pointer-events: none;
}

.global-modal .input-group.global-modal-input-group.readonly-field .form-control,
.global-modal .input-group.global-modal-input-group.readonly-field .input-group-text,
.global-modal .input-group.global-modal-input-group.readonly-field .btn:not(.edit-patient-details-btn) {
    background-color: transparent;
    /* Hereda el fondo del grupo */
    cursor: not-allowed;
}

/* [CORRECCIÓN] Evitar que el botón de editar paciente dentro de un grupo readonly sea afectado */
.global-modal .input-group.global-modal-input-group.readonly-field .edit-patient-details-btn {
    pointer-events: auto;
    cursor: pointer;
    opacity: 1; /* Restaura la opacidad completa */
}


.global-modal .input-group.global-modal-input-group.is-invalid {
    border-color: var(--bs-danger);
}

.global-modal .input-group.global-modal-input-group:focus-within {
    border-color: var(--global-focus-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
    z-index: 3;
}

.global-modal .global-modal-input-group .form-control,
.global-modal .global-modal-input-group .input-group-text,
.global-modal .global-modal-input-group .btn:not([class*="btn-pill-"]) {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--texto-oscuro);
    min-height: auto;
    height: 100%;
}

.global-modal .global-modal-input-group> :not(:last-child) {
    border-right: 1px solid var(--borde-fondo-secundario);
}

.global-modal .global-modal-input-group .input-group-text {
    display: flex;
    align-items: center;
}

.global-modal .global-modal-input-group .btn:not([class*="btn-pill-"]) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
}

.global-modal .global-modal-input-group input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    filter: invert(0.5);
    transition: opacity 0.2s;
}

.global-modal .global-modal-input-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}


.global-modal .modal-footer {
    /* Para compensar la eliminación de overflow:hidden en modal-content */
    border-bottom-left-radius: calc(1rem - 5px);
    border-bottom-right-radius: calc(1rem - 5px);
}

.global-modal .modal-footer .btn {
    border-radius: 50rem;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
}

.global-modal .checkbox-radio-container.form-control {
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    height: auto;
}

.global-modal .checkbox-radio-container .form-check {
    margin-bottom: 0.5rem;
    margin-left: 0;
}

.global-modal .checkbox-radio-container .form-check:last-child {
    margin-bottom: 0;
}

.global-modal .checkbox-radio-container.is-invalid {
    border-color: var(--bs-danger) !important;
}

/* --- Estilos de Formulario de Página Global --- */
.global-form-control {
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50rem;
    background-color: var(--color-fondo-primario);
    color: var(--texto-oscuro);
    box-shadow: none;
    min-height: calc(1.5em + 0.75rem + 8px);
    padding: 0.375rem 1rem;
    line-height: 1.5;
    width: 100%;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

.global-form-control:focus {
    border-color: var(--global-focus-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
    outline: 0;
}

/* Hacer que los textareas sean rectangulares */
textarea.global-form-control {
    border-radius: 0.5rem;
    min-height: 8rem;
    /* Una altura por defecto razonable */
}

/* --- [NUEVO] Desplegable como Control de Formulario en Páginas --- */
/* Esto estiliza los desplegables que usan un botón con .global-form-control */
.global-form-control.dropdown-toggle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* Estilizar el menú asociado con el botón de control de formulario */
.global-form-control.dropdown-toggle+.dropdown-menu {
    min-width: 100%;
    width: auto;
    border-radius: 1rem;
    border: 2px solid var(--borde-fondo-secundario);
    background-color: var(--color-fondo-primario);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    overflow: hidden;
}

/* Estilo para los elementos dentro del menú desplegable temático */
.global-form-control.dropdown-toggle+.dropdown-menu .dropdown-item {
    color: var(--texto-oscuro);
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

.global-form-control.dropdown-toggle+.dropdown-menu .dropdown-item:hover,
.global-form-control.dropdown-toggle+.dropdown-menu .dropdown-item:focus {
    background-color: rgba(var(--global-table-hover-rgb), 0.15);
    color: var(--texto-oscuro);
}

.global-form-control.dropdown-toggle+.dropdown-menu .dropdown-item.active,
.global-form-control.dropdown-toggle+.dropdown-menu .dropdown-item:active {
    background-color: var(--celeste-logotipo);
    color: var(--texto-claro);
}

/* Personalización de form-select de Bootstrap */
select.global-form-control {
    background-position: right 1rem center;
    /* Ajustar la posición de la flecha para el nuevo padding */
}

/* Foco en el interruptor de formulario */
.form-check-input:focus {
    border-color: var(--global-focus-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
}

/* Para estados de validación */
.global-form-control.is-invalid,
.was-validated .global-form-control:invalid {
    border-color: #dc3545;
    /* var(--bs-danger) de Bootstrap */
    background-image: none;
    /* Sobrescribir el icono de validación de bootstrap en los selects */
}

.global-form-control.is-invalid:focus,
.was-validated .global-form-control:invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* ---[NUEVO] Estilos Universales para Switches, Radios y Checkboxes --- */

/* Base para checkboxes y radios personalizados */
.form-check-input {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-fondo-primario);
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 2px solid var(--borde-fondo-secundario);
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
    cursor: pointer;
    vertical-align: middle;
}

.form-check-input:active {
    filter: brightness(95%);
}

.form-check-input:focus {
    border-color: var(--global-focus-color);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
}

/* Estilos para Checkbox */
.form-check-input[type="checkbox"] {
    border-radius: 0.35em;
}

.form-check-input[type="checkbox"]:checked {
    background-color: var(--celeste-logotipo);
    border-color: var(--celeste-logotipo);
    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='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* Estilos para Radio */
.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input[type="radio"]:checked {
    background-color: var(--celeste-logotipo);
    border-color: var(--celeste-logotipo);
    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='%23fff'/%3e%3c/svg%3e");
}

/* Estilos para Switch */
.form-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
}

.form-switch .form-check-input {
    width: 3em;
    height: 1.6em;
    margin-left: 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
    border: 2px solid var(--borde-fondo-secundario);
    /* Mantener consistencia */
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(108, 155, 202, 1)'/%3e%3c/svg%3e");
    /* Usar color de foco */
}

.form-switch .form-check-input:checked {
    background-position: right center;
    background-color: var(--verde-logotipo);
    border-color: var(--verde-logotipo);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Estilos para estado deshabilitado */
.form-check-input:disabled {
    pointer-events: none;
    filter: none;
    opacity: 0.6;
    background-color: var(--borde-fondo-secundario);
    border-color: var(--borde-fondo-secundario);
}

.form-check-label:disabled,
.form-check-label[disabled] {
    opacity: 0.6;
}

.form-switch .form-check-input:disabled {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,0.5)'/%3e%3c/svg%3e");
}


/* --- Desplegable en Modal como Control de Formulario --- */
.global-modal .dropdown .btn.dropdown-toggle {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Imitar estilos de form-control */
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50rem;
    background-color: var(--color-fondo-primario);
    color: var(--texto-oscuro);
    box-shadow: none;
    min-height: calc(1.5em + 0.75rem + 8px);
    padding: 0.375rem 1rem;
    line-height: 1.5;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-modal .dropdown .btn.dropdown-toggle:focus {
    border-color: var(--global-focus-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
    outline: 0;
}

/* Estilo para el botón de desplegable inválido */
.global-modal .dropdown .btn.dropdown-toggle.is-invalid {
    border-color: #dc3545;
    /* var(--bs-danger) de Bootstrap */
}

.global-modal .dropdown .btn.dropdown-toggle.is-invalid~.invalid-feedback {
    display: block;
}

.global-modal .dropdown .btn.dropdown-toggle.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.global-modal .dropdown .dropdown-menu {
    min-width: 100%;
    /* Al menos tan ancho como el botón */
    width: auto;
    /* Expandir para ajustar el contenido */
    border-radius: 1rem;
    border: 2px solid var(--borde-fondo-secundario);
    background-color: var(--color-fondo-primario);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    /* overflow: hidden; */
    /* Reemplazado para permitir el desplazamiento */
    max-height: 70vh;
    /* Añadido para asegurar que el desplegable quepa en la ventana */
    overflow-y: auto;
    /* Añadido para permitir el desplazamiento vertical para listas largas */
}

.global-modal .dropdown .dropdown-item {
    color: var(--texto-oscuro);
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

.global-modal .dropdown .dropdown-item:hover,
.global-modal .dropdown .dropdown-item:focus {
    background-color: rgba(var(--global-table-hover-rgb), 0.15);
    color: var(--texto-oscuro);
}

.global-modal .dropdown .dropdown-item.active,
.global-modal .dropdown .dropdown-item:active {
    background-color: var(--celeste-logotipo);
    color: var(--texto-claro);
}

/* --- Modal Global: Encabezados Temáticos --- */
.global-modal .modal-header {
    /* Para compensar la eliminación de overflow:hidden en modal-content */
    border-top-left-radius: calc(1rem - 2px);
    border-top-right-radius: calc(1rem - 2px);
}

.global-modal .modal-header.modal-header-lima {
    background-color: var(--lima-logotipo);
    color: var(--texto-oscuro);
    border-bottom: 2px solid #b7be2a;
    /* Lima más oscuro */
}

.global-modal .modal-header.modal-header-lima .modal-title {
    color: var(--texto-oscuro);
}

.global-modal .modal-header.modal-header-lima .btn-close {
    /* El btn-close oscuro por defecto está bien sobre el color lima claro */
}

.global-modal .modal-header.modal-header-celeste {
    background-color: var(--celeste-logotipo);
    color: var(--texto-claro);
    border-bottom: 2px solid #5a8ab8;
    /* Celeste más oscuro */
}

.global-modal .modal-header.modal-header-celeste .modal-title {
    color: var(--texto-claro);
}

.global-modal .modal-header.modal-header-celeste .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.global-modal .modal-header.modal-header-marron {
    background-color: var(--marron-logotipo);
    color: var(--texto-oscuro);
    border-bottom: 2px solid #896b57;
}

.global-modal .modal-header.modal-header-marron .modal-title {
    color: var(--texto-oscuro);
}

.global-modal .modal-header.modal-header-marron .btn-close {}

/* --- [NUEVO] Estilo de Tarjeta de Filtro Global --- */
.global-filter-card {
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 0.75rem;
    background-color: var(--color-fondo-primario);
    box-shadow: none;
}

/* --- Estilos de Encabezado de Tarjeta Temáticos --- */
.card-header.global-table-header-celeste {
    background-color: var(--celeste-logotipo);
}

.card-header.global-table-header-verde {
    background-color: var(--verde-logotipo);
}

.card-header.global-table-header-lima {
    background-color: var(--lima-logotipo);
}

.card-header.global-table-header-naranja {
    background-color: var(--naranja-logotipo);
}

.card-header.global-table-header-morado {
    background-color: var(--morado-logotipo);
}

.card-header.global-table-header-marron {
    background-color: var(--marron-logotipo);
}

/* --- Estilos de Paginación Global --- */
/* Contenedor para los elementos de paginación, si necesita ser una barra con estilo */
.global-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--pagination-bar-height);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Estilos para el elemento <ul> con la clase .pagination */
ul.pagination {
    display: inline-flex;
    /* Hace que la ul sea tan ancha como su contenido */
    padding-left: 0;
    list-style: none;
    border-radius: 50rem;
    /* Forma de píldora para todo el componente */
    overflow: hidden;
    /* Asegura que el border-radius recorte los elementos hijos */
    margin-bottom: 0;
    background-color: var(--color-fondo-primario);
    border: 2px solid var(--borde-fondo-secundario);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Sombra sutil */
}

/* Elementos de página individuales (<li>) */
ul.pagination .page-item {
    margin: 0;
}

/* Enlaces de página (etiquetas <a> dentro de <li>) */
ul.pagination .page-link {
    position: relative;
    display: flex;
    /* Para alineación de íconos si se usan */
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    margin-left: 0;
    color: var(--pagination-link-color);
    background-color: transparent;
    /* Los enlaces son transparentes por defecto */
    border: none;
    /* Sin bordes entre enlaces para una píldora continua */
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    min-width: 40px;
    /* Asegura un área mínima para hacer clic */
    height: 100%;
    /* Llena la altura del page-item */
    line-height: 1.5;
}

ul.pagination .page-link:focus {
    z-index: 3;
    /* Asegura que el enlace con foco esté arriba */
    color: var(--pagination-link-color);
    /* Mantiene el color del texto en foco */
    background-color: #e9ecef;
    /* Fondo de foco estándar de Bootstrap */
    outline: 0;
    box-shadow: none;
}

ul.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    z-index: 2;
    color: var(--pagination-link-hover-color);
    background-color: var(--pagination-link-hover-bg);
}

ul.pagination .page-item.active .page-link {
    z-index: 3;
    /* Enlace activo arriba */
    color: var(--pagination-active-color);
    background-color: var(--pagination-active-bg);
}

ul.pagination .page-item.disabled .page-link {
    color: var(--pagination-disabled-color);
    pointer-events: none;
    background-color: var(--pagination-disabled-bg);
}

/* Íconos dentro de los enlaces de página */
ul.pagination .page-link .material-symbols-outlined {
    font-size: 1.2rem;
    vertical-align: middle;
    line-height: 1;
    /* Previene espacio extra si el tamaño de fuente del ícono es diferente */
    color: inherit;
    /* El color del ícono coincide con el color del texto del enlace por defecto */
}

/* Ajustar relleno para botones previo/siguiente si solo contienen íconos */
ul.pagination .page-item:first-child .page-link,
ul.pagination .page-item:last-child .page-link {
    padding: 0.45rem 0.7rem;
    /* Relleno horizontal ligeramente menor si solo hay un ícono */
}

/* --- Migas de Pan Globales --- */
.global-breadcrumb {}

.global-breadcrumb .breadcrumb {
    margin-bottom: 0;
    padding: 0.2rem 1rem;
    font-size: 1.2rem;
}

.global-breadcrumb .breadcrumb-item a {
    color: var(--celeste-logotipo);
    text-decoration: none;
    font-weight: 500;
}

.global-breadcrumb .breadcrumb-item a:hover {
    color: var(--morado-logotipo);
    text-decoration: underline;
}

.global-breadcrumb .breadcrumb-item.active {
    color: var(--texto-oscuro);
    font-weight: 400;
}

.global-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: var(--texto-oscuro);
    opacity: 0.6;
}

/* --- [REFACTORIZADO] Estilos de Acordeón Globales --- */
.global-accordion {
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 0.75rem;
    overflow: hidden;
    /* Recorta los hijos al border-radius */
}

.global-accordion .accordion-item {
    background-color: var(--color-fondo-primario);
    border: none;
}

.global-accordion .accordion-item+.accordion-item {
    border-top: 1px solid var(--borde-fondo-secundario);
}

/* Estilos base del botón del encabezado */
.global-accordion .accordion-button {
    background-color: var(--color-fondo-primario);
    color: var(--texto-oscuro);
    font-weight: 500;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    transition: background-color .15s ease-in-out,
        color .15s ease-in-out;
    box-shadow: none;
    /* Eliminar la sombra por defecto de Bootstrap */
}

/* Estado por defecto para el foco (puede ser sobrescrito por variantes) */
.global-accordion .accordion-button:focus {
    z-index: 3;
    border-color: transparent;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
}

/* Estilo del icono de flecha por defecto (oscuro) */
.global-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform .2s ease-in-out,
        background-image .15s ease-in-out;
    background-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.global-accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.global-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

/* Cuerpo de los elementos del acordeón */
.global-accordion .accordion-body {
    padding: 0.75rem;
    background-color: var(--color-fondo-primario);
    font-size: 0.85rem;
    max-height: 300px;
    overflow-y: auto;
}

.global-accordion .accordion-body ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

/* --- Variantes de Color del Acordeón --- */

/* Propiedades comunes para variantes con texto claro en estado activo */
.global-accordion.accordion-verde .accordion-button:not(.collapsed),
.global-accordion.accordion-celeste .accordion-button:not(.collapsed),
.global-accordion.accordion-morado .accordion-button:not(.collapsed),
.global-accordion.accordion-naranja .accordion-button:not(.collapsed),
.global-accordion.accordion-marron .accordion-button:not(.collapsed) {
    color: var(--texto-claro);
}

.global-accordion.accordion-verde .accordion-button:not(.collapsed)::after,
.global-accordion.accordion-celeste .accordion-button:not(.collapsed)::after,
.global-accordion.accordion-morado .accordion-button:not(.collapsed)::after,
.global-accordion.accordion-naranja .accordion-button:not(.collapsed)::after,
.global-accordion.accordion-marron .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Verde (Adquisiciones) */
.global-accordion.accordion-verde .accordion-button:not(.collapsed) {
    background-color: var(--verde-logotipo);
}

.global-accordion.accordion-verde .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(61, 168, 62, 0.25);
}

/* Celeste */
.global-accordion.accordion-celeste .accordion-button:not(.collapsed) {
    background-color: var(--celeste-logotipo);
}

.global-accordion.accordion-celeste .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 155, 202, 0.25);
}

/* Morado */
.global-accordion.accordion-morado .accordion-button:not(.collapsed) {
    background-color: var(--morado-logotipo);
}

.global-accordion.accordion-morado .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(66, 44, 114, 0.4);
}

/* Naranja */
.global-accordion.accordion-naranja .accordion-button:not(.collapsed) {
    background-color: var(--naranja-logotipo);
}

.global-accordion.accordion-naranja .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(224, 158, 83, 0.4);
}

/* Lima */
.global-accordion.accordion-lima .accordion-button:not(.collapsed) {
    background-color: var(--lima-logotipo);
    color: var(--texto-oscuro);
}

.global-accordion.accordion-lima .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(209, 216, 50, 0.4);
}

/* Marrón */
.global-accordion.accordion-marron .accordion-button:not(.collapsed) {
    background-color: var(--marron-logotipo);
}

.global-accordion.accordion-marron .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(178, 145, 117, 0.4);
}

/* --- Estilo Global de SweetAlert2 --- */
.swal2-popup {
    background-color: var(--swal2-popup-bg) !important;
    border-radius: 1rem !important;
    border: 2px solid var(--borde-fondo-secundario) !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
    font-family: "Noto Sans JP", sans-serif !important;
}

.swal2-title {
    color: var(--swal2-title-color) !important;
    font-weight: 500 !important;
}

.swal2-html-container {
    color: var(--swal2-html-container-color) !important;
    font-size: 0.95rem !important;
}

.swal2-confirm,
.swal2-deny,
.swal2-cancel {
    border-radius: 50rem !important;
    font-weight: 500 !important;
    padding: 0.6rem 1.5rem !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    line-height: 1.5 !important;
    border: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.swal2-confirm:hover,
.swal2-deny:hover,
.swal2-cancel:hover {
    transform: translateY(-2px);
}

.swal2-confirm {
    background-color: var(--swal2-confirm-button-bg) !important;
    color: var(--texto-claro) !important;
}

.swal2-confirm:hover {
    background-color: var(--swal2-confirm-button-hover-bg) !important;
}

.swal2-confirm:active,
.swal2-confirm:focus {
    background-color: var(--swal2-confirm-button-active-bg) !important;
    box-shadow: 0 0 0 0.25rem rgba(66, 44, 114, 0.4) !important;
}

.swal2-cancel {
    background-color: var(--swal2-cancel-button-bg) !important;
    color: var(--texto-claro) !important;
}

.swal2-cancel:hover {
    background-color: var(--swal2-cancel-button-hover-bg) !important;
}

.swal2-cancel:active,
.swal2-cancel:focus {
    background-color: var(--swal2-cancel-button-active-bg) !important;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.4) !important;
}

.swal2-icon.swal2-warning {
    color: var(--swal2-icon-color-warning) !important;
    border-color: var(--swal2-icon-color-warning) !important;
}

.swal2-icon.swal2-error {
    color: var(--swal2-icon-color-error) !important;
    border-color: var(--swal2-icon-color-error) !important;
}

.swal2-icon.swal2-success {
    color: var(--swal2-icon-color-success) !important;
    border-color: var(--swal2-icon-color-success) !important;
}

.swal2-icon.swal2-info {
    color: var(--swal2-icon-color-info) !important;
    border-color: var(--swal2-icon-color-info) !important;
}

.swal2-icon.swal2-question {
    color: var(--swal2-icon-color-question) !important;
    border-color: var(--swal2-icon-color-question) !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--swal2-icon-color-success) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--swal2-icon-color-success) !important;
}

/* --- [NUEVO] SweetAlert2 Customizations --- */
/* Wider popup to accommodate accordions */
.swal2-popup.swal2-popup-wide {
    width: 600px;
}

/* Accordion styles inside swal */
.swal2-html-container .accordion .accordion-item {
    border: 1px solid var(--borde-fondo-secundario);
    background-color: var(--color-fondo-primario);
}
.swal2-html-container .accordion .accordion-button {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}
.swal2-html-container .accordion .accordion-body {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    text-align: left;
}
.swal2-html-container .accordion .accordion-body ul {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

/* --- SweetAlert2 Input Styling to match global-form-control --- */
.swal2-input, .swal2-textarea, .swal2-select {
    border: 2px solid var(--borde-fondo-secundario) !important;
    border-radius: 0.75rem !important;
    background-color: var(--color-fondo-primario) !important;
    color: var(--texto-oscuro) !important;
    box-shadow: none !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
    border-color: var(--global-focus-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25) !important;
    outline: 0 !important;
}


/* Insignias de Estado Globales */
.badge.bg-estado-activo {
    background-color: var(--bs-success) !important;
    color: white !important;
}

.badge.bg-estado-inactivo {
    background-color: var(--bs-danger) !important;
    color: white !important;
}

.badge.bg-estado-mantenimiento {
    background-color: var(--bs-warning) !important;
    color: var(--texto-oscuro) !important;
}

.badge.bg-estado-pendiente {
    background-color: var(--bs-warning) !important;
    color: var(--texto-oscuro) !important;
}

.badge.bg-estado-desconocido {
    background-color: var(--bs-secondary) !important;
    color: white !important;
}

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

/* --- [NUEVO] Estilos Globales para Mapas (Leaflet) --- */
.survey-map {
    height: 350px;
    border-radius: .5rem;
    border: 2px solid var(--borde-fondo-secundario);
    position: relative;
    /* Ensure map container has a position context */
}

.survey-map-attributions {
    text-align: right;
    font-size: 0.8rem;
    color: var(--texto-oscuro);
    padding: 0.5rem 0.25rem;
}

.survey-map-attributions a {
    color: var(--celeste-logotipo);
    text-decoration: none;
}

.survey-map-attributions a:hover {
    text-decoration: underline;
}

.survey-map .leaflet-container {
    background-color: var(--borde-fondo-secundario) !important;
    border-radius: calc(.5rem - 2px);
    /* Match parent's border-radius */
}

.survey-map .leaflet-bar {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.survey-map .leaflet-bar a,
.survey-map .leaflet-bar a:hover {
    width: 56px !important;
    height: 56px !important;
    line-height: 56px !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--color-fondo-primario) !important;
    color: var(--celeste-logotipo) !important;
    border: none !important;
    outline: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-tap-highlight-color: transparent;
}

.survey-map .leaflet-bar a:hover {
    background-color: #e8e8d8 !important;
}

.survey-map .leaflet-bar a {
    border-radius: 8px !important;
}

.survey-map .leaflet-control-zoom-in {
    margin-bottom: 8px !important;
}

.survey-map .leaflet-control-zoom-in:active {
    border-radius: 28px 28px 8px 8px !important;
}

.survey-map .leaflet-control-zoom-out:active {
    border-radius: 8px 8px 28px 28px !important;
}

.survey-map .leaflet-bar a+a {
    border-top: none !important;
}

.leaflet-div-icon {
    background: none;
    border: none;
}

.custom-leaflet-marker {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.custom-leaflet-marker .place-icon {
    font-size: 48px;
    /* A more vibrant, saturated blue for the default user marker */
    color: #007BFF;
    font-variation-settings: 'FILL' 1,
        'wght' 400;
    position: relative;
    z-index: 1;
    transition: color 0.2s ease-in-out;
}

.custom-leaflet-marker .circle-icon {
    font-size: 14px;
    color: #ffffff;
    font-variation-settings: 'FILL' 1;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.custom-leaflet-marker.saved-location .place-icon {
    /* A more saturated and vibrant green for saved locations */
    color: #28a745;
}

.custom-leaflet-marker.reference-point .place-icon {
    /* Changed from orange to a strong, contrasting red */
    color: #DC3545;
}

/* --- [NUEVO] Multi-select Pill Input --- */
.multi-select-pill-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 0.5rem;
    background-color: var(--color-fondo-primario);
    cursor: text;
    /* Change cursor to indicate it's an input area */
}

.multi-select-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--celeste-logotipo);
    color: var(--texto-claro);
    border-radius: 50rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.multi-select-pill .remove-pill {
    margin-left: 0.5rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: var(--texto-claro);
    opacity: 0.7;
    font-size: 1.2em;
    line-height: 1;
}

.multi-select-pill .remove-pill:hover {
    opacity: 1;
}

.multi-select-input-wrapper {
    flex: 1;
    min-width: 150px;
}

.multi-select-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    padding: 0.25rem;
    color: var(--texto-oscuro);
}

/* Hide placeholder when pills are present */
.multi-select-pill-container.has-pills .multi-select-input::placeholder {
    color: transparent;
    opacity: 0;
}

/* --- [NUEVO] Sidebar Navigation Styles --- */
.global-sidebar {
    position: fixed;
    top: var(--header-height); /* Se alinea exactamente debajo del navbar */
    left: 0;
    width: 300px;
    height: calc(100vh - var(--header-height));
    background-color: var(--color-fondo-primario);
    border-right: 2px solid var(--borde-fondo-secundario);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1040;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.global-sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.sidebar-backdrop {
    position: fixed;
    top: var(--header-height); /* Se alinea exactamente debajo del navbar */
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--header-height));
    background-color: rgba(0,0,0,0.3);
    z-index: 1039;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

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

/* Toggle Button Styling */
.btn-sidebar-toggle {
    width: 2.75rem; /* ~44px Aspect ratio 1:1 */
    height: 2.75rem; 
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Modified transition to handle z-index delay for closing animation */
    transition: all 0.2s ease-in-out, z-index 0s linear 0.3s;
    border: none; /* Sin borde porque ahora es relleno sólido */
    
    /* Variables inline definidas en HTML: --btn-bg-idle, --btn-text-idle */
    background-color: var(--btn-bg-idle, var(--morado-logotipo));
    color: var(--btn-text-idle, #ffffff);
    
    border-radius: 0.5rem;
    /* Ensure button floats above sidebar when open */
    position: relative;
    /* z-index lowered to allow tucking under header on scroll when sidebar is closed */
    z-index: 1; 
}

.btn-sidebar-toggle:hover {
    background-color: var(--btn-bg-idle, var(--morado-logotipo)); /* Ensure color sticks */
    filter: brightness(85%) saturate(120%); /* Darker and more saturated */
    color: var(--btn-text-idle, #ffffff); /* Keep text color */
}

/* Estado activo (cuando el sidebar está abierto) */
.btn-sidebar-toggle.toggled {
    background-color: var(--morado-logotipo) !important;
    color: var(--texto-claro) !important;
    /* Elevate z-index when open to sit above sidebar */
    z-index: 1050;
    /* Immediate transition for z-index when opening */
    transition: all 0.2s ease-in-out, z-index 0s linear 0s;
}

/* Sidebar Content Styling */
.global-sidebar .sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--borde-fondo-secundario);
    background-color: var(--color-fondo-secundario);
    min-height: 60px; /* Match approximate breadcrumb bar height */
}

.global-sidebar .list-group-item {
    border: none;
    border-left: 5px solid transparent;
    padding: 0.75rem 1.25rem;
    color: var(--texto-oscuro);
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: background-color 0.15s, border-color 0.15s;
}

.global-sidebar .list-group-item:hover {
    background-color: rgba(var(--global-table-hover-rgb), 0.1);
}

.global-sidebar .list-group-item.active {
    background-color: rgba(var(--global-table-hover-rgb), 0.15);
    color: var(--morado-logotipo);
    border-left-color: var(--morado-logotipo);
    font-weight: 600;
}

.text-morado {
    color: var(--morado-logotipo);
}

/* --- Componentes de Rango y Progreso Globales --- */

/* Slider (Range) Personalizado */
.form-range {
    height: 1.5rem;
    padding: 0;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.form-range:focus {
    outline: none;
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 0.2rem rgba(var(--global-focus-color-rgb), 0.25);
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--morado-logotipo);
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -0.5rem; /* Centrar */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, transform .15s ease-in-out;
}

.form-range::-webkit-slider-thumb:hover {
    background-color: var(--celeste-logotipo);
    transform: scale(1.1);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--celeste-logotipo);
    transform: scale(1.1);
}

.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    cursor: pointer;
    background-color: var(--borde-fondo-secundario);
    border-radius: 1rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Firefox */
.form-range::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--morado-logotipo);
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, transform .15s ease-in-out;
}

.form-range::-moz-range-thumb:hover {
    background-color: var(--celeste-logotipo);
    transform: scale(1.1);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--celeste-logotipo);
    transform: scale(1.1);
}

.form-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    cursor: pointer;
    background-color: var(--borde-fondo-secundario);
    border-radius: 1rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Barra de Progreso Personalizada */
.progress {
    background-color: var(--color-fondo-primario);
    border: 2px solid var(--borde-fondo-secundario);
    border-radius: 50rem;
    height: 2rem !important; /* Altura consistente y robusta */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.progress-bar {
    background-color: var(--morado-logotipo);
    color: var(--texto-claro);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
}

/* Variantes de Color para Barra de Progreso */
.progress-bar.bg-success {
    background-color: var(--verde-logotipo) !important;
}

.progress-bar.bg-info {
    background-color: var(--celeste-logotipo) !important;
}

.progress-bar.bg-warning {
    background-color: var(--naranja-logotipo) !important;
    color: var(--texto-claro) !important;
}

.progress-bar.bg-danger {
    background-color: #dc3545 !important;
}

/* Animación de rayas personalizada */
.progress-bar-striped {
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
}

/* --- Notification System (Material 3 Sidebar) --- */
.notif-sidebar {
    width: 400px;
    border-left: 2px solid var(--borde-fondo-secundario) !important;
    background-color: var(--color-fondo-primario);
    display: flex;
    flex-direction: column;
    
    /* Position adjustment to sit below header like navigation sidebar */
    top: var(--header-height) !important;
    height: calc(100vh - var(--header-height)) !important;
    border-radius: 0 !important;
}

@media (max-width: 576px) {
    .notif-sidebar {
        width: 100%;
        border-radius: 0;
        border-left: none;
    }
}

.offcanvas-backdrop {
    top: var(--header-height) !important;
    height: calc(100vh - var(--header-height)) !important;
}

.notif-sidebar-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--borde-fondo-secundario);
    background-color: var(--color-fondo-secundario);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.notif-sidebar-body {
    padding: 1rem;
    overflow-y: auto;
    background-color: var(--color-fondo-primario);
    flex-grow: 1; /* Makes body take available space, pushing footer down */
}

.notif-sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--borde-fondo-secundario);
    background-color: var(--color-fondo-secundario);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    margin-top: auto; /* Ensure it stays at bottom if body content is short */
}

/* Notification Category Groups */
.notif-group {
    margin-bottom: 1rem;
}

.notif-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 50rem;
    transition: background-color 0.2s;
    user-select: none;
}

.notif-group-header:hover {
    background-color: rgba(0,0,0,0.05);
}

.notif-group-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notif-group-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Notification Card (Material 3) */
.notif-card {
    background-color: var(--m3-sys-color-surface);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    padding: 12px 16px;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
    position: relative;
    overflow: hidden;
}

.notif-card:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

/* Types Colors */
.notif-card[data-type="danger"] { border-left-color: var(--notif-color-danger-token); background-color: var(--notif-color-danger-bg); }
.notif-card[data-type="warning"] { border-left-color: var(--notif-color-warning-token); background-color: var(--notif-color-warning-bg); }
.notif-card[data-type="success"] { border-left-color: var(--notif-color-success-token); background-color: var(--notif-color-success-bg); }
.notif-card[data-type="info"] { border-left-color: var(--notif-color-info-token); background-color: var(--notif-color-info-bg); }

/* Card Content Structure */
.notif-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 4px;
}

.notif-sender {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--texto-oscuro);
    text-decoration: none;
    transition: color 0.2s;
}
.notif-sender:hover { text-decoration: underline; color: var(--morado-logotipo); }
.notif-sender-icon { font-size: 1.1em; }

.notif-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--texto-oscuro);
}

.notif-card-body {
    font-size: 0.85rem;
    color: #444;
    margin-bottom: 8px;
    line-height: 1.4;
    
    /* Truncate logic */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.notif-card.expanded .notif-card-body {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.notif-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

/* Action Buttons */
.notif-action-btn {
    border: none;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    color: var(--morado-logotipo);
    transition: background-color 0.2s;
}
.notif-action-btn:hover { background-color: rgba(66, 44, 114, 0.08); }

.notif-action-link {
    display: inline-flex;
    align-items: center;
    background-color: rgba(0,0,0,0.05);
    color: var(--texto-oscuro);
    padding: 4px 10px;
    border-radius: 50rem;
    font-size: 0.75rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}
.notif-action-link:hover { background-color: rgba(0,0,0,0.1); }

/* Accordion Toggle */
.notif-expand-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}
.notif-expand-btn:hover { background-color: rgba(0,0,0,0.05); color: #333; }
.notif-card.expanded .notif-expand-btn { transform: rotate(180deg); }

/* Mark Read Button */
.notif-read-btn {
    opacity: 0;
    position: absolute;
    top: 8px;
    right: 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: opacity 0.2s, background-color 0.2s;
    z-index: 2;
}
.notif-card:hover .notif-read-btn { opacity: 1; }
.notif-read-btn:hover { background-color: #f0f0f0; color: var(--morado-logotipo); }

/* --- Toast Container --- */
#toast-container {
    position: fixed;
    top: calc(var(--header-height) + 1rem);
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 350px;
    max-width: 90vw;
    pointer-events: none; /* Allow clicking through empty space */
}

.notif-toast {
    pointer-events: auto;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-left: 6px solid #ccc;
    padding: 12px;
    animation: slideInRight 0.3s cubic-bezier(0.2, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notif-toast[data-type="danger"] { border-left-color: var(--notif-color-danger-token); }
.notif-toast[data-type="warning"] { border-left-color: var(--notif-color-warning-token); }
.notif-toast[data-type="success"] { border-left-color: var(--notif-color-success-token); }
.notif-toast[data-type="info"] { border-left-color: var(--notif-color-info-token); }

/* --- Notification Badge/Button Styles (Provided) --- */
.notif-btn { 
    position: relative; 
    color: rgba(255,255,255,0.85); 
    border: none; 
    background: transparent; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    transition: background 0.2s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0;
}
.notif-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.notif-badge { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; background-color: #ffb74d; border-radius: 50%; border: 2px solid var(--morado-logotipo); display: none; }
.notif-badge.active { display: block; }