styles.css

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita el desbordamiento horizontal */
}

#login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

#progress-container {
    display: none; /* Se oculta inicialmente y se muestra después del login */
    width: 100%;
    background-color: #ddd;
    position: relative; /* Posicionamiento relativo para los elementos internos */
    margin: 0; /* Elimina el margen */
    padding: 0; /* Elimina el padding */
}

#progress-bar {
    height: 15px; /* Ajusta la altura de la barra */
    background-color: #4CAF50; /* Color inicial de la barra */
    transition: width 1s; /* Suaviza la transición de la barra */
    color: white; /* Color del texto dentro de la barra */
    display: flex; /* Permite la alineación de elementos internos */
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    font-size: 12px; /* Ajusta esto según sea necesario para que encaje en 15px de alto */
    white-space: nowrap; /* Asegura que el texto no se envuelva a una nueva línea */
}

#progress-percentage {
    padding: 0 5px; /* Espacio alrededor del texto dentro de la barra */
}

#sampleRequestButton {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

/* Asegura que #events también se oculta inicialmente si es necesario */
#events {
    display: none; /* O manejarlo en JS según sea necesario */
}