.fondo-p {
    background-color: #435C58;
}

/*
table.calendar td {
    width: 100px;       
    height: 100px;        
    padding: 0;
    vertical-align: center;
}*/

table.calendar {
    table-layout: fixed;  /* hace que todas las columnas tengan el mismo ancho */
}

table.calendar {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    table-layout: fixed; /* columnas iguales */
}

table.calendar td {
    height: 100px;  /* altura fija */
    padding: 5px;
    vertical-align: top;
    border: 5px solid white;
    background-color: #f1f1f1;
    transition: all 0.5s ease; /* <<< transición suave */
}

table.calendar td:hover {
    background-color: #ebebeb;
    color: #222 !important;
}

th {
    padding: 10px;
    color: #fff !important;
}

.domingo {
    color: #c00000 !important;
    background-color: #FAEDEE !important;
    font-weight: none;
}

.festivo {
    color: #b00000 !important;
    background-color: #FAEDEE !important;
    font-weight: none;

}

.hoy {
    background-color: #D0F5E5 !important;
    font-weight: none;
    font-size: 1.5rem;
    color: #2D9ED2 !important;
}

.festivo-nombre {
    font-weight: none;
        font-size: .7rem !important;
}




.icono {
    width: 8px;
    height: 8px;
    border-radius: 0%;
    display: inline-block;
    margin-right: 4px;
}
.icono-rojo { background-color: #ff4d4d; }
.icono-amarillo { background-color: #ffd633; }
.icono-verde { background-color: #4caf50; }


.apunte-texto.post-amarillo {
    background-color: #fffa9e !important;
}

.apunte-texto.post-rojo {
    background-color: #ffb3b3 !important;
}

.apunte-texto.post-verde {
    background-color: #c8f7c5 !important;
}


.apunte-texto {
    padding: 6px 7px;
    font-size: 0.7rem;
    width: fit-content;
    max-width: 250px;
    border-radius: 4px;
    line-height: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    position: relative;
    margin: 5px 0;
    transform: rotate(-2deg);        /* ligero giro para verse más real */
}

/* Efecto de doblez en la esquina */
.apunte-texto::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 12px solid rgba(0,0,0,0.15);
    border-right: 12px solid transparent;

}

.ic-del {
    font-size: 0.8rem !important;
    transform: rotate(-2deg); 
}

.ic-del:hover {
    color: red;
}


    /* Contenedor de fondo con overlay oscuro */
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial, sans-serif;
    }

    .bg-container {
        position: relative;
        height: 100vh;
        /*background: url('../img/fondo.jpg') no-repeat center center;*/
        background-size: cover;
    }

    /* Overlay oscuro */
    .bg-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6); /* Ajusta la opacidad si quieres más o menos oscuro */
        z-index: 1;
    }

    /* Formulario centrado */
    .login-form {
        position: relative;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.85);
        padding: 30px;
        border-radius: 0px;
        box-shadow: 0 0 15px rgba(0,0,0,0.3);
        width: 100%;
        max-width: 400px;
        margin: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    .login-form h3 {
        text-align: center;
        margin-bottom: 20px;
    }

    .login-form a {
        display: block;
        text-align: center;
        margin-top: 15px;
        color: #007bff;
    }

    .login-form a:hover {
        text-decoration: none;
        color: #0056b3;
    }