/* Puedes añadir estilos globales aquí si es necesario */

/* Estilos para el contenedor de alertas */
.alert-container {
    position: fixed;
    /* O 'absolute' si prefieres */
    top: 80px;
    /* Ajusta según la altura de tu header */
    right: 20px;
    z-index: 1050;
    /* Asegura que esté sobre otros elementos */
    min-width: 300px;
    /* Ancho mínimo para las alertas */
}

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

:root {
    --bs-body-bg: #fff;
    --bs-row-altern: rgba(2, 115, 41, 0.2);
    --bs-body-color: #333;
    --bs-border-color: #6bbe8b;
    --bs-box-shadow-color: rgba(165, 249, 194, 0.6);
    --bs-success: #28a745;
    --bs-secondary: #6c757d;
    --bs-font-color: #000000;
    --bs-font-link-color: #007bff;
    --bs-font-title-view-color: #68a7eb;
    --bs-text-shadow: #000000;
    --bs-row-table-hover: rgba(124, 137, 124, 0.2);
    --bs-success-color: #28a745;
    --bs-info-color: #17a2b8;
    --bs-danger-color: #dc3545;
    --bs-text-muted: #000000;
    /* Variables adicionales para colores de eventos (si no existen) */
    --bs-orange-color: #fd7e14; /* Bootstrap orange */
    --bs-yellow-color: #ffc107; /* Bootstrap yellow */
    --bs-teal-color: #20c997; /* Bootstrap teal */
    --bs-purple-color: #6f42c1; /* Bootstrap purple */
    --bs-dark-color: #212529; /* Bootstrap dark */

    --header-height: 3rem;
    --nav-width: 68px;
    --first-color: #0d6efd;
    --first-color-light: #cfe2ff;
    --white-color: #FFF;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100;
}

.login-container {
    display: flex;
    flex-direction: row;
    width: 80%;
    max-width: 1200px;
}

.image-section {
    flex: 1;
    margin-right: 10px;
    width: 50px;
}

.image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.form-section {
    flex: 1;
    padding: 20px;
    color: var(--bs-font-color);
    border-radius: 8px;
    box-shadow: 0 0 10px var(--bs-box-shadow-color);
    background-color: var(--bs-body-bg);
}

.logo {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.legend {
    font-size: 10px;
    align-items: flex-end;
    margin-top: 30px;
}

.footer {
    margin-top: 30px;
    text-align: center;
    font-size: 0.8em;
}

.footer a {
    color: var(--bs-font-color);
    text-decoration: none;
    margin: 0 10px;
}

thead a {
    text-decoration: none !important;
    color: inherit;
}

thead a:hover {
    text-decoration: none !important;
}

.employee-table th,
.employee-table td {
    padding: 6px 6px;
    text-align: left;
    border-bottom: 1px solid var(--bs-secondary);
    font-size: 0.9rem;
}

.employee-table th {
    background-color: var(--bs-font-color);
    font-weight: bold;
}

.employee-table tr:nth-child(odd) {
    background-color: var(--bs-row-altern);
}

.employee-table tr:nth-child(even) {
    background-color: var(--bs-body-bg);
}

.employee-table tr:hover {
    background-color: var(--bs-row-table-hover);
}

.employee-table td.action-buttons {
    vertical-align: top;
    text-align: center;
    padding: 0px;
}

.action-buttons {
    display: flex;
    margin-top: -10px;
    justify-content: center;
    font-size: 1.2em;
    gap: 10px;
}

.action-buttons button {
    padding: 6px 8px;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 40px;
    font-size: 0.9rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.action-buttons button:hover {
    background-color: var(--bs-border-color);
    color: var(--bs-body-bg);
    border-color: var(--bs-success);
}

.employee-table th:not(:nth-child(6)),
.employee-table td:not(:nth-child(6)) {
    width: auto;
    flex-grow: 1;
    word-break: break-word;
}

.btn-outline-success {
    background-color: transparent;
    color: var(--bs-success-color);
    border: 1px solid var(--bs-success-color);
}

.btn-outline-info {
    background-color: transparent;
    color: var(--bs-info-color);
    border: 1px solid var(--bs-info-color);
}

.btn-outline-danger {
    background-color: transparent;
    color: var(--bs-danger-color);
    border: 1px solid var(--bs-danger-color);
}

.btn-outline-success:hover {
    background-color: var(--bs-success-color);
    color: var(--bs-font-color);
}

.btn-outline-info:hover {
    background-color: var(--bs-info-color);
    color: var(--bs-font-color);
}

.btn-outline-danger:hover {
    background-color: var(--bs-danger-color);
    color: var(--bs-font-color);
}

.collapse {
    width: 100%;
}

.employee-details-container {
    font-family: 'Arial', sans-serif;
    padding: 1px;
}

.card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-body {
    padding: 20px;
}

.row.g-2 {
    margin-bottom: 15px;
}

.employee-detail-value {
    font-weight: 500;
    color: #333;
}

.employee-detail-value::before {
    font-weight: bold;
}

.row.g-2.mt-2 {
    margin-top: 20px;
}

.col-md-2 strong {
    color: var(--bs-font-title-view-color) !important;
}

.employee_form {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    font-family: 'Arial', sans-serif;
}

.employee_form .modal-body {
    padding: 2rem;
}

.employee_form .alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1.5rem;
}

.employee_form .btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.employee_form .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.employee_form .btn-success:hover,
.employee_form .btn-danger:hover {
    filter: brightness(90%);
}

.employee_form .text-end {
    margin-top: 2rem;
}

.employee-modal .text-end {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
}

.employee-modal .text-end button,
.employee-modal .text-end a {
    margin-left: 10px;
}

.offcanvasEmployeeForm {
    font-family: 'Arial', sans-serif;
}

/* Las reglas específicas para .offcanvasEmployeeForm .offcanvas-header y .offcanvas-title se eliminan */
/* para heredar el estilo general unificado. */

.offcanvasEmployeeForm .offcanvas-body {
    padding: 1.5rem;
}

.offcanvasEmployeeForm .alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1.5rem;
}

.offcanvasEmployeeForm .btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.offcanvasEmployeeForm .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.offcanvasEmployeeForm .btn-success:hover,
.offcanvasEmployeeForm .btn-danger:hover {
    filter: brightness(90%);
}

.offcanvasEmployeeForm .text-end {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
}

.offcanvasEmployeeForm .text-end button,
.offcanvasEmployeeForm .text-end a {
    margin-left: 10px;
}

h2 {
    margin-bottom: 30px;
}

.input-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

input,
select,
textarea {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background-color: var(--bs-body-bg);
    color: var(--bs-font-color);
    font-size: 1rem;
}

input:hover {
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    box-shadow: var(--bs-box-shadow-color);
}

button {
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    background-color: var(--bs-body-bg);
    color: var(--bs-font-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.links {
    margin-top: 20px;
    text-align: center;
}

.links a,
.links p {
    color: var(--bs-font-link-color);
    text-decoration: none;
    margin: 5px;
}

.alert-container {
    position: absolute;
    z-index: 1050;
    top: calc(var(--header-height) + 1rem);
    right: 1rem;
    width: auto;
    max-width: 400px;
}

.d-flex {
    display: flex;
    align-items: center;
}

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

.custom-button {
    margin-top: -7px;
    height: 40px;
    width: 170px;
}

/* === Estilos Unificados para Encabezados de Offcanvas === */
.offcanvas-header {
    background-color: #8FBC8F !important;
    /* Mismo color que modal-header */
    color: #FFFFFF !important;
    /* Texto blanco */
    border-bottom: 1px solid #6B8E6B;
    /* Mismo borde que modal-header */
}

.offcanvas-header .offcanvas-title {
    color: #FFFFFF !important;
    /* Asegurar título blanco */
}

/* Estilo para el botón de cierre (X) en el header del offcanvas */
.offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    /* Botón blanco */
}

.offcanvas-body {
    padding: 1.5rem;
}

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

.fw-medium {
    font-weight: 500;
    color: #333;
}

.hotel-detail-value {
    word-wrap: break-word;
    font-size: 1rem;
}

.text-lg {
    font-size: 1rem;
}

.label-style {
    color: #adb5bd;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-font-color);
    padding-bottom: 5px;
}

.highlighted-cell {
    border: 2px solid var(--bs-font-link-color);
    border-radius: 50%;
    padding: 5px;
}

.no-records-message {
    font-family: sans-serif;
    color: var(--bs-body-color);
    font-size: 1rem;
    margin-top: 10px;
    text-align: center;
    color: var(--bs-text-muted);
}

.table-responsive-container {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 1rem;
}

*,
::before,
::after {
    box-sizing: border-box;
}

body {
    position: relative;
    margin: var(--header-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: .5s;
    background-color: #f8f9fa;
}

a {
    text-decoration: none;
}

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: #c6c6c6;
    /* Gris claro */
    z-index: var(--z-fixed);
    transition: .5s;
    /* border-bottom: 1px solid #dee2e6; /* Eliminado borde inferior */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    /* Sombra inferior más pronunciada */
}

.info_user_avatar {
    font-size: small;
}

/* Estilo para el título del header */
.page-title-header {
    font-size: 1.2rem;
    /* Tamaño de fuente más grande */
    font-weight: 600;
    /* Más grueso */
    color: #495057;
    /* Un gris oscuro para el texto */
}

.header_toggle {
    color: var(--first-color);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Estilos para elementos interactivos en el header (iconos, contadores, etc.) */
.header .d-flex > * {
    vertical-align: middle;
    /* Asegurar alineación vertical para todos los hijos directos */
}

/* Estilos específicos para iconos de badges en el header (mantener tamaño si es necesario) */
.header .d-flex .bx-message-dots,
.header .d-flex .bx-bell {
    font-size: 1.5rem;
    /* Igualar tamaño al icono del menú */
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    background-color: #eee;
}

.header_img img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: cover;
}

/* Ocultar flecha del dropdown del avatar en el header */
.header .dropdown-toggle::after {
    display: none;
}

.l-navbar {
    position: fixed;
    top: 0;
    left: 0;
    /* Asegurar que esté anclado a la izquierda */
    transform: translateX(-100%);
    /* Oculto fuera de pantalla por defecto */
    width: var(--nav-width);
    height: 100vh;
    background-color: #8FBC8F;
    /* Verde grisáceo - Original: var(--first-color) */
    padding: .5rem .5rem 0 0;
    transition: transform .5s, width .5s, box-shadow .5s;
    /* Añadida transición para sombra */
    /* Transicionar transform y width */
    z-index: var(--z-fixed);
    /* Restored z-index to be equal to header */
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.4);
    /* Sombra a la derecha */
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    /* Permitir scroll vertical en toda la nav */
    /* Ocultar scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

/* Ocultar scrollbar en Webkit */
.nav::-webkit-scrollbar {
    display: none;
}

/* Propiedades comunes para logo y link */
.nav_logo,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
}

/* Padding y margen específicos para logo */
.nav_logo {
    padding: .75rem 0 .75rem 1.5rem; /* Padding original */
    margin-bottom: 2rem;
}

/* Padding específico para link (altura reducida) */
.nav_link {
    padding: 0.5rem 0 0.5rem 1.5rem; /* Padding vertical reducido */
}

.nav_logo-icon {
    /* font-size: 1.25rem; /* Reemplazado por width/height */
    /* color: #2F4F4F; */
    /* No aplica a img */
    width: 1.25rem;
    /* Ajustar tamaño de la imagen */
    height: 1.25rem;
    /* Ajustar tamaño de la imagen */
    vertical-align: middle;
    /* Alinear verticalmente con el texto */
    /* Verde oscuro grisáceo */
    transition: width 0.3s, height 0.3s;
    /* Añadir transición suave */
}

/* Aumentar tamaño del icono cuando el menú está expandido */
.l-navbar.expander .nav_logo-icon {
    width: 3rem;
    /* Tamaño más grande */
    height: 3rem;
    /* Tamaño más grande */
}

.nav_logo-name {
    color: #2F4F4F;
    /* Verde oscuro grisáceo */
    font-weight: 700;
    opacity: 0;
    transition: opacity .3s, font-size .3s;
    /* Añadir transición para font-size */
}

.nav_list {
    /* overflow-y: auto; */
    /* Eliminado, el scroll se maneja en .nav */
    flex-grow: 1;
}

.nav_link {
    position: relative;
    color: #2F4F4F;
    /* Verde oscuro grisáceo */
    margin-bottom: 0.375rem;
    transition: .3s;
}

.nav_link:hover {
    color: #556B2F;
    /* Verde oliva oscuro al pasar el ratón */
}

.nav_icon {
    font-size: 1.25rem;
}

.nav_category_icon {
    font-size: 1.8rem;
    /* Aumentado un poco más */
    /* Aumentado el tamaño */
    /* Ligeramente más grande que nav_icon */
    margin-right: 0.5rem;
    /* Espacio entre icono y texto */
    vertical-align: middle;
    /* Alinear verticalmente con el texto */
    opacity: 1 !important;
    /* Asegurar visibilidad */
    transition: none !important;
    /* Evitar transición de opacidad */
    color: #2F4F4F;
    /* Verde oscuro grisáceo */
}

.l-navbar .nav_name {
    opacity: 0;
    transition: opacity .3s;
}

/* Aumentar tamaño del texto del logo cuando el menú está expandido */
.l-navbar.expander .nav_logo-name {
    font-size: 1.3rem;
    /* Ajusta este valor según el tamaño deseado */
}

/* Estilos para el texto de la categoría */
.nav_name_text {
    display: inline;
    /* Por defecto visible */
    transition: opacity .3s;
    opacity: 1;
}

/* Ocultar texto cuando la barra está colapsada */
.l-navbar:not(.expander) .nav_name_text {
    opacity: 0 !important;
    transition: none !important;
    display: none;
    /* Ocultar completamente */
}

/* Asegurar que el texto sea visible cuando está expandida */
.l-navbar.expander .nav_name_text {
    opacity: 1;
    display: inline;
}

/* Estilos para el texto de la categoría dentro del título */
.nav_category_title .nav_name_text {
    color: #495057;
    /* Mantenemos gris oscuro aquí para contraste con fondo blanco de categoría */
    font-weight: 600;
    /* Mantener negrita */
}

.nav_category_title {
    /* Eliminada la línea inferior y cambiado el fondo */
    background-color: var(--bs-body-bg);
    color: var(--first-color);
    /* Color base para el contenedor, aunque el texto/icono lo sobreescriban */
    font-size: 0.85rem;
    text-transform: uppercase;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    letter-spacing: 0.5px;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    /* Aumentado margen inferior */
    margin-right: 0.25rem;
    /* Reducido margen derecho para modo colapsado */
    /* Margen derecho para no pegar al borde */
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    /* Reducido más el padding izquierdo */
    /* Reducido padding izquierdo y derecho */
    /* Ajustado padding */
    border-left: 5px solid var(--first-color);
    /* Borde izquierdo */
    border-top-left-radius: 5px;
    /* Redondeo superior izquierdo */
    border-bottom-left-radius: 5px;
    /* Redondeo inferior izquierdo */
    /* display: block; */
    /* Eliminado display block */
    /* grid-column: 1 / span 2; */
    /* Eliminado grid-column */
    display: flex;
    /* Usar flex para alinear icono y texto */
    align-items: center;
    /* Centrar verticalmente icono y texto */
}

.nav_list>.nav_category_title:first-of-type {
    margin-top: 0.5rem;
}

.l-navbar.show {
    transform: translateX(0);
    /* Mostrar en pantalla cuando tenga la clase .show */
    /* width: var(--nav-width); /* No es necesario, ya está en la base */
}

.l-navbar.expander {
    /* Se aplica cuando está visible y expandido */
    width: calc(var(--nav-width) + 156px);
}

.l-navbar.expander .nav_logo-name,
.l-navbar.expander .nav_name {
    opacity: 1;
}

body.body-pd {
    padding-left: calc(var(--nav-width) + 1rem);
}


body.body-pd.expander {
    padding-left: calc(var(--nav-width) + 156px + 1rem);
    /* Re-apply specific padding for expander state */
    /* transition: padding-left .5s; /* Removed transition */
}

/* Removed the body.body-pd .header rule */

/* Base rule for .header.expander removed as padding adjustment should only happen on large screens */

.nav_link.active {
    color: #F5F5DC;
    /* Beige para texto activo (contraste con fondo verde oscuro) */
    /* Reemplazado background-color con degradado horizontal */
    background-image: linear-gradient(to right, #6B8E6B, #8FBC8F); /* Degradado de activo a fondo sidebar */
    border-top-left-radius: 5px;
    /* Redondeo izquierdo */
    border-bottom-left-radius: 5px;
    /* Redondeo izquierdo */
    /* Eliminado redondeo derecho */
    /* Eliminado margen derecho para ocupar todo el ancho */
    /* Eliminado padding derecho específico */
}

.nav_link.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: #F5F5DC;
    background-color: #F5F5DC;
    /* Beige para indicador activo */
}

/* Estilos para el contenedor de items de categoría */
.nav_category_items {
    border-left: 3px solid rgba(25, 135, 84, 0.5); /* Línea izquierda con color de fondo de categoría */
    margin-left: 0; /* Indentación para alinear la línea con el contenido original */
    padding-left: 0;   /* Espacio reducido entre la línea y los enlaces */
    margin-bottom: 1rem; /* Espacio debajo del grupo de enlaces */
    /* Asegurar que el último enlace dentro no tenga margen inferior extra */
    padding-bottom: 1px; /* Pequeño padding para asegurar que el borde cubra todo si hay márgenes */
}

/* Ajustar padding izquierdo de los enlaces DENTRO del contenedor */
.nav_category_items .nav_link {
    padding-left: 0.5rem; /* Reducir padding izquierdo ya que el contenedor lo maneja */
    /* Mantener padding vertical y derecho si es necesario */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 0; /* O el valor que tuvieran antes si no era 0 */
    /* Quitar margen inferior del último enlace para que no se separe del borde */
    margin-bottom: 0;
}
/* Añadir margen inferior a todos los links excepto el último dentro de un grupo */
.nav_category_items .nav_link:not(:last-child) {
    margin-bottom: 0.375rem; /* Restaurar margen inferior original */
}


.height-100 {
    padding-top: 1rem;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        /* padding-left is now handled by body.body-pd rules below */
    }

    /* Adjust padding for larger screens */
    body.body-pd {
        padding-left: calc(var(--nav-width) + 2rem);
        /* Use 2rem padding for large screens */
    }

    body.body-pd.expander {
        padding-left: calc(var(--nav-width) + 156px + 2rem);
        /* Adjusted expanded padding for large screens */
    }

    .header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem);
        /* Adjusted header padding */
    }

    /* Hide toggle button on large screens */
    .header_toggle {
        display: none;
    }

    /* Corrected header padding when sidebar is expanded on large screens */
    .header.expander {
        padding: 0 2rem 0 calc(var(--nav-width) + 156px + 2rem);
        /* Correct calculation */
    }

    .header_img {
        width: 40px;
        height: 40px;
    }

    .l-navbar {
        left: 0;
        /*transform: translateX(0);^/
        /* Anular ocultación inicial en pantallas grandes */
        /* padding: 1rem .5rem 0 0;^/
        /* width: var(--nav-width); /* Redundante */
    }

    /* No se necesita .l-navbar.show aquí ya que está visible por defecto */

    .l-navbar.expander {
        /* Mantener la regla de expansión */
        width: calc(var(--nav-width) + 156px);

    }

    /* Removed redundant body.body-pd rules as they are now defined above */
}

/* Estilos para menú desplegable horizontal */
/* Asegurar que por defecto esté oculto (Bootstrap lo hace, pero por si acaso) */
.dropdown-menu-horizontal:not(.show) {
    display: none;
}

/* Aplicar flex solo cuando el menú se muestra */
.dropdown-menu-horizontal.show {
    min-width: auto;
    /* Ajustar el ancho mínimo si es necesario */
    padding: 0.25rem;
    /* Reducir padding si es necesario */
    display: flex;
    /* Usar flexbox para alinear items */
    flex-direction: row;
    /* Dirección horizontal */
    align-items: center;
    /* Centrar verticalmente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* Añadida sombra */
    background-color: #e9ecef;
    /* Color de fondo gris claro (similar a btn-light:active) */
}

.dropdown-menu-horizontal li {
    margin-right: 0.25rem;
    /* Espacio entre elementos */
    list-style: none;
    /* Quitar viñetas si las hubiera */
}

.dropdown-menu-horizontal li:last-child {
    margin-right: 0;
    /* Sin margen para el último elemento */
}

/* Ajustar padding de los items si es necesario */
.dropdown-menu-horizontal .dropdown-item {
    padding: 0.5rem 0.7rem;
    /* Aumentado padding para hacerlos más grandes */
    border-radius: 8px;
    /* Añadido para bordes redondeados */
    display: inline-flex;
    /* Asegurar que el contenido interno se alinee bien */
    align-items: center;
    justify-content: center;
    /* Quitar el ancho completo que puedan tener por defecto */
    width: auto;
}

/* Ocultar los párrafos vacíos usados como separadores */
.dropdown-menu-horizontal li p {
    display: none;
}

/* --- Estilos para Desplegables de Notificaciones, Mensajes y Usuarios --- */

/* Estilo general para los desplegables */
.dropdown-menu.messages,
.dropdown-menu.notifications,
.dropdown-menu.users {
    /* Añadido .users */
    border: none;
    /* Sombra más fuerte: mayor offset vertical, mayor blur, color más oscuro/opaco */
    box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.2);
    padding: 0;
    /* Eliminar padding por defecto */
    left: 0; /* Alinear a la izquierda del contenedor */
}

/* Contenedor interno para los items con scroll */
.dropdown-items-scrollable {
    /* Aplicamos aquí la altura máxima y el scroll */
    max-height: 300px;
    /* Ajusta esta altura según necesites */
    overflow-y: auto;
    /* Estilos para la barra de scroll (opcional, específico de Webkit) */
}

.dropdown-items-scrollable::-webkit-scrollbar {
    width: 5px;
}

.dropdown-items-scrollable::-webkit-scrollbar-track {
    background: #f1f1f1;
    margin: 5px 0;
    /* Margen para no pegar con header/footer */
}

.dropdown-items-scrollable::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
}

.dropdown-items-scrollable::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}


/* Flecha superior */
.dropdown-menu-arrow::before {
    content: "";
    position: absolute;
    top: -10px;
    /* Ajustar para que la flecha esté sobre el borde */
    right: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--bs-body-bg);
    /* Color de fondo del menú */
    filter: drop-shadow(0 -2px 2px rgba(1, 41, 112, 0.05));
    /* Sombra sutil */
}

/* Cabecera del desplegable */
.dropdown-header {
    text-align: left;
    padding: 10px 15px;
    font-size: 0.9rem;
    color: #6c757d;
    /* Color secundario de Bootstrap */
    background-color: #f8f9fa;
    /* Fondo ligeramente gris */
    border-bottom: 1px solid #dee2e6;
    /* Borde inferior */
}

.dropdown-header a {
    float: right;
    color: var(--bs-primary);
    text-decoration: none;
}

.dropdown-header a:hover {
    text-decoration: underline;
}

/* Separador */
.dropdown-divider {
    height: 1px;
    margin: 0;
    /* Eliminar márgenes por defecto */
    background-color: #e9ecef;
    /* Color de borde más suave */
    border: 0;
}

/* Estilo base para items */
.message-item,
.notification-item {
    padding: 10px;
    transition: background-color 0.3s ease;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid #e9ecef;
}

.message-item:last-child,
.notification-item:last-child {
    border-bottom: none;
}

.notification-item i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.notification-item p {
    font-size: 0.8rem;
    margin-bottom: 0;
}

.notification-item p.text-muted {
    font-size: 0.7rem;
}

.message-item a,
.notification-item>div {
    /* Aplicar flex al div contenedor en notificaciones */
    display: flex;
    align-items: center; /* Alinear verticalmente */
    text-decoration: none;
    color: inherit;
    /* Heredar color de texto */
}

.message-item:hover,
.notification-item:hover {
    background-color: #f2f2f2;
    /* Fondo al pasar el ratón */
}

/* Estilos específicos para items de mensajes */
.message-item img {
    margin-right: 10px;
    flex-shrink: 0;
    /* Evitar que la imagen se encoja */
}

.message-item h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #444444;
}

.message-item p {
    font-size: 0.85rem;
    margin-bottom: 3px;
    color: #6c757d;
}

.message-item p:last-child {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 0;
}

/* Estilos específicos para items de notificaciones */
.notification-item i {
    font-size: 1.5rem;
    /* Tamaño del icono */
    margin-right: 15px; /* Aumentar espacio */
    line-height: 1;
    /* Ajustar línea para alinear mejor */
    flex-shrink: 0;
}

.notification-item h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #444444;
}

.notification-item p {
    font-size: 0.9rem; /* Aumentar tamaño de fuente */
    margin-bottom: 5px; /* Aumentar espacio */
    color: #6c757d;
}

.notification-item p:last-child {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 0;
}

/* Pie del desplegable */
.dropdown-footer {
    text-align: center;
    padding: 10px 0;
    font-size: 0.9rem;
    background-color: #f8f9fa;
    /* Fondo ligeramente gris */
    border-top: 1px solid #dee2e6;
    /* Borde superior */
}

.dropdown-footer a {
    color: var(--bs-primary);
    text-decoration: none;
}

.dropdown-footer a:hover {
    text-decoration: underline;
}

/* === Estilos para Encabezados de Modales === */
.modal-header {
    background-color: #8FBC8F !important;
    /* Color del sidebar */
    color: #FFFFFF !important;
    /* Texto blanco para contraste */
    border-bottom: 1px solid #6B8E6B;
    /* Borde inferior un poco más oscuro que el fondo */
}

/* Asegurar que el título de la modal también sea blanco */
.modal-header .modal-title {
    color: #FFFFFF !important;
}

/* Estilo para el botón de cierre (X) en el header de la modal */
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    /* Hace el botón blanco */
}

/* Ocultar flecha del dropdown-toggle dentro de las tablas */
table .dropdown-toggle::after {
    display: none !important;
    /* Usamos !important por si acaso Bootstrap tiene reglas muy específicas */
}

/* Estilo global para cabeceras de tablas */
thead th {
    background-color: #8FBC8F !important;
    /* Color del sidemenu */
    color: #FFFFFF !important;
    /* Texto blanco para contraste */
}

/* Estilo para los inputs de búsqueda */
.searchInput {
    width: 45% !important;
    /* Ancho del 25% */
}

/* Hace que el contenedor ignore los clics */
#alert-box {
    pointer-events: none;
    /* Opcional: Limitar el ancho máximo si las alertas son muy largas */
    /* max-width: 400px; */
}

/* Hace que las alertas individuales sí respondan a clics */
#alert-box .alert {
    pointer-events: auto;
}

/* Estilos para el Modal de Perfil de Usuario */
.user-profile-gradient {
    /* Gradiente de verde sidemenu al color de fondo del body */
    background: linear-gradient(to bottom right, #8FBC8F, var(--bs-body-bg, #f8f9fa));
    /* El texto debe ser oscuro para contrastar con el fondo claro resultante */
    color: var(--bs-body-color, #333);
}

/* Ajustar color de texto específico si es necesario para la parte gradiente */
.user-profile-gradient h5,
.user-profile-gradient p,
.user-profile-gradient a {
    color: var(--bs-body-color, #333);
    /* Usar color principal del body */
}

.user-profile-gradient a.text-white-50 {
    /* Corregir el enlace de lápiz */
    color: var(--bs-secondary, #6c757d) !important;
    /* Usar color secundario */
}

.user-profile-gradient img {
    /* Ajustar borde de imagen */
    border: 3px solid rgba(0, 0, 0, 0.1);
    /* Borde oscuro sutil */
}


.user-profile-details {
    background-color: var(--bs-secondary, #6c757d);
    /* Usar color secundario como fondo */
    color: var(--white-color, #FFF);
    /* Texto claro por defecto */
}

/* Asegura que el texto dentro de details sea visible */
.user-profile-details h6,
.user-profile-details p {
    color: var(--white-color, #FFF);
    /* Texto principal blanco/claro */
}

/* Usar variable --bs-text-muted para texto secundario */
.user-profile-details .text-white-50 {
    /* Sobreescribir la clase de bootstrap con la variable local si es necesario */
    /* O crear una clase nueva, pero intentemos sobreescribir primero */
    /* Como --bs-text-muted es claro, necesitamos texto oscuro en fondo claro, pero aquí el fondo es oscuro */
    /* Mantendremos un blanco semi-transparente */
    color: rgba(255, 255, 255, 0.6) !important;
}

.user-profile-details .border-bottom {
    /* Usar un borde más acorde, quizás basado en el fondo */
    border-color: rgba(255, 255, 255, 0.15) !important;
    /* Blanco más transparente */
}

/* Estilo para el botón de cerrar en fondo oscuro (ya debería funcionar) */
.user-profile-details .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Forzar ajuste de línea para valores largos en el modal de perfil */
.user-profile-info-value {
    overflow-wrap: break-word;
    /* Permite romper palabras largas si es necesario */
    word-wrap: break-word;
    /* Compatibilidad con navegadores más antiguos */
    word-break: break-all;
    /* Alternativa más agresiva si lo anterior no funciona */
}

/* Personalización del separador de Breadcrumbs */
.breadcrumb {
    --bs-breadcrumb-divider: '>';
}

/* --- Estilos para Loading Overlay --- */
#loading-overlay {
    position: fixed;
    /* Cubre toda la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Fondo más opaco */
    /* Fondo blanco semitransparente */
    z-index: 9999;
    /* Asegura que esté por encima de todo */
    display: flex;
    /* Para centrar el loader */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* Apilar texto y puntos verticalmente */
    /* Inicialmente oculto por JS, pero podemos asegurarlo aquí también */
    /* display: none; */
    /* Comentado para que el JS controle la visibilidad inicial */
}

/* Nuevo contenedor para el contenido del loader */
.loading-content-wrapper {
    background-color: rgba(255, 255, 255, 0.85);
    /* Fondo blanco un poco más opaco */
    padding: 30px;
    /* Espaciado interno */
    border-radius: 10px;
    /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    /* Sombra suave */
    display: flex;
    /* Usar flex para centrar contenido interno */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    /* Limitar ancho máximo */
    text-align: center;
    /* Centrar texto si es necesario */
}

.loading-text {
    font-size: 2.5rem;
    /* Tamaño del texto */
    font-weight: bold;
    color: #0d6efd;
    /* Color principal (azul Bootstrap) */
    /* animation: pulse 1.5s ease-in-out infinite; */ /* Animación eliminada */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
    margin-bottom: 15px;
    /* Espacio entre texto y puntos */
}

.bouncing-dots-container {
    display: flex;
    /* Alinear puntos horizontalmente */
    justify-content: center;
}

.dot {
    width: 15px;
    /* Tamaño del cuadro */
    height: 15px;
    background-color: #6c757d;
    /* Color secundario (gris Bootstrap) */
    border-radius: 3px;
    /* Ligeramente redondeado */
    margin: 0 5px;
    /* Espacio entre puntos */
    animation: bounce 1.4s infinite ease-in-out both;
    /* Animación de rebote */
}

/* Aplicar retrasos diferentes a cada punto */
.dot:nth-child(1) {
    animation-delay: -0.32s;
}

.dot:nth-child(2) {
    animation-delay: -0.16s;
}

.dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0.8);
        /* Más pequeño al inicio/fin/pausa */
        opacity: 0.6;
    }

    40% {
        transform: scale(1.0);
        /* Tamaño normal en el pico */
        opacity: 1;
    }
}

/* --- Fin Estilos Loading Overlay --- */

/* Estilo personalizado para el header de la tarjeta de filtros */
.filter-card-header {
    background-color: #8FBC8F; /* Color del sidemenu */
    color: white;             /* Texto blanco */
    margin-top: 10px;         /* Margen superior solicitado */
    cursor: pointer;          /* Indicar que es clickeable */
}


/* --- Estilos para la lista de Tareas (Movido de calendar_state) --- */

.today-task-item {
    background-color: #fff;
    border: 1px solid var(--bs-border-color); /* Usar variable local */
    border-radius: 0.25rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.task-color-bar {
    width: 6px;
    flex-shrink: 0;
    background-color: var(--bs-secondary); /* Usar variable local (--event-gray -> --bs-secondary) */
}

/* Colores específicos para la barra lateral */
.task-color-bar.event-blue    { background-color: var(--first-color); } /* Usar --first-color */
.task-color-bar.event-red     { background-color: var(--bs-danger-color); } /* Usar --bs-danger-color */
.task-color-bar.event-orange  { background-color: var(--bs-orange-color); } /* Usar nueva variable */
.task-color-bar.event-yellow  { background-color: var(--bs-yellow-color); } /* Usar nueva variable */
.task-color-bar.event-green   { background-color: var(--bs-success); } /* Usar --bs-success */
.task-color-bar.event-teal    { background-color: var(--bs-teal-color); } /* Usar nueva variable */
.task-color-bar.event-cyan    { background-color: var(--bs-info-color); } /* Usar --bs-info-color */
.task-color-bar.event-purple  { background-color: var(--bs-purple-color); } /* Usar nueva variable */
.task-color-bar.event-default { background-color: var(--bs-secondary); } /* Usar --bs-secondary */


.task-content {
    padding: 0.5rem 0.75rem;
    flex-grow: 1;
}

.task-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color); /* Usar variable local */
    margin-bottom: 0.1rem;
    line-height: 1.3;
}

.task-content small.text-muted {
    font-size: 0.8rem;
    display: block;
    /* color: var(--bs-text-muted) !important; */ /* Hereda de Bootstrap, no necesita !important */
}

.task-meta {
    flex-shrink: 0;
}

.task-icon {
    font-size: 0.85em;
    color: var(--bs-text-muted); /* Usar variable local */
    vertical-align: middle;
}

.task-status-badge {
    font-size: 0.7em;
    padding: 0.2em 0.4em;
    vertical-align: middle;
    color: #fff;
    background-color: var(--bs-secondary); /* Usar variable local */
}

/* Colores específicos para los badges de estado */
.task-status-badge.status-pending {
    background-color: var(--bs-yellow-color); /* Usar nueva variable */
    color: var(--bs-dark-color); /* Usar nueva variable */
}
.task-status-badge.status-in_progress {
    background-color: var(--first-color); /* Usar --first-color */
}
.task-status-badge.status-completed {
    background-color: var(--bs-success); /* Usar --bs-success */
}
.task-status-badge.status-cancelled {
    background-color: var(--bs-danger-color); /* Usar --bs-danger-color */
}

/* --- Fin Estilos Tareas --- */

.custom-alert {
    position: fixed; /* O absolute, dependiendo de tu diseño */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    max-width: 400px; /* Ancho máximo */
    width: 90%; /* Ancho responsivo */
    border-radius: 5px;
  }
  
  .custom-alert-content {
    position: relative;
  }
  
  .close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #aaa;
  }
  
  .close-btn:hover {
    color: #777;
  }
  
#customAlertMessage {
  margin-top: 10px;
}

/* Ajuste para padding izquierdo de items de categoría en modo colapsado */
.l-navbar:not(.expander) .nav_category_items {
    margin-left: 0px;
}

/* Ajuste para el padding izquierdo de los enlaces de categoría cuando el sidebar está colapsado */
.l-navbar:not(.expander) .nav_category_items .nav_link {
    padding-left: 1rem; /* Ajustar para desplazar el icono a la derecha de la línea vertical */
}