* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }


        body {

            min-height: 100vh;

            background:
                radial-gradient(
                    circle at top,
                    #254779 0%,
                    #08172e 45%,
                    #02060c 100%
                );

            display: flex;

            justify-content: center;

            align-items: center;

            padding: 20px;

            color: #142f61;

        }


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

        .contenedor {

            width: 100%;

            max-width: 400px;

        }


        /* =========================
           LOGO
        ========================= */

        .encabezado {

            text-align: center;

            margin-bottom: 18px;

        }


        .logo {

            width: 155px;

            height: 155px;

            object-fit: contain;

            filter:
                drop-shadow(
                    0 8px 16px
                    rgba(0,0,0,.5)
                );

        }


        .encabezado h1 {

            color: white;

            font-size: 22px;

            letter-spacing: 1px;

            margin-top: 3px;

        }


        .encabezado p {

            color: #bfc9d8;

            font-size: 11px;

            margin-top: 5px;

        }


        /* =========================
           LOGIN
        ========================= */

        .login {

            background:
                rgba(255,255,255,.98);

            border-radius: 24px;

            padding: 28px 25px;

            border:
                2px solid #d7a436;

            box-shadow:
                0 25px 60px
                rgba(0,0,0,.55);

        }


        .titulo {

            text-align: center;

            margin-bottom: 25px;

        }


        .titulo .icono {

            width: 48px;

            height: 48px;

            border-radius: 50%;

            background:
                #142f61;

            color:
                #d7a436;

            display: flex;

            justify-content: center;

            align-items: center;

            margin:
                0 auto 10px;

            font-size: 21px;

        }


        .titulo h2 {

            font-size: 20px;

            color: #142f61;

            margin-bottom: 5px;

        }


        .titulo p {

            font-size: 11px;

            color: #858d98;

        }


        /* =========================
           CAMPOS
        ========================= */

        .campo {

            margin-bottom: 18px;

        }


        .campo label {

            display: block;

            font-size: 12px;

            font-weight: bold;

            color: #142f61;

            margin-bottom: 7px;

        }


        .campo-contenedor {

            position: relative;

        }


        .campo input {

            width: 100%;

            height: 49px;

            border:
                1px solid #d8dde5;

            border-radius: 11px;

            padding:
                0 45px 0 15px;

            outline: none;

            background:
                #f7f9fb;

            color: #142f61;

            font-size: 13px;

            transition: .25s;

        }


        .campo input:focus {

            border-color:
                #d7a436;

            background:
                white;

            box-shadow:
                0 0 0 3px
                rgba(215,164,54,.12);

        }


        .campo input::placeholder {

            color: #a8afb8;

        }


        /* ICONOS */

        .icono-campo {

            position: absolute;

            right: 15px;

            top: 15px;

            color: #8993a1;

            font-size: 16px;

        }


        /* =========================
           MOSTRAR CONTRASEÑA
        ========================= */

        .mostrar-password {

            position: absolute;

            right: 12px;

            top: 9px;

            width: 32px;

            height: 32px;

            border: none;

            background:
                transparent;

            cursor: pointer;

            font-size: 17px;

            border-radius: 50%;

        }


        .mostrar-password:hover {

            background:
                #eef1f5;

        }


        /* =========================
           RECORDAR
        ========================= */

        .opciones {

            display: flex;

            justify-content:
                space-between;

            align-items: center;

            margin:
                -3px 0 20px;

        }


        .recordar {

            display: flex;

            align-items: center;

            gap: 6px;

        }


        .recordar input {

            accent-color:
                #142f61;

        }


        .recordar label {

            font-size: 10px;

            color: #727b88;

        }


        .olvido {

            color:
                #142f61;

            font-size: 10px;

            text-decoration: none;

            font-weight: bold;

        }


        .olvido:hover {

            color:
                #d7a436;

        }


        /* =========================
           BOTON
        ========================= */

        .boton {

            width: 100%;

            height: 50px;

            border: none;

            border-radius: 12px;

            background:
                linear-gradient(
                    135deg,
                    #122b55,
                    #1d4380
                );

            color: white;

            font-size: 13px;

            font-weight: bold;

            letter-spacing: .5px;

            cursor: pointer;

            box-shadow:
                0 7px 18px
                rgba(20,47,97,.3);

            transition: .25s;

        }


        .boton:hover {

            transform:
                translateY(-2px);

            box-shadow:
                0 10px 23px
                rgba(20,47,97,.4);

        }


        /* =========================
           ERROR
        ========================= */

        .error {

            display: none;

            background:
                #fff0f0;

            border:
                1px solid #e3a0a0;

            color:
                #a53c3c;

            border-radius:
                9px;

            padding:
                10px;

            margin-bottom:
                15px;

            font-size:
                10px;

            text-align:
                center;

        }


        /* =========================
           SEGURIDAD
        ========================= */

        .seguridad {

            text-align: center;

            margin-top: 18px;

            color:
                #8c95a3;

            font-size:
                9px;

        }


        /* =========================
           FOOTER
        ========================= */

        .footer {

            text-align: center;

            margin-top: 18px;

            color:
                #8591a3;

            font-size:
                9px;

        }


        .footer strong {

            color:
                #d7a436;

        }


        /* =========================
           RESPONSIVE
        ========================= */

        @media(max-width: 390px) {

            body {

                padding:
                    15px 10px;

            }


            .logo {

                width:
                    125px;

                height:
                    125px;

            }


            .encabezado h1 {

                font-size:
                    19px;

            }


            .login {

                padding:
                    24px 19px;

            }

        }