:root {
    /* Colores para el modo claro */

    --color-borde: #ccc; /* Color de los bordes */
    --color-fondo: #fff; /* Fondo del footer */
    --color-texto-title: #131313; /* Color del texto */
    --color-fondo-footer: #f8f9fa; /* Fondo del footer */
    --color-texto-footer: #555; /* Texto en el footer */
    --color-enlace-footer: #007bff; /* Enlaces en el footer */
    --color-enlace-hover-footer: #0056b3; /* Color del enlace al pasar el mouse */
    --color-checkbox: #ccc; /* Color del checkbox */
    --color-texto-correo: #111111;
    
    /* Colores para el modo oscuro */
    --color-btn-oscuro: #222;
    --color-fondo-oscuro: #333;
    --color-texto-oscuro: #e0e0e0;
    --color-borde-oscuro: #e0e0e0;
    --color-texto-title-oscuro: #f3f3f3;
    --color-fondo-footer-oscuro: #222;
    --color-texto-footer-oscuro: #ccc;
    --color-enlace-footer-oscuro: #66c7ff;
    --color-enlace-hover-footer-oscuro: #3399ff;
    --color-checkbox-oscuro: #666;
}

body, main{
    background-color: var(--color-fondo);
}

[data-theme="dark"] {
    /* Colores para el modo oscuro */
    --color-fondo: var(--color-fondo-oscuro);
    --color-texto: var(--color-texto-oscuro);
    --color-borde: var(--color-borde-oscuro);
    --color-boton: var(--color-btn-oscuro);
    --color-texto-title: var(--color-texto-title-oscuro);
    --color-fondo-footer: var(--color-fondo-footer-oscuro);
    --color-texto-footer: var(--color-texto-footer-oscuro);
    --color-enlace-footer: var(--color-enlace-footer-oscuro);
    --color-enlace-hover-footer: var(--color-enlace-hover-footer-oscuro);
    --color-checkbox: var(--color-checkbox-oscuro);
    --color-texto-correo: var(--color-texto-oscuro)
}

.text-dark{
    color: var(--color-texto-correo) !important;
}

.btn{
    background-color: var(--color-btn);
    border-color: var(--color-borde);
    color: var(--color-texto);
}

.navbar {
    color: var(--color-texto) !important;
    background-color: var(--color-fondo-footer) !important;
}

.txt-navbar{
    color: var(--color-texto) !important;
}

.cont-main {
    height: 100%;
}

.cont-title{
    display: flex;
    align-items: center;
    justify-content: center;
}

.txt-title{
    font-size: 40px;
    margin: 35px;
    margin-bottom: -5px;
    color: var(--color-texto-title);
}

.cont-cajas {
    padding: 20px 150px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.inputs {
    height: 100px;
    width: 85%;
    border: none;
    outline: none;
    font-size: 45px;
    border-bottom: 1px solid var(--color-borde);
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

.porcentajes {
    font-size: 35px;
    border: none;
}

.cont-inputs {
    width: 200px;
    margin: 45px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-borde);
    border-radius: 7px;
    align-items: center;
    justify-content: center;
}

.cont-main-resultado {
    height: 100%;
}

.cont-resultados {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.cont-resultado {
    width: 200px;
    margin: 45px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-borde);
    border-radius: 7px;
    align-items: center;
    justify-content: center;
}

.resultado {
    height: 150px;
    width: 85%;
    font-size: 60px;
    border: none;
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

.logo{
    color: var(--color-texto);
}

.idioma {
    border: 1px solid #9b9b9b;
    padding: 10px;
    border-radius: 7px;
}

.boton-calcular {
    height: 45px;
    width: 150px;
}

.cont-nav-porcentaje {
    display: flex;
    flex-direction: row;
}

/* Aplica un scroll al dropdown-menu */
#notasDropdown {
    max-height: 200px;
    overflow-y: auto;
}

#notasDropdown::-webkit-scrollbar {
    width: 8px;
}

#notasDropdown::-webkit-scrollbar-thumb {
    background-color: var(--color-borde);
    border-radius: 4px;
}

#notasDropdown::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

input[type="checkbox"]:checked {
    accent-color: var(--color-checkbox);
}

#footer {
    bottom: 0;
    width: 100%;
    padding: 20px 0;
    background-color: var(--color-fondo-footer) !important;
}

#footer p {
    color: var(--color-texto-footer) !important;
    font-size: 14px;
}

#footer a {
    text-decoration: none;
    color: var(--color-enlace-footer);
}

#footer a:hover {
    color: var(--color-enlace-hover-footer);
}

@media (max-width: 768px) {

    .cont-cajas {
        padding: 20px 20px;
    }

    .cont-resultados {
        padding: 20px 20px;
    }

    .cont-resultado {
        width: 100%;
        margin: 20px;
    }

    .cont-inputs {
        width: 100%;
        margin: 20px;
    }

    .inputs {
        width: 100%;
    }

    .resultado {
        width: 100%;
    }

    .cont-title {
        padding: 20px;
    }

    .txt-title {
        font-size: 30px;
    }

    .cont-main {
        padding: 20px;
    }

    .cont-main-resultado {
        padding: 20px;
    }

    .cont-nav-porcentaje {
        flex-direction: column;
    }

    .boton-calcular {
        width: 100%;
    }

    .cont-resultado {
        width: 100%;
    }

    .cont-inputs {
        width: 100%;
    }

    .inputs {
        width: 100%;
    }

    .resultado {
        width: 100%;
    }

    .cont-cajas {
        padding: 20px 20px;
    }

    .cont-resultados {
        padding: 20px 20px;
    }

    .cont-resultado {
        width: 100%;
        margin: 20px;
    }

    .cont-inputs {
        width: 100%;
        margin: 20px;
    }

    .inputs {
        width: 100%;
    }

    .resultado {
        width: 100%;
    }

    .cont-title {
        padding: 20px;
    }

    .txt-title {
        font-size: 30px;
    }

    .cont-main {
        padding: 20px;
    }

    .cont-main-resultado {
        padding: 20px;
    }

    .cont-nav-porcentaje {
        flex-direction: column;
    }

    .boton-calcular {
        width: 100%;
    }

    .cont-resultado {
        width: 100%;
    }

    .cont-inputs {
        width: 100%;
    }

    .inputs {
        width: 100%;
    }

    .resultado {
        width: 100%;
    }

    .cont-cajas {
        padding: 20px 20px;
    }
}