/* Estilos generales */
body {
    background-color: #121212;
    color: #ffffff;
    font-family: Arial, sans-serif;
    margin: 0;
    overflow-y: auto; /* Permitir scroll vertical */
}

/* Adjust container width */
.container {
    text-align: center; /* Centra el texto del contenedor */
    max-width: 600px; /* Ajustar el ancho máximo del contenedor */
    margin: 0 auto; /* Centrar el contenido */
    padding: 20px;
}

/* Add spacing between form fields */
.form-group {
    margin-bottom: 20px;
}

/* Títulos */
h1, h2 {
    margin-bottom: 20px;
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
    margin-top: 30px;
}

/* Grilla */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-row {
    display: contents; /* Deja a los hijos como si fueran parte del grid */
}

/* Asegurar consistencia entre todos los elementos dentro de la misma fila */
.grid-row .grid div {
    display: flex;
    flex-direction: column; /* Alinear etiquetas encima del input/select */
    align-items: center; /* Centrar los elementos */
    justify-content: center; /* Centrar los elementos verticalmente */
    margin: 5px; /* Espaciado entre columnas */
}

/* Labels styling */
label {
    font-size: 1.2em; /* Aumentar tamaño de los labels */
    margin-bottom: 10px; /* Separación con los inputs */
    display: block; /* Asegura que estén encima de los campos */
    text-align: center; /* Alinea el texto de los labels */
}


/* Formularios centrados */
input[type="date"],
input[type="file"],
button {
    display: block; /* Asegura que los campos estén en su propia línea */
    margin: 0 auto; /* Centra los campos */
    text-align: center; /* Centra el texto dentro de los campos */
    font-size: 1.2em;
    padding: 15px;
    width: 100%; /* Mantén el ancho completo */
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* Submit button */
button.btn {
    background-color: #1db954;
    color: white;
    font-size: 1.2em; /* Aumentar tamaño del botón */
    padding: 15px 30px; /* Más espacio interno */
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
    text-align: center;
}

button.btn:hover {
    background-color: #1aa34a;
}


/* Estilo para el botón */
.btn {
    background-color: #1db954;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.btn:hover {
    background-color: #1aa34a;
}

/* Logo de la empresa */
.logo {
    width: 200px;
    margin: 20px auto; /* Centrar el logo */
    display: block; /* Asegurarse de que sea un bloque */
    position: relative; /* Permitir que el logo fluya con el contenido */
}

/* Spinner */
#spinner {
    display: none; /* Oculto por defecto */
    text-align: center;
}

.css-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3); /* Color semitransparente */
    border-top: 4px solid white; /* Color de la animación */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Output */
#output {
    margin-top: 20px;
    padding: 15px;
    background-color: #1e1e1e;
    color: #ffffff;
    font-family: monospace;
    white-space: pre-wrap;
    border-radius: 5px;
}

/* === Estilos de login === */
/* Ajuste del cuerpo para el login */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #121212;
    color: white;
    font-family: Arial, sans-serif;
}

/* Contenedor del login */
.login-container {
    margin: 0 auto; /* Centrar horizontalmente */
    width: 100%;
    max-width: 400px;
    padding: 30px;
    background-color: #1e1e1e;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    box-sizing: border-box; /* Incluir padding en el ancho */
    text-align: center; /* Centrar contenido interno */
}

/* Título del login */
.login-container h1 {
    margin-bottom: 20px;
    font-size: 1.8em;
    color: #ffffff;
    text-align: center; /* Asegurar centrado del título */
}

/* Título */
.login-container h2 {
    margin-bottom: 20px;
    font-size: 1.8em;
}


/* Inputs del formulario de login */
.login-container input[type="email"],
.login-container input[type="password"] {
    width: calc(100% - 20px); /* Espacio igual en ambos lados */
    padding: 10px;
    margin: 10px auto; /* Centrar en el eje horizontal */
    display: block; /* Asegurar que se comporten como bloque */
    border: 1px solid #444;
    border-radius: 5px;
    background-color: #2b2b2b;
    color: white;
    font-size: 1em;
    box-sizing: border-box; /* Incluir padding y borde en el ancho */
}
/* Botón del formulario */
.login-container .btn {
    width: calc(100% - 20px); /* Mismo cálculo de ancho que los inputs */
    padding: 10px;
    background-color: #1db954;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Espacio superior */
    text-align: center; /* Centrar texto del botón */
    box-sizing: border-box; /* Incluir el padding y el borde en el ancho */
}
}

.login-container .btn:hover {
    background-color: #1aa34a;
}

.logout-container {
    text-align: right; /* Alinear el botón a la derecha */
    margin: 10px 20px; /* Espaciado alrededor del contenedor */
    position: absolute; /* Asegura que esté encima */
    top: 0; /* Fija el botón en la parte superior */
    right: 0; /* Fija el botón en la esquina derecha */
}


/* Botón de logout */
.logout-container .btn-logout {
    background-color: #ff4d4d; /* Color rojo para logout */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.logout-container .btn-logout:hover {
    background-color: #ff1a1a;
}

/* Set the dropdown to have a white background with black text */
select {
    color: grey; /* Default text color */
    background-color: white; /* White background for dropdown */
}

/* Ensure selected options appear in black */
select:valid {
    color: black; /* Black text for selected options */
}