styles.css

/* Estilo general del body */
body {
    background-color: #1e1e1e; /* Color de fondo oscuro */
    color: #e0e0e0; /* Color de texto claro */
    font-family: 'Fira Code', monospace; /* Fuente Fira Code */
    margin: 0;
    padding: 20px;
}

.titulo {
    text-align: center;
    font-size: 1.5rem; /* Tamaño pequeño */
    color: #ffffff; /* Color blanco para modo oscuro */
    margin-bottom: 20px; /* Espacio debajo del título */
    font-family: 'Fira Code', monospace; /* Fuente Fira Code */
}

/* Contenedor principal */
.container {
    max-width: 800px;
    margin: auto;
    border-radius: 25px;
    background: linear-gradient(315deg, #1b1b1b, #202020);
    box-shadow:  -6px -6px 13px #0c0c0c,
                 6px 6px 13px #303030;
}

/* Estilo para la lista final */
#lista-final {
    white-space: pre-wrap; /* Mantiene el formato de espacio en blanco */
    padding-right: 15px;
    margin-right: 15px;
    margin-top: 15px;
    font-size: 15px;
    border-radius: 25px;
    background: linear-gradient(315deg, #1b1b1b, #202020);
    box-shadow:  -6px -6px 13px #0c0c0c,
                 6px 6px 13px #303030;
}

/* Botones */
button {
    background-color: #7538ca; /* Color del botón */
    color: #e0e0e0; /* Color del texto del botón */
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    width: 100px;
    transition: background-color 0.3s ease; /* Transición suave */
    margin-right: 6px; /* Espacio entre botones */
    margin-top: 12px; /* Espacio encima de los botones bajo los factores */
    font-weight: bold;

}

#ICO {
    padding-top: 50px;
}

.ICO {
    background-color: #388947;
}

#NotSoSecretContainer {
    padding-top: 50px;
}

.NSS {
    background-color:#ce9523
}

button:hover {
    background-color: #151515; /* Color al pasar el mouse */
}

.opciones-lista {
    list-style-type: none; /* Elimina viñetas */
    padding: 0; /* Elimina el padding */
    margin: 0; /* Elimina el margen */
    font-size: small;
    font-weight: bold;
}

/* Efecto hover para las opciones */
.opciones-lista .opcion:hover {
    background-color: #575757; /* Color al pasar el mouse */
}

/* Estilo general para el contenedor */
.container {
    display: flex;
    justify-content: space-between; /* Espacio entre columnas */
    align-items: flex-start; /* Alinear las columnas al inicio */
    height: 590px; /* Altura completa de la vista */
    padding: 20px; /* Espaciado interno */
    max-width: 1100px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
}

#calendario-column {
    flex: 0 0 20%;
}

#opciones-column {
    margin-top: 15px;
    flex: 0 0 20%;
    max-height: 570px;
    overflow: scroll;
    align-content: center;
}

#lista-column {
    flex: 0 0 350px;
    text-align:start
}

/* Estilo para el calendario */
#calendario {
    width: 90%; /* Ancho completo */
    padding: 10px;
    border-radius: 15px;
    border: 1px solid #2a2a2a; /* Bordes */
    background: #2a2a2a; /* Fondo del campo */
    color: #e0e0e0; /* Color de texto */

    padding-right: 25;
    margin-left: 15px;
    margin-top: 15px;
}

#lista-final {
    white-space: pre-wrap; /* Mantiene el formato de espacio en blanco */
    padding: 15px;
    border-radius: 25px;
    margin-top: 20px;
    background-color: #2a2a2a; /* Fondo de la lista */
    font-weight: bold;
}

/* Estilo para cada opción */
.opciones-lista .opcion {
    display: block; /* Cada opción en una nueva línea */
    background-color: #3a3a3a; /* Fondo de cada opción */
    color: #ffffff; /* Color de texto de las opciones */
    padding: 10px; /* Espaciado interno */
    border-radius: 25px; /* Bordes redondeados */
    margin: 5px 0; /* Margen entre opciones */
    text-align: center; /* Centra el texto */
    cursor: pointer; /* Cambia el cursor al pasar sobre la opción */
    transition: background-color 0.3s ease; /* Transición suave */
    width: 150px;
}