table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid black; padding: 8px; text-align: center; cursor: pointer; }
.icono-verde { color: green; }
.icono-rojo { color: red; }
.icono-amarillo { color: orange; }
.icono-vacio { color: gray;}
.descripcion-btn-azul { background-color: blue; color: white; }
.dia-no-modificable { background-color: orange !important; color: white; font-weight: bold; }
.fin-de-semana { background-color: #e0e0e0; color: gray; }
.leyenda-iconos { display: flex; gap: 20px; margin-bottom: 10px; padding: 10px; background-color: #f8f9fa; border-radius: 5px; }
.icono-item { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #333; }
.cuadro-azul { width: 15px; height: 15px; background-color: blue; border-radius: 3px; display: inline-block; }
td.nombre-descripcion { max-width: 450px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);}
.modal-content { background-color: white; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 400px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);}
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold;}
.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer;}
textarea { width: 100%; height: 100px; padding: 8px; margin-top: 10px; border: 1px solid #ccc;}
.submit-btn { margin-top: 10px; padding: 8px 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer;}
.submit-btn:hover { background-color: #45a049; }

.btn {
display: inline-block;
padding: 8px 16px;
font-size: 15px;
font-weight: 500;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 4px;
text-decoration: none;
margin-right: 5px;
transition: background 0.2s;
}
.btn-secondary {
    background-color: #6c757d;
}
.btn:hover {
    background-color: #0056b3;
}
.btn-secondary:hover {
    background-color: #565e64;
}

nav.navbar {
    border-bottom: 3px solid #ccc; /* Agrega un borde inferior */
}

nav a:hover,
a:hover {
    color: #000 !important;
}


/* Menú hamburguesa mejorado */
#menuDropdownBtn { display: none; }
.navbar-toggler-icon{
    width: 50px;
}

.dropdown-menu-custom {
    display: none;
    position: absolute;
    top: 60px;
    left: 50px;
    /* transform: translateX(-50%); */
    background: #fff;
    border: 1px solid #ccc;
    z-index: 9999;
    width: 250px;           /* ancho fijo */
    min-width: unset;       /* elimina el min-width anterior */
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    animation: fadeInMenu 0.25s;
    overflow: hidden;
    transition: all 0.2s;
    padding: 0;
    max-width: 95vw;        /* para que no se salga en pantallas muy pequeñas */
}
@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-20px);}
    to { opacity: 1; transform: translateY(0);}
}
.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-menu-list > li {
    border-bottom: 1px solid #eee;
    position: relative;
}
.mobile-menu-list > li:last-child {
    border-bottom: none;
}


.dropdown-menu-custom a, .dropdown-menu-custom button, .dropdown-menu-custom select {
    display: block;
    width: 100%;
    padding: 14px 24px;
    color: #333;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.05em;
    text-decoration: none;
    cursor: pointer;
}
.dropdown-menu-custom a:hover {
    background: #f0f0f0;
    color: #007bff;
}
.has-submenu > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.submenu-arrow {
    font-size: 1em;
    margin-left: 8px;
    transition: transform 0.2s;
}
.submenu {
    display: none;
    background: #fafafa;
    padding-left: 10px;
}
.has-submenu.open > .submenu {
    display: block;
}
.has-submenu.open > a .submenu-arrow {
    transform: rotate(90deg);
}
.dropdown-menu-custom .has-submenu > a {
    font-weight: bold;
}
@media (max-width: 990px) {
    #menuDropdownBtn { display: inline-block; }
    .dropdown-menu-custom { display: none; }
    .navbar-collapse, .navbar-nav { display: none !important; }
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    position: relative;
}
.table-responsive table {
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}
th.nombre-descripcion,
td.nombre-descripcion {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
    box-shadow: 2px 0 5px -2px #ccc;
    /* Opcional: mejora visual */
}
thead th.nombre-descripcion {
    z-index: 3;
}
/* Opcional: para que la cabecera de días también quede fija arriba */
thead th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 1;
}

.cabecera-tabla {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}



/* Responsive botones de monitor para pantallas pequeñas */
@media (max-width: 995px) {
    .nav-referencia-estados {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .nav-meses {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .btn-mes-navegacion {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 0 !important;
        text-align: center;
        width: 100%;
        max-width: 300px;
    }
    .cabecera-tabla {
        flex-direction: column;
        align-items: center;
    }
}

/* Modal de envío de email */
#miModal.modal {
    z-index: 9999 !important;
}

#miModal .modal-backdrop {
    z-index: 9998 !important;
}

#miModal .modal-dialog {
    z-index: 10000 !important;
}

#miModal .modal-content {
    z-index: 10001 !important;
    pointer-events: auto !important;
}

#miModal .modal-header,
#miModal .modal-body,
#miModal .modal-footer {
    pointer-events: auto !important;
}

#miModal button,
#miModal input,
#miModal textarea,
#miModal select {
    pointer-events: auto !important;
}

/* Asegurar que el modal sea clickeable */
.modal.show {
    pointer-events: auto !important;
}

.modal-backdrop.show {
    pointer-events: auto !important;
}