:root {
    --fondo-pagina: #1b2838;
    --fondo-panel: #16202d;
    --fondo-input: #e7edf9;
    --fondo-input-hover: #c5dff5;
    --borde: #c5dff5;
    --borde-panel: #2c3e50;
    --borde-hover: #0d4a82;
    --texto: #042C53;
    --texto-suave: #7a97b4;
    --texto-link: #c5dff5;
    --placeholder: #4a6c8c;
}

body.dark {
    --fondo-pagina: #0a0f15;
    --fondo-panel: #070b10;
    --fondo-input: #16202b;
    --fondo-input-hover: #1d2a38;
    --borde: #2a3a4d;
    --borde-panel: #1c2733;
    --borde-hover: #4d94d6;
    --texto: #e6eef8;
    --texto-suave: #8aa4bf;
    --texto-link: #7db4e6;
    --placeholder: #7f9bb8;
}

* {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

body {
    background: var(--fondo-pagina);
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.columna-login {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

.contenido-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.login {
    width: 100%;
    text-align: center;
}

.hero {
    display: none;
}

.logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
}

.logos img {
    height: 60px;
}

h1 {
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 24px;
}

.login label {
    display: block;
    text-align: left;
    font-size: 12px;
    color: var(--texto-suave);
    margin-bottom: 5px;
}

.login input,
.login button {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 13px;
    border-radius: 6px;
    border: 1.5px solid var(--borde);
    margin-bottom: 12px;
}

.login input {
    color: var(--texto);
    background: var(--fondo-input);
}

.login input[type="hidden"] {
    display: none;
}

.login input::placeholder {
    color: var(--placeholder);
    opacity: 1;
}

.login button {
    color: var(--texto);
    background: var(--fondo-input);
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}

.login button:hover,
.btn-modo:hover {
    background: var(--fondo-input-hover);
    border-color: var(--borde-hover);
}

.recuperar {
    margin-top: 20px;
    font-size: 12px;
    color: var(--texto-suave);
}

.recuperar a {
    color: var(--texto-link);
}

footer {
    background: var(--fondo-panel);
    color: var(--texto-suave);
    text-align: center;
    padding: 14px;
    font-size: 11px;
}

@media (min-width: 768px) {
    body {
        flex-direction: row;
        overflow: hidden;
    }

    .columna-login {
        width: 40%;
        height: 100vh;
        border-right: 2px solid var(--borde-panel);
        justify-content: space-between;
    }

    .contenido-login {
        height: 100%;
        align-items: center;
    }

    .hero {
        display: block;
        width: 60%;
        height: 100vh;
        background-image: url('../imagenes/iti_hero.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .hero img {
        display: none;
    }
}

@media (min-width: 992px) {
    .columna-login {
        width: 25%;
    }

    .hero {
        width: 75%;
    }
}

.btn-modo {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fondo-input);
    color: var(--texto);
    border: 1.5px solid var(--borde);
    border-radius: 50%;
    cursor: pointer;
}

.btn-modo svg {
    width: 20px;
    height: 20px;
}

.btn-modo .sol {
    display: none;
}

body.dark .btn-modo .sol {
    display: block;
}

body.dark .btn-modo .luna {
    display: none;
}

.modal {
    --primario: #1b2838;
    --primario-claro: #E6F1FB;
    --primario-borde: #c5dff5;
    --primario-texto: #ffffff;
    --primario-activo: #16202d;
    --texto-principal: #042C53;
}

body.dark .modal {
    --primario: #0d141c;
    --primario-claro: #223044;
    --primario-borde: #2f3f52;
    --primario-texto: #ffffff;
    --primario-activo: #18222f;
    --texto-principal: #e6eef8;
    color-scheme: dark;
    --bs-body-bg: #1a2330;
    --bs-body-color: #c8d5e3;
    --bs-secondary-bg: #223044;
    --bs-border-color: #2f3f52;
}

html {
    font-size: 13px;
}

.modal-content {
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

.modal-header {
    background: var(--primario);
    border-bottom: none;
    border-radius: 4px;
}

.modal-title {
    color: var(--primario-texto);
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-footer {
    border-top: 1px solid var(--primario-borde);
}

.modal-footer .btn-secondary {
    background: var(--primario-claro);
    color: var(--texto-principal);
    border: 1px solid var(--primario-borde);
}

.modal-footer .btn-secondary:hover {
    background: var(--primario-borde);
}

.modal-footer .btn-primary {
    background: var(--primario);
    border: none;
}

.modal-footer .btn-primary:hover {
    background: var(--primario-activo);
}