/* =========================================================
   PAWMED - LOGIN
   Diseño centrado con tarjeta y decoración de huellas
   (mismas clases del HTML: .pagina-login, .login-contenido,
    .encabezado-login, .login-card, .campo, .input-box, etc.)
   ========================================================= */


/* =========================================================
   FUENTE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');


/* =========================================================
   RESET
   ========================================================= */

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


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


body {
    width: 100%;
    min-height: 100vh;

    font-family: 'Poppins', sans-serif;

    background: linear-gradient(180deg, #f2faff 0%, #ffffff 45%);

    color: #24344d;

    overflow-x: hidden;
}


/* =========================================================
   CONTENEDOR GENERAL DE LA PÁGINA
   ========================================================= */

.pagina-login {

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================================
   BOTÓN VOLVER
========================================================= */

.btn-volver {
    position: fixed;

    top: 28px;
    left: 32px;

    z-index: 9999;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    height: 42px;
    padding: 0 17px;

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid #dcecf5;

    border-radius: 14px;

    color: #4b9fe3;

    font-family: 'Poppins', sans-serif;

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

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(40, 110, 150, 0.08);

    backdrop-filter: blur(8px);

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


.btn-volver i {
    font-size: 12px;

    transition:
        transform 0.25s ease;
}


.btn-volver:hover {

    background:
        linear-gradient(
            90deg,
            #63d2be,
            #4ea8f0
        );

    color: #ffffff;

    border-color: transparent;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(78, 168, 240, 0.20);
}


.btn-volver:hover i {
    transform: translateX(-3px);
}


/* =========================================================
   INDICADOR ESC
========================================================= */

.btn-volver::after {

    content: "ESC";

    margin-left: 3px;

    padding: 3px 6px;

    border-radius: 6px;

    background: #f1f8fc;

    color: #8caabd;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .5px;

    transition: 0.25s ease;
}


.btn-volver:hover::after {

    background: rgba(255,255,255,0.20);

    color: #ffffff;
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.login-contenido {

    width: 100%;

    max-width: 580px;

    margin: 0 auto;

    padding: 70px 20px 100px;

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    z-index: 5;
}


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

.encabezado-login {

    text-align: center;

    margin-bottom: 24px;
}


.encabezado-login h1 {

    margin: 0;

    font-size: 40px;

    line-height: 1.18;

    font-weight: 800;

    letter-spacing: -1.5px;

    background: linear-gradient(
        90deg,
        #348ff2 0%,
        #42aee6 50%,
        #59c8b3 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.encabezado-login p {

    margin-top: 10px;

    font-size: 13.5px;

    line-height: 1.65;

    font-weight: 400;

    color: #8092aa;
}


/* =========================================================
   TARJETA DE LOGIN
   ========================================================= */

.login-card {

    width: 400px;

    max-width: 100%;

    padding: 30px 32px 34px;

    background: rgba(255, 255, 255, 0.97);

    border: 1px solid #e5edf5;

    border-radius: 12px;

    box-shadow:
        0 14px 32px rgba(52, 99, 137, 0.13),
        0 3px 10px rgba(52, 99, 137, 0.04);

    position: relative;

    z-index: 10;
}


/* =========================================================
   CAMPOS DEL FORMULARIO
   ========================================================= */

.campo {

    width: 100%;
}


.campo + .campo {

    margin-top: 20px;
}


.campo label {

    display: block;

    margin-bottom: 7px;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 700;

    color: #263852;
}


/* =========================================================
   CAJA DE INPUT (icono + input)
   ========================================================= */

.input-box {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    height: 46px;

    padding: 0 15px;

    border: 1px solid #d8e5f1;

    border-radius: 12px;

    overflow: hidden;

    background: linear-gradient(
        90deg,
        #f9fbfe 0%,
        #f7fbff 100%
    );

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


.input-box:focus-within {

    border-color: #65adf2;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(76, 161, 238, 0.10);
}


.input-box .icono {

    width: 20px;
    height: 20px;

    margin-right: 10px;

    flex-shrink: 0;

    fill: none;

    stroke: #3f9aed;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.input-box input {

    flex: 1;

    min-width: 0;

    height: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #334963;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;
}


.input-box input::placeholder {

    color: #91a4b9;

    opacity: 1;

    font-size: 14px;
}


/* =========================================================
   BOTÓN MOSTRAR / OCULTAR CONTRASEÑA
   ========================================================= */

.mostrar-password {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 29px;

    height: 29px;

    flex-shrink: 0;

    margin-left: 6px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: #8da2b8;

    cursor: pointer;

    flex-shrink: 0;

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


.mostrar-password:hover {

    background: rgba(66, 157, 237, 0.08);

    color: #3f9aed;
}


.mostrar-password svg {

    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.mostrar-password .ojo-cerrado {

    display: none;
}


.mostrar-password.activo .ojo-abierto {

    display: none;
}


.mostrar-password.activo .ojo-cerrado {

    display: block;
}


.mostrar-password.activo {

    color: #3f9aed;
}


/* =========================================================
   OLVIDASTE CONTRASEÑA
   ========================================================= */

.forgot-password {

    width: 100%;

    text-align: right;

    margin-top: 12px;
}


.forgot-password a {

    font-size: 12px;

    font-weight: 600;

    color: #3f9aed;

    text-decoration: none;

    transition: color 0.2s ease;
}


.forgot-password a:hover {

    color: #237ac9;

    text-decoration: underline;
}


/* =========================================================
   BOTÓN INICIAR SESIÓN
   ========================================================= */

.btn-login {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    width: 100%;

    height: 46px;

    margin-top: 20px;

    border: none;

    border-radius: 23px;

    background: linear-gradient(
        90deg,
        #3997ee 0%,
        #45afe1 48%,
        #61cdb2 100%
    );

    color: #ffffff;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 14px rgba(61, 165, 225, 0.24);

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


.btn-login svg {

    width: 19px;
    height: 19px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.btn-login:hover {

    transform: translateY(-1px);

    box-shadow:
        0 9px 18px rgba(61, 165, 225, 0.30);

    filter: brightness(1.03);
}


.btn-login:active {

    transform: translateY(1px);

    box-shadow:
        0 4px 9px rgba(61, 165, 225, 0.20);
}


/* =========================================================
   SEPARADOR "o"
   ========================================================= */

.google-separador {

    width: 400px;

    max-width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 16px;

    position: relative;

    z-index: 10;
}


.google-separador::before,
.google-separador::after {

    content: "";

    flex: 1;

    height: 1px;

    background: #e5edf5;
}


.google-separador p {

    margin: 0;

    font-size: 11px;

    font-weight: 500;

    color: #9aacc0;
}


.separador-huella {

    width: 13px;
    height: 13px;

    flex-shrink: 0;

    fill: #6bb3ef;
}


/* =========================================================
   LOGIN CON GOOGLE
   ========================================================= */

.google-login {

    width: 400px;

    max-width: 100%;

    margin-top: 12px;

    display: flex;

    justify-content: center;

    position: relative;

    z-index: 10;
}


/* =========================================================
   REGISTRO
   ========================================================= */

.registro {

    text-align: center;

    margin-top: 17px;

    position: relative;

    z-index: 10;
}


.registro p {

    margin: 0 0 4px;

    font-size: 11px;

    font-weight: 400;

    color: #8092aa;
}


.registro a {

    font-size: 12px;

    font-weight: 700;

    color: #55c5b1;

    text-decoration: none;

    transition: color 0.2s ease;
}


.registro a:hover {

    color: #35aa96;

    text-decoration: underline;
}


/* =========================================================
   MANCHAS DE COLOR EN LAS ESQUINAS
   ========================================================= */

.blob {

    position: fixed;

    border-radius: 50%;

    pointer-events: none;

    user-select: none;

    z-index: -2;
}


.blob-superior-derecha {

    top: -190px;
    right: -170px;

    width: 480px;
    height: 480px;

    background: radial-gradient(
        circle at 35% 35%,
        rgba(190, 227, 248, 0.85) 0%,
        rgba(190, 227, 248, 0) 70%
    );
}


.blob-inferior-izquierda {

    bottom: -230px;
    left: -210px;

    width: 520px;
    height: 520px;

    background: radial-gradient(
        circle at 60% 40%,
        rgba(190, 227, 248, 0.8) 0%,
        rgba(190, 227, 248, 0) 70%
    );
}


.blob-inferior-derecha {

    bottom: -150px;
    right: -130px;

    width: 340px;
    height: 340px;

    background: radial-gradient(
        circle at 40% 40%,
        rgba(205, 233, 250, 0.75) 0%,
        rgba(205, 233, 250, 0) 70%
    );
}


/* =========================================================
   HUELLAS PAWMED
   ========================================================= */

.huella {

    position: fixed;

    pointer-events: none;

    user-select: none;

    z-index: 0;

    fill: rgba(92, 174, 239, 0.55);

    /* Tamaño para cuando .huella se usa con el emoji 🐾
       en vez de un <svg> (ej. recuperar_contra.php) */
    font-size: 30px;

    line-height: 1;
}


.huella-1 {

    top: 43px;
    left: 125px;

    width: 52px;
    height: 52px;

    transform: rotate(-12deg);

    opacity: 0.30;
}


.huella-2 {

    top: 82px;
    right: 70px;

    width: 42px;
    height: 42px;

    transform: rotate(18deg);

    opacity: 0.26;
}


.huella-3 {

    top: 178px;
    left: 58px;

    width: 37px;
    height: 37px;

    transform: rotate(-25deg);

    opacity: 0.22;
}


.huella-4 {

    top: 270px;
    right: 84px;

    width: 48px;
    height: 48px;

    transform: rotate(15deg);

    opacity: 0.20;
}


.huella-5 {

    top: 365px;
    left: 120px;

    width: 43px;
    height: 43px;

    transform: rotate(-18deg);

    opacity: 0.17;
}


.huella-6 {

    top: 460px;
    right: 102px;

    width: 39px;
    height: 39px;

    transform: rotate(25deg);

    opacity: 0.15;
}


.huella-7 {

    bottom: 55px;
    left: 112px;

    width: 45px;
    height: 45px;

    transform: rotate(-14deg);

    opacity: 0.12;
}


.huella-8 {

    bottom: 43px;
    right: 100px;

    width: 40px;
    height: 40px;

    transform: rotate(17deg);

    opacity: 0.10;
}


/* --- Huellas adicionales: repartidas por todo el fondo blanco,
       tamaños y posiciones variados, mismo color que las demás --- */

.huella-9 {

    top: 8%;
    left: 42%;

    width: 22px;
    height: 22px;

    transform: rotate(10deg);

    opacity: 0.16;
}


.huella-10 {

    top: 14%;
    left: 63%;

    width: 60px;
    height: 60px;

    transform: rotate(-16deg);

    opacity: 0.10;
}


.huella-11 {

    top: 24%;
    left: 8%;

    width: 26px;
    height: 26px;

    transform: rotate(22deg);

    opacity: 0.20;
}


.huella-12 {

    top: 20%;
    right: 5%;

    width: 34px;
    height: 34px;

    transform: rotate(-8deg);

    opacity: 0.14;
}


.huella-13 {

    top: 36%;
    left: 35%;

    width: 16px;
    height: 16px;

    transform: rotate(28deg);

    opacity: 0.22;
}


.huella-14 {

    top: 42%;
    right: 220px;

    width: 44px;
    height: 44px;

    transform: rotate(-20deg);

    opacity: 0.11;
}


.huella-15 {

    top: 52%;
    left: 230px;

    width: 30px;
    height: 30px;

    transform: rotate(14deg);

    opacity: 0.15;
}


.huella-16 {

    top: 58%;
    right: 38%;

    width: 20px;
    height: 20px;

    transform: rotate(-24deg);

    opacity: 0.19;
}


.huella-17 {

    top: 66%;
    left: 4%;

    width: 38px;
    height: 38px;

    transform: rotate(9deg);

    opacity: 0.12;
}


.huella-18 {

    top: 70%;
    right: 10%;

    width: 24px;
    height: 24px;

    transform: rotate(-12deg);

    opacity: 0.17;
}


.huella-19 {

    bottom: 22%;
    left: 46%;

    width: 18px;
    height: 18px;

    transform: rotate(20deg);

    opacity: 0.20;
}


.huella-20 {

    bottom: 14%;
    left: 260px;

    width: 32px;
    height: 32px;

    transform: rotate(-18deg);

    opacity: 0.10;
}


.huella-21 {

    bottom: 10%;
    right: 250px;

    width: 46px;
    height: 46px;

    transform: rotate(16deg);

    opacity: 0.09;
}


.huella-22 {

    bottom: 4%;
    left: 44%;

    width: 20px;
    height: 20px;

    transform: rotate(-10deg);

    opacity: 0.18;
}


.huella-23 {

    top: 1%;
    right: -1%;

    width: 110px;
    height: 110px;

    transform: rotate(14deg);

    opacity: 0.20;
}


.huella-24 {

    bottom: -3%;
    left: -2%;

    width: 135px;
    height: 135px;

    transform: rotate(-16deg);

    opacity: 0.18;
}


/* =========================================================
   CRUCES (signos +)
   ========================================================= */

.cruz {

    position: fixed;

    pointer-events: none;

    user-select: none;

    z-index: 0;

    width: 16px;
    height: 16px;
}


.cruz::before,
.cruz::after {

    content: "";

    position: absolute;

    background: currentColor;

    opacity: 0.28;

    border-radius: 2px;
}


.cruz::before {

    top: 50%;
    left: 0;

    width: 100%;
    height: 2.5px;

    transform: translateY(-50%);
}


.cruz::after {

    left: 50%;
    top: 0;

    width: 2.5px;
    height: 100%;

    transform: translateX(-50%);
}


.cruz-1 {

    top: 125px;
    left: 75px;

    color: #55c8b9;
}


.cruz-2 {

    top: 210px;
    right: 170px;

    color: #66aef3;
}


.cruz-3 {

    top: 355px;
    right: 155px;

    color: #55c8b9;
}


.cruz-4 {

    top: 200px;
    left: 190px;

    color: #67aef3;
}


.cruz-5 {

    bottom: 175px;
    right: 145px;

    color: #65aef2;
}


/* =========================================================
   CÍRCULOS
   ========================================================= */

.circulo {

    position: fixed;

    width: 10px;
    height: 10px;

    border: 3px solid rgba(74, 165, 239, 0.18);

    border-radius: 50%;

    pointer-events: none;

    user-select: none;

    z-index: 0;
}


.circulo-1 {

    top: 235px;
    left: 145px;
}


.circulo-2 {

    top: 335px;
    right: 165px;
}


.circulo-3 {

    top: 45px;
    right: 120px;
}


.circulo-4 {

    bottom: 140px;
    left: 175px;
}


/* =========================================================
   LÍNEAS PUNTEADAS
   ========================================================= */

.linea {

    position: fixed;

    width: 95px;
    height: 150px;

    border: 2px dashed rgba(94, 181, 239, 0.17);

    border-radius: 50%;

    pointer-events: none;

    user-select: none;

    z-index: 0;
}


.linea-izquierda {

    left: -55px;
    top: 170px;

    transform: rotate(15deg);
}


.linea-derecha {

    right: -55px;
    top: -25px;

    transform: rotate(-15deg);
}


/* =========================================================
   OLAS INFERIORES
   ========================================================= */

.ondas {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    height: 420px;

    overflow: hidden;

    pointer-events: none;

    user-select: none;

    z-index: -5;
}


.onda {

    position: absolute;

    left: 50%;

    width: 140%;
    height: 420px;

    border-radius: 50% 50% 0 0;

    transform: translateX(-50%);
}


.onda-1 {

    bottom: -355px;

    width: 140%;

    background: #eaf6ff;
}


.onda-2 {

    bottom: -330px;

    width: 132%;

    background: rgba(223, 240, 253, 0.75);
}


.onda-3 {

    bottom: -300px;

    width: 125%;

    background: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 700px) {

    .login-contenido {

        padding-top: 84px;

        padding-left: 20px;

        padding-right: 20px;
    }


    .encabezado-login h1 {

        font-size: 36px;
    }


    .login-card,
    .google-separador,
    .google-login {

        width: min(400px, 100%);
    }


    .btn-volver {

        top: 15px;

        left: 15px;
    }


    .huella {

        opacity: 0.14 !important;
    }


    .huella-1 {

        top: 75px;

        left: 45px;
    }


    .huella-2 {

        top: 110px;

        right: 30px;
    }


    .huella-3 {

        top: 270px;

        left: 15px;
    }


    .huella-4 {

        top: 350px;

        right: 15px;
    }


    .huella-5,
    .huella-6,
    .huella-7,
    .huella-8 {

        display: none;
    }


    .huella-23 {

        width: 70px;
        height: 70px;
    }


    .huella-24 {

        width: 85px;
        height: 85px;
    }


    .blob-superior-derecha,
    .blob-inferior-izquierda,
    .blob-inferior-derecha {

        transform: scale(0.6);
    }


    .huella-10,
    .huella-14,
    .huella-17,
    .huella-21 {

        width: 30px;
        height: 30px;
    }


    .huella-9,
    .huella-11,
    .huella-12,
    .huella-13,
    .huella-15,
    .huella-16,
    .huella-18,
    .huella-19,
    .huella-20,
    .huella-22 {

        opacity: 0.12 !important;
    }


    .cruz {

        width: 13px;
        height: 13px;
    }


    .cruz-1 {

        left: 30px;
    }


    .cruz-2 {

        right: 35px;
    }


    .cruz-3,
    .cruz-4,
    .cruz-5 {

        display: none;
    }
}


/* =========================================================
   CELULARES
   ========================================================= */

@media (max-width: 480px) {

    body {

        overflow-y: auto;
    }


    .btn-volver {

        top: 12px;

        left: 12px;

        padding: 8px 11px;

        font-size: 12px;
    }


    .login-contenido {

        min-height: 100vh;

        padding-top: 92px;

        padding-left: 16px;

        padding-right: 16px;

        padding-bottom: 90px;
    }


    .encabezado-login h1 {

        font-size: 27px;

        letter-spacing: -0.8px;
    }


    .encabezado-login p {

        margin-top: 8px;

        font-size: 10.5px;

        line-height: 1.55;
    }


    .login-card {

        width: 100%;

        max-width: 560px;

        margin-top: 20px;

        padding: 26px 22px 28px;

        border-radius: 14px;
    }


    .campo label {

        font-size: 11px;
    }


    .input-box {

        height: 40px;
    }


    .input-box input::placeholder {

        font-size: 10px;
    }


    .btn-login {

        height: 40px;

        font-size: 12px;
    }


    .registro {

        margin-top: 19px;
    }


    .registro p {

        font-size: 10px;
    }


    .registro a {

        font-size: 11px;
    }


    .huella {

        opacity: 0.11 !important;
    }


    .huella-1 {

        top: 120px;

        left: 20px;
    }


    .huella-2 {

        top: 175px;

        right: 15px;
    }


    .huella-3,
    .huella-4,
    .huella-5,
    .huella-6,
    .huella-7,
    .huella-8 {

        display: none;
    }


    .huella-9,
    .huella-10,
    .huella-11,
    .huella-12,
    .huella-13,
    .huella-14,
    .huella-15,
    .huella-16,
    .huella-17,
    .huella-18,
    .huella-19,
    .huella-20,
    .huella-21,
    .huella-22 {

        display: none;
    }


    .huella-23 { width: 55px; height: 55px; }
    .huella-24 { width: 65px; height: 65px; }

    .blob-superior-derecha,
    .blob-inferior-izquierda,
    .blob-inferior-derecha {

        transform: scale(0.4);
    }


    .circulo {

        width: 8px;

        height: 8px;

        border-width: 2px;
    }


    .circulo-1 {

        left: 40px;

        top: 240px;
    }


    .circulo-2 {

        right: 35px;

        top: 330px;
    }


    .circulo-3,
    .circulo-4 {

        display: none;
    }


    .linea {

        opacity: 0.7;

        transform: scale(0.7);
    }
}


/* =========================================================
   CELULARES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 360px) {

    .login-contenido {

        padding-top: 84px;
    }


    .encabezado-login h1 {

        font-size: 24px;
    }


    .encabezado-login p {

        font-size: 9.5px;
    }


    .login-card {

        padding-left: 17px;

        padding-right: 17px;
    }


    .huella-1,
    .huella-2 {

        display: none;
    }


    .cruz-1,
    .cruz-2 {

        display: none;
    }
}


/* =========================================================
   PANTALLAS GRANDES
   ========================================================= */

@media (min-width: 1200px) {

    .login-contenido {

        padding-top: 80px;
    }


    .encabezado-login h1 {

        font-size: 40px;
    }


    .login-card {

        margin-top: 17px;
    }
}


/* =========================================================
   RECUPERAR CONTRASEÑA
   (recuperar_contra.php — mismas clases del HTML)
   ========================================================= */

.logo {

    display: flex;

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

    width: 100%;

    padding: 42px 20px 0;

    position: relative;

    z-index: 10;
}


.logo img {

    display: block;

    height: 52px;
    width: auto;

    object-fit: contain;
}


.login-container {

    width: 100%;
    max-width: 400px;

    margin: 26px auto 90px;

    padding: 30px 32px 34px;

    background: rgba(255, 255, 255, 0.97);

    border: 1px solid #e5edf5;

    border-radius: 12px;

    box-shadow:
        0 14px 32px rgba(52, 99, 137, 0.13),
        0 3px 10px rgba(52, 99, 137, 0.04);

    position: relative;

    z-index: 10;

    text-align: center;
}


.bienvenido {

    margin: 0 0 8px;

    font-size: 26px;

    font-weight: 800;

    letter-spacing: -0.8px;

    line-height: 1.2;

    background: linear-gradient(
        90deg,
        #348ff2 0%,
        #42aee6 50%,
        #59c8b3 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.login-container > p {

    margin: 0 0 4px;

    font-size: 12.5px;

    line-height: 1.6;

    color: #8092aa;
}


/* --- Mensajes de estado --- */

.mensaje {

    margin: 14px 0 4px;

    padding: 11px 14px;

    border-radius: 10px;

    font-size: 12.5px;

    font-weight: 600;

    line-height: 1.5;

    text-align: left;
}


.mensaje.error {

    background: #fdecec;

    border: 1px solid #f6c6c6;

    color: #c23b3b;
}


.mensaje.exito {

    background: #eafaf3;

    border: 1px solid #bfe9d4;

    color: #1f9d6c;
}


/* --- Formulario --- */

.login-container form {

    margin-top: 18px;

    text-align: left;
}


.login-container label {

    display: block;

    margin-bottom: 7px;

    font-size: 14px;

    font-weight: 700;

    color: #263852;
}


.login-container input {

    width: 100%;

    height: 46px;

    padding: 0 15px;

    border: 1px solid #d8e5f1;

    border-radius: 12px;

    background: linear-gradient(
        90deg,
        #f9fbfe 0%,
        #f7fbff 100%
    );

    color: #334963;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    outline: none;

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


.login-container input::placeholder {

    color: #91a4b9;

    opacity: 1;

    font-size: 14px;
}


.login-container input:focus {

    border-color: #65adf2;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(76, 161, 238, 0.10);
}


/* --- Volver a iniciar sesión --- */

.registro-link {

    text-align: center;

    margin-top: 17px;
}


.registro-link p {

    margin: 0 0 4px;

    font-size: 11px;

    font-weight: 400;

    color: #8092aa;
}


.registro-link a {

    font-size: 12px;

    font-weight: 700;

    color: #55c5b1;

    text-decoration: none;

    transition: color 0.2s ease;
}


.registro-link a:hover {

    color: #35aa96;

    text-decoration: underline;
}


/* --- Cruces "+" (spans de texto, no pseudo-elementos) --- */

.decor-plus {

    position: fixed;

    pointer-events: none;

    user-select: none;

    z-index: 0;

    font-size: 20px;

    font-weight: 700;

    line-height: 1;

    color: rgba(101, 174, 233, 0.4);
}


.plus-1 {

    top: 130px;
    left: 80px;
}


.plus-2 {

    top: 230px;
    right: 160px;
}


.plus-3 {

    top: 400px;
    left: 60px;
}


.plus-4 {

    bottom: 220px;
    right: 90px;
}


.plus-5 {

    bottom: 120px;
    left: 140px;
}


/* --- Circulitos decorativos --- */

.decor-circle {

    position: fixed;

    width: 10px;
    height: 10px;

    border: 3px solid rgba(74, 165, 239, 0.18);

    border-radius: 50%;

    pointer-events: none;

    user-select: none;

    z-index: 0;
}


.circle-1 {

    top: 150px;
    right: 220px;
}


.circle-2 {

    top: 340px;
    left: 100px;
}


.circle-3 {

    bottom: 260px;
    right: 140px;
}


.circle-4 {

    bottom: 130px;
    left: 220px;
}


/* =========================================================
   RECUPERAR CONTRASEÑA — RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .logo {

        padding-top: 30px;
    }


    .logo img {

        height: 42px;
    }


    .login-container {

        margin: 20px 20px 70px;

        max-width: none;

        width: calc(100% - 40px);
    }


    .bienvenido {

        font-size: 22px;
    }


    .decor-plus,
    .decor-circle {

        display: none;
    }


    .huella-5,
    .huella-6,
    .huella-7,
    .huella-8 {

        display: none;
    }
}


@media (max-width: 400px) {

    .login-container {

        padding: 26px 22px 28px;
    }
}