/* General */
html, body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    width: 100%; /* Cambia a 100% para evitar problemas */
    height: auto; /* Cambia a auto para permitir el contenido de altura dinámica */
    overflow: auto; /* Habilita el scroll si el contenido lo requiere */
    background-color: #f4f4f9;
    color: #333;
    text-align: center;
}


/* Encabezado */
header.encabezado {
    background-color: #004080; /* Azul empresarial */
    color: #fff;
    padding: 40px 20px; /* Más espacio alrededor */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

header.encabezado .logo {
    max-height: 100px; /* Logotipo grande pero proporcional */
    max-width: 200px;
    width: auto; /* Mantiene proporción */
    height: auto;
    margin: 0 auto; /* Centrado */
}

header.encabezado .titulo {
    font-size: 18px; /* Tamaño más pequeño para el título */
    font-weight: normal; /* Menos énfasis */
    margin-top: 10px;
}

/* Contenedor principal */
.contenedor {
    margin: 30px auto;
    padding: 30px;
    max-width: 800px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Botones */
button {
    background-color: #004080; /* Azul empresarial */
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 20px 0; /* Mayor altura */
    font-size: 20px; /* Texto más grande */
    cursor: pointer;
    width: 100%; /* Ocupa todo el ancho */
    transition: background-color 0.3s ease;
    margin: 20px 0;
    text-transform: uppercase; /* Letras en mayúsculas */
    font-weight: bold; /* Resalta el texto */
}

button:hover {
    background-color: #002850; /* Azul más oscuro */
}
/* Estilo para botones deshabilitados */
button:disabled {
    background-color: #d3d3d3; /* Gris claro */
    color: #aaa; /* Texto gris más claro */
    cursor: not-allowed; /* Cambia el cursor */
    opacity: 0.6; /* Hace que parezca desactivado */
}
/* Inputs y Textareas */
input, textarea {
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

textarea {
    resize: none;
    height: 100px; /* Altura cómoda */
}

/* Detalle de registro */
.detalle-registro {
    background-color: #e6f0ff;
    border: 1px solid #004080;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
}

/* Mensajes de estado */
.mensaje-estado {
    background-color: #d9edf7;
    color: #31708f;
    border: 1px solid #bce8f1;
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}

/* Indicador de carga inicialmente oculto */
#cargando {
    display: none; /* Oculto por defecto */
    flex-direction: row; /* Mantén alineación horizontal para los puntos */
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: 100px; /* Ajusta según sea necesario */
    height: 30px;
}

/* Clase para mostrar el indicador */
#cargando.activo {
    display: flex; /* Lo muestra al aplicar la clase activo */
}

/* Puntos de la animación */
#cargando span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #09f; /* Color principal */
    border-radius: 50%; /* Hace que los puntos sean redondos */
    animation: bounce 1.5s infinite ease-in-out;
}

#cargando span:nth-child(1) {
    animation-delay: 0s;
}

#cargando span:nth-child(2) {
    animation-delay: 0.2s;
}

#cargando span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Animación: Rebote */
@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}





/* Pantalla blanca de fondo */
#pantalla-blanca {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 9999; /* 🔥 Justo debajo del círculo de carga */
    pointer-events: none;
    display: block; /* 🔥 Se mantiene presente pero invisible hasta activación */
}

/* Activar la pantalla blanca */
#pantalla-blanca.activo {
    opacity: 1;
    pointer-events: none; /* Asegura que no bloquea interacciones */
}







#calendario-container {
    display: none; /* Por defecto, oculto */
}
#calendario-container.visible {
    display: block !important; /* Visible cuando se le aplica la clase */
}

.titulo-calendario {
    font-size: 22px;
    font-weight: bold;
    color: #004080; /* Azul empresarial */
    margin-bottom: 20px; /* Espaciado debajo del título */
    text-align: center; /* Centrado */
}

/* Mensaje emergente */
.mensaje-emergente.mostrar {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.mensaje-emergente.oculto {
    opacity: 0;
}

.mensaje-offline {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: yellow;
    color: black;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Asegura que esté sobre otros elementos */
}

.mensaje-Alta {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(252, 6, 6);
    color: black;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Asegura que esté sobre otros elementos */
}