/* =========================================
   VARIABLES
========================================= */

:root{
    --safe-top:env(safe-area-inset-top, 0px);
    --safe-right:env(safe-area-inset-right, 0px);
    --safe-bottom:env(safe-area-inset-bottom, 0px);
    --safe-left:env(safe-area-inset-left, 0px);

    --navy:#14233a;
    --navy-2:#203451;
    --blue:#2f6fed;
    --blue-dark:#245dcc;
    --blue-soft:#eaf1ff;

    --text:#172033;
    --muted:#697386;
    --line:#dce3ed;
    --surface:#ffffff;
    --surface-soft:#f5f7fb;

    --danger:#b42318;
    --danger-bg:#fef3f2;
    --danger-line:#fecdca;
}

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

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

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

html{
    background:#edf2f8;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    min-width:320px;
    min-height:100vh;
    min-height:100dvh;

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

    position:relative;
    overflow:hidden;

    padding:
        calc(28px + var(--safe-top))
        calc(28px + var(--safe-right))
        calc(28px + var(--safe-bottom))
        calc(28px + var(--safe-left));

    background:
        linear-gradient(rgba(9,19,34,.82), rgba(12,24,42,.88)),
        url("../img/fondo4.png") center/cover fixed no-repeat;

    color:var(--text);

    font-family:
        "Segoe UI",
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        Arial,
        sans-serif;

    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

body.modal-open{
    overflow:hidden;
}

body::before{
    content:"";

    position:fixed;
    inset:0;

    z-index:0;

    background:
        radial-gradient(circle at 16% 18%, rgba(47,111,237,.18), transparent 25%),
        radial-gradient(circle at 84% 78%, rgba(99,102,241,.14), transparent 28%);

    pointer-events:none;
}


button,
input{
    font:inherit;
}

button{
    -webkit-tap-highlight-color:transparent;
}

img,
svg{
    display:block;
}

.light,
.light2,
.bg-anim{
    position:fixed;
    z-index:1;

    pointer-events:none;

    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    opacity:.045;
    filter:grayscale(1) contrast(.9);

    animation:none;
}

.light{
    width:440px;
    height:440px;

    top:-105px;
    left:-100px;

    background-image:url("../img/moon.png");

    transform:rotate(-10deg);
}

.light2{
    width:390px;
    height:390px;

    right:-70px;
    bottom:-95px;

    background-image:url("../img/LOGO.avif");

    transform:rotate(8deg);
}

.bg-anim{
    width:310px;
    height:310px;

    top:50%;
    right:9%;

    background-image:url("../img/san juan.png");

    opacity:.035;

    transform:translateY(-50%);
}

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

.install-button{
    position:fixed;
    top:calc(16px + var(--safe-top));
    right:calc(16px + var(--safe-right));
    z-index:20;

    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:9px 14px;

    border:1px solid rgba(20,35,58,.12);
    border-radius:12px;

    background:rgba(255,255,255,.94);
    color:var(--navy);

    box-shadow:0 8px 26px rgba(31,45,61,.12);

    font-size:13px;
    font-weight:750;

    cursor:pointer;

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

.install-button[hidden]{
    display:none !important;
}

.install-button:hover{
    transform:translateY(-1px);
    background:#fff;
    box-shadow:0 12px 30px rgba(31,45,61,.16);
}

.install-button svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* =========================================
   CONTENEDOR GENERAL
========================================= */

.login-container{
    width:100%;

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

    position:relative;
    z-index:5;
}

.login-shell{
    width:min(1180px, 100%);
    min-height:650px;

    display:grid;
    grid-template-columns:minmax(0, 1.25fr) minmax(390px, .75fr);

    overflow:hidden;

    border:1px solid rgba(255,255,255,.9);
    border-radius:30px;

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

    box-shadow:
        0 30px 90px rgba(31,45,61,.16),
        0 8px 24px rgba(31,45,61,.08);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

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

.welcome-panel{
    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:64px;

    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,249,253,.94));
}

.welcome-brand{
    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:34px;
}

.welcome-logo{
    width:78px;
    height:78px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border:1px solid #dfe6ef;
    border-radius:22px;

    background:#fff;

    box-shadow:0 12px 30px rgba(31,45,61,.10);
}

.welcome-logo img{
    width:58px;
    height:58px;
    object-fit:contain;
}

.eyebrow{
    display:block;

    margin-bottom:5px;

    color:var(--blue);

    font-size:12px;
    font-weight:850;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.welcome-brand h2{
    color:var(--text);

    font-size:46px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.04em;
}

.welcome-copy{
    max-width:600px;

    margin-bottom:42px;

    color:var(--muted);

    font-size:18px;
    line-height:1.7;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.feature-card{
    min-height:105px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:18px;

    border:1px solid #e3e8f0;
    border-radius:16px;

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

    box-shadow:0 10px 28px rgba(31,45,61,.06);
}

.feature-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:12px;

    background:var(--blue-soft);
    color:var(--blue);
}

.feature-icon svg{
    width:21px;
    height:21px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.feature-card strong{
    display:block;

    margin-bottom:2px;

    color:var(--text);

    font-size:14px;
}

.feature-card small{
    display:block;

    color:var(--muted);

    font-size:12px;
}

.welcome-decoration{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.decoration-one{
    width:260px;
    height:260px;

    top:-120px;
    right:-90px;

    background:rgba(47,111,237,.08);
}

.decoration-two{
    width:180px;
    height:180px;

    left:-80px;
    bottom:-75px;

    background:rgba(99,102,241,.07);
}

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

.card{
    width:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    position:relative;

    padding:54px 46px;

    border-left:1px solid rgba(220,227,237,.9);

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

    text-align:left;
}

.logos-lineales{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;

    margin-bottom:28px;
}

.logo-item{
    width:54px;
    height:54px;

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

    overflow:hidden;

    border:1px solid #e2e7ef;
    border-radius:14px;

    background:#fff;

    box-shadow:0 5px 14px rgba(31,45,61,.07);
}

.logo-item img{
    width:40px;
    height:40px;
    object-fit:contain;
}

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

.system-name{
    margin-bottom:7px;

    color:var(--blue);

    font-size:12px;
    font-weight:850;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.login-header h1{
    margin:0 0 8px;

    color:var(--text);

    font-size:34px;
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.03em;
}

.subtitle{
    color:var(--muted);
    font-size:14px;
}

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

.error{
    width:100%;

    display:flex;
    align-items:flex-start;
    gap:9px;

    margin-bottom:16px;
    padding:11px 12px;

    border:1px solid var(--danger-line);
    border-radius:10px;

    background:var(--danger-bg);
    color:var(--danger);

    font-size:13px;
    text-align:left;
}

.error svg{
    width:18px;
    height:18px;
    flex:0 0 auto;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* =========================================
   FORMULARIO
========================================= */

.login-form{
    width:100%;
}

.input-group{
    width:100%;
    margin-bottom:17px;
}

.field-label{
    display:block;

    margin-bottom:7px;

    color:var(--text);

    font-size:13px;
    font-weight:750;
}

.input-control{
    position:relative;
}

.input-control input{
    width:100%;
    height:54px;

    padding:0 48px;

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

    outline:none;

    background:#fff;
    color:var(--text);

    font-size:15px;

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

.input-control input::placeholder{
    color:#98a2b3;
}

.input-control input:hover{
    border-color:#b9c4d2;
}

.input-control input:focus{
    border-color:var(--blue);

    box-shadow:0 0 0 4px rgba(47,111,237,.11);
}

.input-icon{
    position:absolute;
    left:16px;
    top:50%;
    z-index:2;

    transform:translateY(-50%);

    color:#7d899a;

    pointer-events:none;
}

.input-icon svg{
    width:19px;
    height:19px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

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

.password-toggle{
    position:absolute;
    top:50%;
    right:7px;
    z-index:3;

    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    padding:0;

    border:0;
    border-radius:10px;

    background:transparent;
    color:#7d899a;

    transform:translateY(-50%);

    cursor:pointer;
}

.password-toggle:hover{
    background:#f0f4f9;
    color:var(--text);
}

.password-toggle svg{
    position:absolute;

    width:19px;
    height:19px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.eye-open{
    opacity:1;
}

.eye-closed{
    opacity:0;
    transform:scale(.65);
}

.password-toggle.is-visible .eye-open{
    opacity:0;
    transform:scale(.65);
}

.password-toggle.is-visible .eye-closed{
    opacity:1;
    transform:scale(1);
}

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

.login-button{
    width:100%;
    min-height:52px;

    display:grid;
    place-items:center;

    position:relative;
    overflow:hidden;

    margin-top:6px;
    padding:13px;

    border:0;
    border-radius:12px;

    background:linear-gradient(135deg, var(--blue), var(--blue-dark));
    color:#fff;

    font-size:14px;
    font-weight:800;

    cursor:pointer;

    box-shadow:0 12px 24px rgba(47,111,237,.24);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.login-button:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 28px rgba(47,111,237,.30);
}

.login-button:disabled{
    opacity:.78;
    cursor:wait;
    transform:none;
}

.button-content{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.button-arrow{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.button-loader{
    position:absolute;

    width:21px;
    height:21px;

    border:3px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;

    opacity:0;

    animation:buttonLoading .7s linear infinite;
}

.login-button.is-loading .button-content{
    opacity:0;
}

.login-button.is-loading .button-loader{
    opacity:1;
}

@keyframes buttonLoading{
    to{
        transform:rotate(360deg);
    }
}

.footer{
    margin-top:22px;

    color:#7c8798;

    font-size:11px;
    text-align:center;
}

/* =========================================
   MODAL INSTALACIÓN
========================================= */

.install-modal{
    position:fixed;
    inset:0;

    z-index:100;

    display:grid;
    place-items:center;

    padding:
        calc(20px + var(--safe-top))
        calc(20px + var(--safe-right))
        calc(20px + var(--safe-bottom))
        calc(20px + var(--safe-left));
}

.install-modal[hidden]{
    display:none !important;
}

.install-modal-backdrop{
    position:absolute;
    inset:0;

    background:rgba(10,18,30,.72);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.install-modal-card{
    width:min(100%, 390px);

    position:relative;
    z-index:2;

    padding:28px 24px 22px;

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

    background:#fff;
    color:var(--text);

    box-shadow:0 30px 80px rgba(0,0,0,.38);

    text-align:center;

    animation:modalEnter .22s ease;
}

@keyframes modalEnter{
    from{
        opacity:0;
        transform:translateY(12px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.install-modal-close{
    position:absolute;
    top:10px;
    right:10px;

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    padding:0;

    border:0;
    border-radius:50%;

    background:#eef2f7;
    color:var(--text);

    font-size:25px;
    line-height:1;

    cursor:pointer;
}

.install-modal-icon{
    width:72px;
    height:72px;

    margin:0 auto 14px;

    overflow:hidden;

    border-radius:16px;

    box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.install-modal-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.install-modal-card h2{
    margin-bottom:9px;
    font-size:22px;
}

.install-modal-card p{
    margin-bottom:16px;
    color:var(--muted);
    font-size:14px;
}

.install-modal-card ol{
    display:grid;
    gap:10px;

    margin:0 0 20px;
    padding-left:22px;

    color:#475467;

    font-size:14px;
    text-align:left;
}

.install-modal-ok{
    width:100%;

    padding:12px 16px;

    border:0;
    border-radius:10px;

    background:var(--blue);
    color:#fff;

    font-weight:800;

    cursor:pointer;
}

/* =========================================
   RESPONSIVE: TABLET
========================================= */

@media(max-width:980px){

    body{
        overflow-y:auto;
    }

    .login-shell{
        grid-template-columns:1fr;
        max-width:720px;
    }

    .welcome-panel{
        padding:42px;
    }

    .welcome-brand h2{
        font-size:38px;
    }

    .card{
        border-left:0;
        border-top:1px solid var(--line);
        padding:42px;
    }
}

/* =========================================
   RESPONSIVE: CELULAR
   Se mantiene el estilo de la primera opción formal
========================================= */

@media(max-width:620px){

    .light,
    .light2,
    .bg-anim{
        display:none;
    }

    body{
        align-items:flex-start;
        overflow-y:auto;

        padding:
            calc(68px + var(--safe-top))
            calc(14px + var(--safe-right))
            calc(16px + var(--safe-bottom))
            calc(14px + var(--safe-left));

        background:
            linear-gradient(rgba(11,22,38,.78), rgba(11,22,38,.84)),
            url("../img/fondo.png") center/cover fixed no-repeat;
    }

    .login-container{
        margin:auto 0;
    }

    .login-shell{
        display:block;

        min-height:auto;

        overflow:visible;

        border:0;
        border-radius:0;

        background:transparent;

        box-shadow:none;

        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .welcome-panel{
        display:none;
    }

    .card{
        max-width:390px;
        margin:0 auto;

        padding:24px 18px;

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

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

        box-shadow:
            0 24px 70px rgba(0,0,0,.34),
            0 2px 8px rgba(0,0,0,.08);

        text-align:center;
    }

    .logos-lineales{
        justify-content:center;
        gap:10px;

        margin-bottom:22px;
        padding:12px 10px;

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

        background:var(--surface-soft);
    }

    .logo-item{
        width:58px;
        height:58px;
        border-radius:12px;
    }

    .logo-item img{
        width:43px;
        height:43px;
    }

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

    .system-name{
        margin-bottom:5px;
    }

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

    .subtitle{
        font-size:14px;
    }

    .field-label{
        text-align:left;
    }

    .input-control input{
        height:51px;
        font-size:16px;
    }

    .login-button{
        min-height:51px;
    }

    .footer{
        line-height:1.5;
    }
}

@media(max-width:360px){

    .card{
        padding:22px 14px;
    }

    .logos-lineales{
        gap:8px;
    }

    .logo-item{
        width:52px;
        height:52px;
    }

    .logo-item img{
        width:39px;
        height:39px;
    }
}

@media(max-height:650px){

    body{
        align-items:flex-start;
        overflow-y:auto;
    }

    .login-container{
        margin:auto 0;
    }
}

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}