/* ==========================================================
   AGROEXTIENDE
   LOGIN · BASADO EN MOCKUP FINAL V14
   ========================================================== */

:root {

    --indigo-950: #1c1533;
    --indigo-900: #241b40;
    --indigo-800: #2f244f;
    --indigo-700: #3c2f63;
    --indigo-100: #e8e4f2;

    --blueberry: #3d5a99;
    --blueberry-light: #6f8dc4;

    --orange-600: #d9622b;
    --orange-500: #e8743b;
    --orange-100: #fbe4d4;

    --cream: #f7f4ee;
    --cream-2: #efeadf;

    --white: #ffffff;

    --ink: #1d1830;
    --ink-60: #6a6480;
    --ink-30: #b8b3c6;

    --line: #e4ddec;

    --green-ok: #2f7a4f;
    --green-100: #e2f2e6;

    --red-err: #b8382b;
    --red-100: #fbe6e2;

    --font-display: 'Fraunces', Georgia, serif;

    --font-body:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    --font-mono:
        'Space Mono',
        monospace;

    --radius: 14px;
    --radius-sm: 8px;

    --shadow-md:
        0 8px 24px rgba(28, 21, 51, .10);

    --shadow-lg:
        0 20px 48px rgba(28, 21, 51, .16);
}


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

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

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

body {

    min-height: 100vh;

    font-family: var(--font-body);

    background: var(--white);

    color: var(--ink);

    font-size: 14px;

    -webkit-font-smoothing: antialiased;
}


button,
input {
    font-family: inherit;
}


button {
    cursor: pointer;
}


h1,
h2,
h3,
h4 {

    font-family: var(--font-display);

    font-weight: 600;

    line-height: 1.15;

    color: var(--indigo-950);
}


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

#view-login {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        1.08fr
        .92fr;

    background: #fff;
}


/* ==========================================================
   PANEL IZQUIERDO
   ========================================================== */

.login-art {

    position: relative;

    overflow: hidden;

    padding:
        64px
        64px
        54px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 26px;

    color: var(--white);

    background:

        radial-gradient(
            circle at 20% 15%,
            rgba(232, 116, 59, .35),
            transparent 45%
        ),

        radial-gradient(
            circle at 80% 85%,
            rgba(63, 90, 153, .45),
            transparent 50%
        ),

        linear-gradient(
            160deg,
            var(--indigo-950),
            var(--indigo-800) 70%
        );
}


.login-art::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            rgba(255,255,255,.14) 1.5px,
            transparent 1.5px
        );

    background-size: 22px 22px;

    opacity: .25;

    mix-blend-mode: overlay;

    pointer-events: none;
}


.login-art::after {

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    right: -120px;

    bottom: -130px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 50%;

    box-shadow:

        0 0 0 70px
        rgba(255,255,255,.025),

        0 0 0 140px
        rgba(255,255,255,.018);

    pointer-events: none;
}


.login-logo {

    position: absolute;

    top: 64px;

    left: 64px;

    z-index: 2;

    font-family: var(--font-display);

    font-size: 20px;

    font-weight: 700;

    letter-spacing: .02em;

    color: #fff;
}


.login-logo span {
    color: var(--orange-500);
}


.login-main-copy {

    position: relative;

    z-index: 2;
}


.login-kicker {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: max-content;

    padding:
        7px
        12px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 999px;

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

    font-family: var(--font-mono);

    font-size: 10px;

    letter-spacing: .08em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.76);
}


.login-kicker::before {

    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--orange-500);

    box-shadow:

        0 0 0 4px
        rgba(232,116,59,.14);
}


.login-art h1 {

    max-width: 13ch;

    margin-top: 12px;

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    letter-spacing: -.02em;

    color: var(--white);
}


.login-art .sub {

    max-width: 46ch;

    margin-top: 16px;

    color:
        rgba(255,255,255,.72);

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================================
   PANEL DERECHO
   ========================================================== */

.login-panel {

    min-height: 100vh;

    padding: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(
            180deg,
            #fff,
            #faf8f4
        );
}


.login-box {

    width: 100%;

    max-width: 460px;

    padding: 34px;

    border:
        1px solid var(--line);

    border-radius: 22px;

    background: #fff;

    box-shadow:

        0 22px 70px
        rgba(28,21,51,.10);
}


.login-logo-img {

    display: block;

    height: 30px;

    width: auto;

    max-width: 100%;

    margin-bottom: 24px;
}


.login-box h2 {

    margin-bottom: 6px;

    font-size: 26px;
}


.login-box .lead {

    margin-bottom: 24px;

    color: var(--ink-60);

    font-size: 13.5px;
}


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

.field {

    margin-bottom: 15px;
}


.field label {

    display: block;

    margin-bottom: 6px;

    color: var(--indigo-900);

    font-size: 12px;

    font-weight: 700;
}


.field .input-wrap {

    position: relative;
}


.field input {

    width: 100%;

    padding:
        11px
        13px;

    border:
        1.5px solid var(--line);

    border-radius:
        var(--radius-sm);

    background:
        var(--white);

    color: var(--ink);

    font-size: 14px;

    transition:
        border-color .15s,
        box-shadow .15s;
}


.field input:focus {

    border-color:
        var(--blueberry);

    outline: none;

    box-shadow:

        0 0 0 3px
        rgba(61,90,153,.08);
}


.field input::placeholder {

    color: #8d8994;
}


/* CONTRASEÑA */

.field .input-wrap input {

    padding-right: 58px;
}


.toggle-pass {

    position: absolute;

    right: 10px;

    top: 50%;

    transform:
        translateY(-50%);

    border: none;

    background: none;

    color: var(--ink-60);

    font-size: 11.5px;

    font-weight: 700;
}


.toggle-pass:hover {

    color: var(--blueberry);
}


/* ==========================================================
   RECUPERACIÓN
   ========================================================== */

.form-row-between {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    margin-bottom: 20px;

    font-size: 12.5px;
}


.link-accent {

    color: var(--blueberry);

    font-weight: 700;
}


.forgot-placeholder {

    cursor: default;
}


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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding:
        10px
        18px;

    border:
        1px solid transparent;

    border-radius: 999px;

    font-size: 13.5px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


.btn:active {

    transform:
        translateY(1px);
}


.btn-primary {

    background:
        var(--orange-500);

    color:
        var(--white);
}


.btn-primary:hover {

    background:
        var(--orange-600);

    box-shadow:
        var(--shadow-md);
}


.btn-block {

    width: 100%;
}


/* ==========================================================
   ALERTAS
   ========================================================== */

.alert {

    display: none;

    gap: 10px;

    align-items: flex-start;

    margin-bottom: 16px;

    padding:
        11px
        13px;

    border-radius:
        var(--radius-sm);

    font-size: 12.5px;

    font-weight: 500;

    line-height: 1.5;
}


.alert.show {

    display: flex;
}


.alert-error {

    background:
        var(--red-100);

    color:
        var(--red-err);
}


.alert-success {

    background:
        var(--green-100);

    color:
        var(--green-ok);
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

button:focus-visible,
input:focus-visible {

    outline:
        2px solid
        var(--orange-500);

    outline-offset: 2px;
}


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

@media (max-width: 920px) {

    #view-login {

        grid-template-columns: 1fr;
    }


    .login-art {

        display: none;
    }


    .login-panel {

        min-height: 100vh;
    }


    .login-box {

        border: none;

        padding: 10px;

        box-shadow: none;
    }
}


@media (max-width: 520px) {

    .login-panel {

        padding:
            28px
            22px;
    }


    .login-box h2 {

        font-size: 24px;
    }
}