@import url('fenix-tokens.css');

/* =========================================================
   Login - diseno FENIX Noche (solo auth/login.php)
   login.css se conserva para registro_empresa y aceptar_invitacion.
========================================================= */

*{
    box-sizing:border-box;
}

body.lx{
    min-height:100vh;
    margin:0;
    color:var(--fx-ink);
    font-family:var(--fx-font);
    font-size:15px;
    background:
        radial-gradient(circle at 82% -10%, rgba(72,152,208,.26) 0, transparent 42%),
        radial-gradient(circle at -6% 100%, rgba(255,107,53,.08) 0, transparent 45%),
        linear-gradient(180deg, #081420 0%, #0d1926 55%, #081420 100%);
}

.lx-shell{
    min-height:100vh;
    max-width:1280px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
}

/* ---------- Presentacion ---------- */
.lx-intro{
    flex:1 1 460px;
    min-width:0;
    padding:64px clamp(24px, 5vw, 72px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:28px;
}

.lx-brand{
    display:flex;
    align-items:center;
    gap:16px;
}

.lx-brand img{
    display:block;
    width:68px;
    height:74px;
}

.lx-brand strong{
    font-size:22px;
    font-weight:700;
    letter-spacing:.01em;
}

.lx-brand span{
    color:var(--fx-brand);
}

.lx-pitch{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-width:30ch;
}

.lx-pitch h1{
    margin:0;
    font-size:44px;
    line-height:1.08;
    letter-spacing:-.015em;
}

.lx-pitch p{
    margin:0;
    font-size:17px;
    line-height:1.55;
    color:var(--fx-ink-muted);
}

.lx-tags{
    margin:0;
    padding:0;
    max-width:460px;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.lx-tags li{
    padding:6px 12px;
    border:1px solid var(--fx-line);
    border-radius:99px;
    font-size:13.5px;
    color:var(--fx-ink-muted);
}

/* ---------- Tarjeta ---------- */
.lx-panel{
    flex:1 1 460px;
    min-width:0;
    padding:40px 24px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lx-card{
    width:100%;
    max-width:420px;
    padding:36px 32px;
    display:flex;
    flex-direction:column;
    gap:22px;
    background:rgba(16,28,39,.94);
    border:1px solid var(--fx-line);
    border-radius:var(--fx-r-card);
    box-shadow:0 22px 70px rgba(0,0,0,.35);
}

.lx-card-head h2{
    margin:0 0 4px;
    font-size:28px;
    letter-spacing:-.01em;
}

.lx-card-head p{
    margin:0;
    color:var(--fx-ink-muted);
}

/* ---------- Avisos ---------- */
.lx-alert{
    display:flex;
    gap:10px;
    padding:12px 14px;
    border-radius:var(--fx-r-field);
    font-size:14.5px;
    line-height:1.4;
}

.lx-alert svg{
    flex:none;
    width:20px;
    height:20px;
    margin-top:1px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.lx-alert-error{
    background:rgba(255,93,115,.14);
    border:1px solid rgba(255,93,115,.5);
    color:#ffd0d6;
}

.lx-alert-error svg{
    color:var(--fx-bad);
}

.lx-alert-notice{
    background:rgba(255,200,87,.12);
    border:1px solid rgba(255,200,87,.45);
    color:#fff0c9;
}

.lx-alert-notice svg{
    color:var(--fx-warn);
}

/* ---------- Formulario ---------- */
.lx-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.lx-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.lx-field label{
    font-size:13.5px;
    font-weight:650;
    color:#c3d1db;
}

.lx-field input{
    width:100%;
    min-height:48px;
    padding:0 14px;
    border:1px solid var(--fx-line-strong);
    border-radius:var(--fx-r-field);
    background:#0b1620;
    color:var(--fx-ink);
    font:inherit;
    font-size:15px;
}

/* Autocompletado del navegador: conserva el tema oscuro */
.lx-field input:-webkit-autofill,
.lx-field input:-webkit-autofill:hover,
.lx-field input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--fx-ink);
    caret-color:var(--fx-ink);
    box-shadow:0 0 0 1000px #0b1620 inset;
    border-color:var(--fx-line-strong);
    transition:background-color 9999s ease-out 0s;
}

.lx-field input::placeholder{
    color:var(--fx-ink-muted);
}

.lx-field input:hover{
    border-color:var(--fx-brand);
}

.lx-field input:focus-visible,
.lx-submit:focus-visible,
.lx-eye:focus-visible,
.lx-links a:focus-visible,
.lx-foot a:focus-visible{
    outline:3px solid rgba(72,152,208,.55);
    outline-offset:2px;
}

.lx-password{
    position:relative;
}

.lx-password input{
    padding-right:52px;
}

.lx-eye{
    position:absolute;
    top:2px;
    right:2px;
    min-width:44px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--fx-ink-muted);
    cursor:pointer;
}

.lx-eye:hover{
    color:var(--fx-ink);
}

.lx-eye svg,
.lx-submit svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.lx-submit{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:0;
    border-radius:var(--fx-r-field);
    background:var(--fx-action);
    color:#fff;
    font:inherit;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

.lx-submit:hover{
    background:var(--fx-action-hover);
}

/* ---------- Enlaces ---------- */
.lx-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    padding-top:8px;
    border-top:1px solid var(--fx-line);
}

.lx-links a,
.lx-foot a{
    display:inline-flex;
    align-items:center;
    min-height:var(--fx-target);
    color:var(--fx-brand);
    text-decoration:none;
    font-size:14.5px;
    font-weight:600;
}

.lx-links a:hover,
.lx-foot a:hover{
    text-decoration:underline;
}

.lx-foot{
    margin:0;
    text-align:center;
    font-size:12.5px;
    color:var(--fx-ink-muted);
}

.lx-foot a{
    min-height:0;
    font-size:12.5px;
    font-weight:500;
}

/* ---------- Movil ---------- */
@media (max-width: 760px){
    .lx-shell{
        flex-direction:column;
        flex-wrap:nowrap;
    }

    .lx-intro{
        flex:none;
        padding:40px 24px 8px;
        align-items:center;
        text-align:center;
        gap:12px;
    }

    .lx-brand{
        flex-direction:column;
        gap:10px;
    }

    .lx-brand img{
        width:76px;
        height:82px;
    }

    .lx-pitch,
    .lx-tags{
        display:none;
    }

    .lx-panel{
        flex:1;
        padding:16px 16px 32px;
        align-items:flex-start;
    }

    .lx-card{
        padding:28px 22px;
        background:transparent;
        border-color:transparent;
        box-shadow:none;
    }

    .lx-links{
        flex-direction:column;
        align-items:center;
    }

    .lx-field input{
        font-size:16px;
    }
}