/* =========================================
   LOGIN
   Diseño blanco / azul
   Contorno animado
   ========================================= */

:root {
    --color-fondo: #f5f9ff;
    --color-blanco: #ffffff;

    --color-azul: #1565c0;
    --color-azul-claro: #42a5f5;
    --color-azul-oscuro: #0d47a1;

    --color-texto: #1f2937;
    --color-secundario: #64748b;
    --color-borde: #b8c7d9;

    --color-error: #c62828;
}


/* =========================================
   CONFIGURACIÓN GENERAL
   ========================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
}


/* =========================================
   CONTENEDOR PRINCIPAL
   ========================================= */

.login-container {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;
}


/* =========================================
   CAJA DEL LOGIN
   ========================================= */

.login-box {
    width: 100%;
    max-width: 420px;

    padding: 40px;

    background: var(--color-blanco);

    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);
}


/* =========================================
   IMAGEN TEMPORAL DEL LOGO
   ========================================= */

.temporary-logo {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 20px;
}

.temporary-logo img {
    display: block;

    width: auto;
    max-width: 90px;
    max-height: 45px;

    height: auto;

    object-fit: contain;
}


/* =========================================
   ENCABEZADO
   ========================================= */

.login-header {
    text-align: center;

    margin-bottom: 30px;
}

.login-header h1 {
    color: var(--color-azul-oscuro);

    font-size: 28px;

    margin-bottom: 8px;
}

.login-header p {
    color: var(--color-secundario);

    font-size: 15px;
}


/* =========================================
   GRUPOS DE CAMPOS
   ========================================= */

.input-group {
    margin-bottom: 24px;
}

.input-group label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 600;
}


/* =========================================
   CONTENEDOR DEL CAMPO
   ========================================= */

.input-frame {
    position: relative;

    width: 100%;
    height: 50px;

    border: 2px solid var(--color-borde);

    border-radius: 6px;

    background: var(--color-blanco);

    overflow: hidden;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================
   INPUT
   ========================================= */

.input-frame input {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    padding: 0 14px;

    border: none;
    outline: none;

    background: transparent;

    font-size: 16px;

    color: var(--color-texto);
}


/* =========================================
   ESPACIO PARA BOTÓN DE CONTRASEÑA
   ========================================= */

#password {
    padding-right: 70px;
}


/* =========================================
   BORDE ANIMADO
   ========================================= */

.animated-border {
    position: absolute;

    /*
     * Debe quedar detrás del texto.
     */
    z-index: 1;

    inset: 0;

    pointer-events: none;

    border-radius: 6px;

    border: 2px solid transparent;

    background:
        linear-gradient(
            var(--color-blanco),
            var(--color-blanco)
        ) padding-box,

        linear-gradient(
            90deg,
            transparent 0%,
            transparent 35%,
            var(--color-azul-claro) 45%,
            var(--color-azul) 50%,
            var(--color-azul-claro) 55%,
            transparent 65%,
            transparent 100%
        ) border-box;

    background-size:
        100% 100%,
        300% 100%;

    background-position:
        0 0,
        100% 0;

    opacity: 0;
}


/* =========================================
   ACTIVACIÓN DEL CAMPO
   ========================================= */

.input-frame:focus-within {
    border-color: transparent;

    box-shadow:
        0 0 0 3px rgba(21, 101, 192, 0.08),
        0 0 15px rgba(21, 101, 192, 0.10);
}

.input-frame:focus-within .animated-border {
    opacity: 1;

    animation:
        border-run 3.5s linear infinite;
}


/* =========================================
   ANIMACIÓN DEL CONTORNO
   ========================================= */

@keyframes border-run {

    0% {
        background-position:
            0 0,
            100% 0;
    }

    25% {
        background-position:
            0 0,
            0 0;
    }

    50% {
        background-position:
            0 0,
            0 100%;
    }

    75% {
        background-position:
            0 0,
            100% 100%;
    }

    100% {
        background-position:
            0 0,
            100% 0;
    }
}


/* =========================================
   ICONO MOSTRAR / OCULTAR CONTRASEÑA
   ========================================= */

#toggle-password {
    position: absolute;

    z-index: 5;

    top: 50%;
    right: 10px;

    transform: translateY(-50%);

    width: 32px;
    height: 32px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: none;
    border-radius: 50%;

    background: transparent;

    color: var(--color-azul);

    cursor: pointer;

    padding: 0;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

#toggle-password:hover {
    color: var(--color-azul-oscuro);

    background: rgba(21, 101, 192, 0.08);
}

#toggle-password:focus {
    outline: 2px solid rgba(21, 101, 192, 0.25);
    outline-offset: 2px;
}


/* =========================================
   ICONO DEL OJO
   ========================================= */

.eye-icon {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}
/* =========================================
   BOTÓN DE LOGIN
   ========================================= */

#login-button {
    width: 100%;
    height: 48px;

    border: none;
    border-radius: 6px;

    background: var(--color-azul);

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.1s ease,
        box-shadow 0.2s ease;
}

#login-button:hover {
    background: var(--color-azul-oscuro);

    box-shadow:
        0 5px 15px rgba(13, 71, 161, 0.20);
}

#login-button:active {
    transform: scale(0.99);
}


/* =========================================
   MENSAJE
   ========================================= */

#login-message {
    min-height: 20px;

    margin-top: 15px;

    text-align: center;

    font-size: 14px;

    color: var(--color-error);
}


/* =========================================
   ADAPTACIÓN PARA CELULAR
   ========================================= */

@media (max-width: 480px) {

    .login-container {
        padding: 15px;
    }

    .login-box {
        padding: 30px 22px;

        border-radius: 10px;
    }

    .temporary-logo img {
        max-width: 90px;
        max-height: 45px;
    }

    .login-header {
        margin-bottom: 25px;
    }

    .login-header h1 {
        font-size: 24px;
    }

    .login-header p {
        font-size: 14px;
    }

    .input-frame {
        height: 48px;
    }

    .input-frame input {
        font-size: 16px;
    }

    #login-button {
        height: 48px;
    }
}


/* =========================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .animated-border {
        animation: none !important;
    }

    .input-frame,
    #login-button {
        transition: none;
    }
}