@import url('Estilo1.css');

body {
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom,#46a7b0, #60e3f0, #ffffff);
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Cambia de height a min-height para mejorar en móviles */
    display: flex;
    flex-direction: column; /* Asegura que los elementos se apilen en columna */
    align-items: center;
    justify-content: center;
}
/* Contenedor del login */
.login-container {
    width: 100%;
    max-width: 700px;
    padding: 20px;
    background-color: #ffffff; /* Fondo blanco para el formulario */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
    text-align: center;
    margin: 1vh auto;
}

.btn-container {
    display: flex;
    justify-content: space-between; /* Distribuye los botones en los extremos */
    align-items: center; /* Alinea verticalmente en caso de diferentes alturas */
    width: 100%;
    max-width: 600px; /* Ajusta según el tamaño de tu formulario */
    margin: 0 auto; /* Centra el contenedor si es necesario */
}

.btn {
    width: 100%;
    padding: 10px;
    background-color: #077a91; /* Azul más fuerte */
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.3s ease;
}

    .btn:hover {
        background-color: #075c6e; /* Azul más oscuro en hover */
    }

.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column; /* Asegura que label e input estén uno debajo del otro */
    align-items: flex-start; /* Alinea los elementos a la izquierda */
    width: 100%; /* Asegura que ocupe el ancho completo */
}

    .form-group label {
        color: #077a91; /* Azul oscuro para los textos "Usuario" y "Contraseña" */
        font-weight: bold;
        font-size: 18px;
        text-align: left; /* Alinear el texto a la izquierda */
        display: block; /* Asegura que ocupe toda la línea */
    }

/* Campos de entrada */
.form-control {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #077a91;
    border-radius: 4px;
    color: #077a91;
    font-family: Arial;
    font-size: 18px;
}





.btn1 {
    width: 100%;
    padding: 10px;
    background-color: #077a91; /* Azul más fuerte */
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
}

    .btn1:hover {
        background-color: #075c6e; /* Azul más oscuro en hover */
    }

.btn2 {
    width: 100%;
    padding: 10px;
    background-color: #349447; /* verde más fuerte */
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
}

    .btn2:hover {
        background-color: #3a6627; /* verde más oscuro en hover */
    }


.btn1, .btn2 {
    width: auto; /* Para que no ocupen todo el ancho */
    min-width: 120px; /* Puedes ajustar según tu necesidad */
}

.btn3 {
    width: 40%;
    padding: 10px;
    background-color: #077a91; /* verde más fuerte */
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
}

    .btn3:hover {
        background-color: #003366; /* verde más oscuro en hover */
    }

.footer-text {
    margin-top: 20px;
    font-size: 14px;
    color: #004A99; /* Azul corporativo */
    font-weight: bold;
    text-align: center;
    background-color: #f8f9fa; /* Color claro para destacar */
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ligera sombra */
}
/* Estilos generales para los mensajes */
.mensaje {
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: #004A99; /* Azul corporativo */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra para mejorar visibilidad */
    opacity: 0; /* Inicialmente oculto */
    text-align: center;
    width: 100%;
}

/* Mensaje desde la izquierda (Un resultado a tiempo) */
.mensaje-izquierda {
    left: -200px; /* Comienza fuera de la pantalla a la izquierda */
    bottom: 60px; /* Lo posicionamos en la parte inferior */
}

/* Mensaje desde la derecha (Hace la diferencia) */
.mensaje-derecha {
    right: -200px; /* Comienza fuera de la pantalla a la derecha */
    bottom: 30px; /* Posicionado justo debajo del primer mensaje */
}

/* Animación de entrada desde la izquierda */
@keyframes entrarIzquierda {
    0% {
        left: -200px;
        opacity: 0;
    }

    100% {
        left: 50%;
        transform: translateX(-50%);
        opacity: 1;
    }
}

/* Animación de entrada desde la derecha */
@keyframes entrarDerecha {
    0% {
        right: -200px;
        opacity: 0;
    }

    100% {
        right: 50%;
        transform: translateX(50%);
        opacity: 1;
    }
}

/* Animación de salida (opcional) */
@keyframes salirMensaje {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@media (max-width: 600px) {
    .mensaje {
        font-size: 22px; /* Aumenta más el tamaño del texto */
        font-weight: bold;
    }

    /* Ajustar posición de los mensajes */
    .mensaje-izquierda {
        bottom: 120px; /* Subir más el mensaje en móviles */
    }

    .mensaje-derecha {
        bottom: 80px;
    }

    /* Hacer el formulario más grande en móviles */
    .login-container {
        max-width: 75%; /* Ahora ocupa solo el 60% del ancho en móviles */
        padding: 30px; /* Mantiene buen espacio interno */
        margin: 2vh auto; /* Centra horizontalmente */
        margin-top: 0vh;
    }

    .form-control {
        font-size: 22px; /* Ajusta el tamaño de los inputs */
        padding: 12px;
    }

    .btn {
        font-size: 18px;
        padding: 12px;
    }

    .modern-calendar {
        max-width: 320px; /* Hace que el calendario sea más angosto */
        font-size: 12px; /* Reduce el tamaño de fuente */
    }

        .modern-calendar table {
            width: 100% !important;
        }

    .calendar-title {
        font-size: 14px;
        padding: 6px;
    }

    .calendar-header {
        font-size: 12px;
        padding: 6px;
    }

    .calendar-day {
        padding: 5px;
        font-size: 10px; /* Reduce aún más la fuente */
    }

    .calendar-nav {
        font-size: 12px;
        padding: 5px;
    }
}

@media (max-width: 600px) {
    .modern-calendar {
        max-width: 320px; /* Hace que el calendario sea más angosto */
        font-size: 12px; /* Reduce el tamaño de fuente */
    }

        .modern-calendar table {
            width: 100% !important;
        }

    .calendar-title {
        font-size: 14px;
        padding: 6px;
    }

    .calendar-header {
        font-size: 12px;
        padding: 6px;
    }

    .calendar-day {
        padding: 5px;
        font-size: 10px; /* Reduce aún más la fuente */
    }

    .calendar-nav {
        font-size: 12px;
        padding: 5px;
    }

    .calendar-today {
       /* background: #004A99;*/
        color: white;
        font-weight: bold;
        border-radius: 8px;
    }

    .botones-container {
        justify-content: space-evenly; /* Distribuye mejor en pantallas pequeñas */
    }
}




.contac {
    position: relative;
    background-color: white;
    float: left;
    top: 0px;
    left: 0px;
    width: 100%;
}

.derecha {
    float: right;
}

.izquierda {
    float: left;
}

.txtbox {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-color: dodgerblue;
    background-color: #BBE3FF;
    height: 30px;
}

.txtboxOblig {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-color: dodgerblue;
    background-color: #ffd800;
    height: 30px;
}




.txtboxb {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-color: dodgerblue;
    background-color: #BBE3FF;
    height: 30px;
}

.cmbbox {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-color: dodgerblue;
    background-color: #BBE3FF;
}

    .cmbbox:disabled {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-color: lightgrey;
        background-color: lightgrey;
    }

    .cmbbox:hover {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-color: dodgerblue;
        background-color: #59BDFF;
    }

.boton {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-color: #3366CC;
    background-color: #3366CC;
}

    .boton:disabled {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-color: lightgrey;
        background-color: lightgrey;
    }

    .boton:hover {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-color: #59BDFF;
        background-color: #59BDFF;
    }

.boton1 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-color: #BBE3FF;
    background-color: #BBE3FF;
    color: white;
}

.panel {
    background-color: gainsboro;
}

.panelRedondeado {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.grilla {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-color: dodgerblue;
    border-style: solid;
    border-width: 2px;
}

.botonRedondeado {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin: 20px;
}

/* --- Estilo general del calendario --- */
.modern-calendar {
    width: 100%; /* Ajuste perfecto dentro de .login-container */
    max-width: 600px; /* Mantiene buen tamaño en desktop */
    border: none;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    background: #ffffff;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0 auto; /* Centrado */
}

/* --- ENCABEZADO DEL MES Y AÑO --- */
.calendar-title {
    background: linear-gradient(to right, #4A90E2, #56CCF2);
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 12px;
    font-size: 18px;
}

/* --- NOMBRES DE LOS DÍAS --- */
.calendar-header {
    background: #f7f9fc;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    color: #4A4A4A;
}

/* --- ESTILO DE LOS DÍAS --- */
.calendar-day {
    text-align: center;
    padding: 12px;
    border: 1px solid #eee;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

    .calendar-day:hover {
        background: #f0f5ff;
        transform: scale(1.05);
        border-radius: 8px;
    }

/* --- BOTONES ANTERIOR/SIGUIENTE MES --- */
.calendar-nav {
    background: none;
    color: #4A90E2;
    font-weight: bold;
    padding: 8px;
    text-align: center;
    cursor: pointer;
}

    .calendar-nav:hover {
     /*   color: #007bff;*/
    }

/* --- DÍAS DE OTROS MESES (Inactivos) --- */
.calendar-other-month {
    color: #cccccc;
    opacity: 0.6;
}

/* --- DÍA SELECCIONADO --- */
.calendar-selected {
    background: #FFDD57;
    color: #333;
    font-weight: bold;
    border-radius: 8px;
    transform: scale(1.1);
}

/* --- DÍA ACTUAL (HOY) --- */
.calendar-today {
  /*  background: #4CAF50;*/
    color: black;
    font-weight: bold;
    border-radius: 8px;
}

#panBotones {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid white; /* (DEBUG) Para ver si el contenedor tiene espacio extra */
}

.botones-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start; /* Asegura que inicien alineados a la izquierda */
    align-items: flex-start; /* Asegura alineación vertical */
    border: 1px solid green; /* (DEBUG) Para ver si los botones están alineados */
}

    .botones-container > * {
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid green; /* (DEBUG) Para ver si los botones tienen espacios extra */
    }

/* Estilo de botones */
.btn-custom {
    padding: 10px 15px;
    background-color: #349447;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-family = "Arial";
    width: 150px; /* Ancho fijo para alinear mejor */
    text-align: center;
}

    .btn-custom:hover {
        background-color: #3a6627; /* verde más oscuro en hover */
    }