.btnPlanificacion {
    cursor: pointer;
}

.color-box {
    width: 30px;
    height: 20px;
    border: 1px solid #ccc;
    display: inline-block;
    margin-right: 5px;
}

.imagen.marcado {
    border: 2px solid #00b34e; /* Cambia el borde al color deseado */
    background-color: rgba(0, 123, 255, 0.1); /* Fondo sutil */
}

    .nav-pills .nav-link {
        border: 2px solid #00b34e; /* Borde azul */
        border-radius: 8px; /* Bordes redondeados */
        padding: 10px 15px; /* Espaciado interno */
        /*font-weight: bold;  Texto más destacado */
        transition: all 0.3s ease-in-out;
    }

    /* Color de fondo diferente para los tabs inactivos */
    .nav-pills .nav-link:not(.active) {
        /* background-color: #f8f9fa; Color gris claro */
        color: #00b34e; /* Texto azul */
    }

    /* Efecto hover */
    .nav-pills .nav-link:not(.active):hover {
        background-color: #e9ecef; /* Un poco más oscuro */
    }

    /* Tab activo */
    .nav-pills .nav-link.active {
        background-color: #00b34e; /* Fondo azul */
        color: white; /* Texto blanco */
        border-color: #0056b3; /* Borde más oscuro */
        box-shadow: 0px 4px 6px rgba(0, 179, 78, 0.4); /* Sombra para resaltar */
    }



/* Cambiar el tamaño de la fuente para los días de la semana */
.fc .fc-col-header-cell-cushion {
    font-size: 0.6rem; /* Ajusta este valor según sea necesario */
}

/* Cambiar el tamaño de la fuente de los días del mes */
.fc .fc-daygrid-day-number {
    font-size: 0.75rem; /* Ajusta el tamaño según lo necesites */
}

.con-linea {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/* only for FullCalendar’s “wide” tooltips… */
.fc-tooltip-wide .tooltip-inner {
    max-width: 300px;   /* or whatever you like */
    white-space: normal;
    word-break: break-word;
}

.fc .fc-toolbar-title {
  text-transform: lowercase !important;
}
/* sólo la primera letra de todo el bloque en mayúscula */
.fc .fc-toolbar-title::first-letter {
  text-transform: uppercase;
}

.divider-tm {
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin: 1rem 0;
}

/* Reglas comunes para ambas variantes */
.nav-pills-empleados .nav-link,
.nav-pills-empleados-empresa .nav-link {
    border: 0px solid #1e9ec7;
    border-radius: 8px;
    padding: 10px 15px;
    /*font-weight: bold;*/
    transition: all 0.3s ease-in-out;
}

.nav-pills-empleados .nav-link.active,
.nav-pills-empleados-empresa .nav-link.active {
    background-color: #00b34e;
    color: #1e9ec7;
    border-color: #0056b3;
    box-shadow: 0px 4px 6px rgba(30, 158, 199, 0.4) !important;
}

ul.nav.nav-pills-empleados .nav-link:not(.active):hover,
ul.nav.nav-pills-empleados-empresa .nav-link:not(.active):hover {
    background-color: #e9ecef !important;
    color: #9495a2 !important;
}

/* Solo cambia el fondo de los no activos */
.nav-pills-empleados .nav-link:not(.active) {
    background-color: transparent;
    color: #1e9ec7;
}
.nav-pills-empleados-empresa .nav-link:not(.active) {
    background-color: #FFF;
    color: #1e9ec7;
}

.table{
        font-size: 0.8rem;
}

/* NOTIFICACIONES DESKTOP */
    .collapse {
        visibility: visible; /* pongo esto para el acordeon de notificaciones de usuario */
    }

    /* 1) Desactiva el comportamiento por defecto (flex-shrink, margen, etc.) */
    .accordion-button::after {
        flex-shrink: 0 !important;
        margin-left: 0 !important;
        content: var(--bs-accordion-btn-icon) !important; /* dejamos el SVG */

        /* 2) lo convertimos en absoluto */
        position: absolute;
        top: 0.75rem;    /* ajusta para que quede centrado verticalmente */
        right: 1rem;     /* separación del borde derecho */

        /* quizá quieras ajustarle tamaño */
        width: 1rem;
        height: 1rem;

        /* y evitar que se repita o redimensione mal */
        background-size: contain !important;
    }

    /* Y al contenedor del botón le damos un padding-right para que no lo solape */
    .accordion-button {
        position: relative;
        padding-right: 3rem; /* deja hueco suficiente para el icono */
    }
/* NOTIFICACIONES DESKTOP */


@media screen and (min-width: 576px) and (max-width: 992px)  and (orientation: landscape) {
    #empleadosDialogo-modal .modal-dialog {
        max-width: 95% !important;
        width: 95% !important;
        margin: auto;
    }
}