/* Inicio de sesión (Login.razor). App.razor carga este archivo en todas las
   páginas, por lo que las reglas usan clases propias del login. */
:root {
    --login-navy: #284a64;
    --login-navy-deep: #173b57;
    --login-navy-ink: #10304a;
    --login-orange: #ff6c37;
    --login-orange-text: #ff9466;
    --login-focus: #d9531f;
    --login-page: #f2f5f8;
    --login-text: #1f3447;
    --login-muted: #566877;
    --login-border: #cbd6df;
}

.login-page {
    width: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(420px, 54%) 1fr;
    overflow-x: hidden;
    background: var(--login-page);
    color: var(--login-text);
    font-family: "Roboto", sans-serif;
}

/* Panel de marca con escena 3D */
.login-brand-panel {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
    padding: clamp(2rem, 4.2vw, 4.25rem);
    display: flex;
    flex-direction: column;
    color: #fff;
    background:
        radial-gradient(circle at 78% 70%, rgba(65, 124, 159, .28), transparent 30rem),
        radial-gradient(circle at 88% 8%, rgba(255, 108, 55, .12), transparent 22rem),
        linear-gradient(160deg, var(--login-navy-ink) 0%, var(--login-navy-deep) 52%, #1d4560 100%);
}

/* Velo que asegura el contraste del texto sobre la escena. */
.login-brand-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(16, 48, 74, .82) 0%, rgba(16, 48, 74, .45) 38%, transparent 66%),
        linear-gradient(180deg, rgba(16, 48, 74, .55) 0%, transparent 26%, transparent 78%, rgba(16, 48, 74, .7) 100%);
}

.login-scene {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-scene canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .9s ease;
}

.login-scene.is-ready canvas { opacity: 1; }

/* Respaldo sin WebGL, en móvil o mientras carga: grilla de obra en perspectiva
   con puntos de control. */
.login-scene::before {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    bottom: -18%;
    height: 78%;
    background-image:
        linear-gradient(rgba(214, 228, 238, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214, 228, 238, .16) 1px, transparent 1px),
        linear-gradient(rgba(214, 228, 238, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214, 228, 238, .07) 1px, transparent 1px);
    background-size: 160px 160px, 160px 160px, 40px 40px, 40px 40px;
    background-position: center top;
    transform: perspective(42rem) rotateX(62deg);
    transform-origin: center top;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
    transition: opacity .9s ease;
}

.login-scene::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: 30%;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--login-orange);
    box-shadow: 0 0 0 .45rem rgba(255, 108, 55, .18), -9rem 3.4rem 0 -.08rem rgba(234, 242, 247, .85), 5rem 4.6rem 0 -.08rem rgba(234, 242, 247, .85);
    transition: opacity .9s ease;
}

.login-scene.is-ready::before,
.login-scene.is-ready::after { opacity: 0; }

.brand-lockup { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .5rem; }
.brand-mark { width: .5rem; height: .5rem; border-radius: 50%; background: var(--login-orange); align-self: start; margin-top: .75rem; }
.brand-name { color: #fff; font-size: clamp(2rem, 3vw, 3rem); font-weight: 750; letter-spacing: -.07em; line-height: 1; }
.brand-product { grid-column: 2; margin-top: .25rem; color: var(--login-orange-text); font-size: .92rem; font-weight: 750; letter-spacing: .05em; line-height: 1; }

.brand-copy { max-width: 29rem; margin-top: clamp(3rem, 9vh, 7rem); }
.login-page .eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; color: var(--login-orange-text); font-size: .72rem; font-weight: 750; letter-spacing: .18em; }
.login-page .eyebrow::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: var(--login-orange); }
.brand-copy h1 { max-width: 26rem; margin: 0; color: #fff; font-size: clamp(2.1rem, 3.1vw, 3.3rem); font-weight: 700; line-height: 1.07; letter-spacing: -.045em; text-wrap: balance; }
.brand-copy > p:last-child { max-width: 26rem; margin: 1.15rem 0 0; color: rgba(255, 255, 255, .8); font-size: .97rem; line-height: 1.65; }

.brand-benefits { display: flex; flex-wrap: wrap; gap: .6rem; margin: auto 0 0; padding: 0; list-style: none; }
.brand-benefit { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .85rem .5rem .55rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(16, 48, 74, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: rgba(255, 255, 255, .92); font-size: .78rem; font-weight: 600; line-height: 1.2; }
.brand-benefit i { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; background: rgba(255, 108, 55, .16); color: var(--login-orange-text); font-size: .9rem; }

/* Panel del formulario */
.login-form-panel {
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4.5vw, 4.5rem);
    background:
        radial-gradient(circle at 85% 6%, rgba(255, 108, 55, .08), transparent 22rem),
        radial-gradient(rgba(40, 74, 100, .09) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--login-page);
}

.login-card { position: relative; width: min(100%, 30rem); box-sizing: border-box; padding: clamp(2rem, 3.6vw, 2.9rem); overflow: hidden; background: #fff; border: 1px solid rgba(40, 74, 100, .1); border-radius: 1.25rem; box-shadow: 0 1.5rem 3.5rem rgba(23, 59, 87, .13), 0 .2rem .6rem rgba(23, 59, 87, .05); }
.login-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--login-navy-deep) 0%, var(--login-navy) 62%, var(--login-orange) 62%, var(--login-orange) 100%); }

.login-heading { margin-bottom: 1.8rem; }
.login-kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .8rem; color: var(--login-navy); font-size: .7rem; font-weight: 750; letter-spacing: .16em; }
.login-kicker i { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .6rem; background: #eef3f7; color: var(--login-navy); font-size: .85rem; }
.login-heading h2 { margin: 0; color: var(--login-navy-deep); font-size: clamp(1.8rem, 2.4vw, 2.25rem); font-weight: 750; letter-spacing: -.04em; }
.login-heading p { margin: .45rem 0 0; color: var(--login-muted); font-size: .92rem; }

.login-page .form-group { margin-bottom: 1rem; }
.section-label { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; }
.section-label label { color: var(--login-text); font-size: .82rem; font-weight: 700; }
.helper-input { color: #a8231a; font-size: .75rem; }

.input-shell { position: relative; display: flex; align-items: center; }
.input-shell > .bi:first-child { position: absolute; left: 1rem; color: #5f7283; font-size: 1.05rem; pointer-events: none; transition: color .18s ease; }
.input-shell:focus-within > .bi:first-child { color: var(--login-navy); }
.input-shell input { width: 100%; height: 3rem; box-sizing: border-box; padding: 0 3rem 0 2.7rem; border: 1px solid var(--login-border); border-radius: .7rem; outline: 0; background: #fbfcfd; color: var(--login-text); font: inherit; font-size: .9rem; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.input-shell input::placeholder { color: #7d8d99; }
.input-shell input:hover { border-color: #a9bac7; }
.input-shell input:focus { border-color: var(--login-focus); background: #fff; box-shadow: 0 0 0 .2rem rgba(255, 108, 55, .22); }
.input-shell input.invalid { border-color: #c4372b; }
.password-toggle { position: absolute; right: .45rem; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: .5rem; background: transparent; color: #5f7283; cursor: pointer; }
.password-toggle:hover { background: #eef3f7; color: var(--login-navy); }
.password-toggle:focus-visible { outline: 2px solid var(--login-focus); outline-offset: 1px; }

.login-alert { display: flex; align-items: flex-start; gap: .6rem; margin: .4rem 0 .9rem; padding: .75rem .9rem; border: 1px solid #f1c3be; border-radius: .7rem; background: #fdf0ee; color: #8f1d14; font-size: .85rem; line-height: 1.4; }
.login-alert i { margin-top: .05rem; font-size: 1rem; }

.btn-login { position: relative; width: 100%; min-height: 3.35rem; margin-top: .6rem; display: flex; align-items: center; justify-content: center; gap: .65rem; border: 0; border-radius: .75rem; background: linear-gradient(135deg, var(--login-navy) 0%, var(--login-navy-deep) 100%); color: #fff; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; box-shadow: 0 .7rem 1.3rem rgba(23, 59, 87, .22); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn-login .bi-arrow-right { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; background: var(--login-orange); color: #fff; font-size: .85rem; transition: transform .18s ease; }
.btn-login:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 .9rem 1.5rem rgba(23, 59, 87, .26); }
.btn-login:hover:not(:disabled) .bi-arrow-right { transform: translateX(2px); }
.btn-login:focus-visible { outline: 3px solid var(--login-focus); outline-offset: 3px; }
.btn-login:disabled { cursor: wait; opacity: .85; }

.login-divider { display: flex; align-items: center; gap: .7rem; margin: .9rem 0; color: #6b7b87; font-size: .74rem; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: #e1e8ed; }
.login-divider span { line-height: 1; }

.btn-microsoft { width: 100%; min-height: 3.15rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: .72rem; border: 1px solid var(--login-border); border-radius: .75rem; background: #fff; color: var(--login-text); font-size: .9rem; font-weight: 700; text-decoration: none; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn-microsoft:hover { border-color: #9eb1bf; background: #f7f9fb; color: var(--login-navy-deep); transform: translateY(-1px); box-shadow: 0 .5rem 1rem rgba(23, 59, 87, .08); }
.btn-microsoft:focus-visible { outline: 3px solid var(--login-focus); outline-offset: 3px; }
.microsoft-mark { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; }
.microsoft-mark span:nth-child(1) { background: #f25022; }
.microsoft-mark span:nth-child(2) { background: #7fba00; }
.microsoft-mark span:nth-child(3) { background: #00a4ef; }
.microsoft-mark span:nth-child(4) { background: #ffb900; }

.login-spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: login-spin .7s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }

.login-legal { margin: 1.25rem 0 0; color: var(--login-muted); text-align: center; font-size: .74rem; line-height: 1.45; }
.login-legal a { color: var(--login-navy); text-decoration: underline; text-decoration-color: rgba(40, 74, 100, .35); text-underline-offset: .18rem; transition: text-decoration-color .18s ease; }
.login-legal a:hover { text-decoration-color: var(--login-orange); }
.login-legal a:focus-visible { border-radius: .2rem; outline: 2px solid var(--login-focus); outline-offset: 3px; }
.login-mobile-benefits { display: none; }

/* Superposición de validación de sesión (SessionValdateComponent). */
.validate-sesion { position: fixed; inset: 0; z-index: 3000; display: none; place-items: center; background: rgba(23,43,58,.3); backdrop-filter: blur(3px); }
.validate-sesion.is-active { display: grid; }
.container-validate { padding: 1.25rem; border-radius: .8rem; background: #fff; color: var(--login-text); box-shadow: 0 1rem 2.5rem rgba(23,43,58,.2); }

@media (prefers-reduced-motion: reduce) {
    .login-scene canvas, .login-scene::before, .login-scene::after,
    .btn-login, .btn-login .bi-arrow-right, .btn-microsoft { transition: none; }
    .btn-login:hover:not(:disabled), .btn-microsoft:hover { transform: none; }
}

@media (max-width: 1100px) {
    .login-page { grid-template-columns: minmax(380px, 48%) 1fr; }
    .brand-benefit { font-size: .74rem; }
}

@media (max-width: 850px) {
    .login-page { grid-template-columns: 1fr; align-content: start; }
    .login-brand-panel { min-height: 15rem; padding: 1.75rem 2rem 4.5rem; }
    .login-brand-panel::after { background: linear-gradient(90deg, rgba(16, 48, 74, .8) 0%, rgba(16, 48, 74, .25) 60%, transparent 100%); }
    .brand-copy { margin-top: 1.4rem; }
    .brand-copy h1 { max-width: 22rem; font-size: 1.7rem; }
    .brand-copy > p:last-child, .brand-benefits { display: none; }
    .login-form-panel { position: relative; z-index: 1; min-height: 0; align-items: flex-start; padding: 0 1.5rem 2rem; background: transparent; }
    .login-card { margin-top: -3rem; }
}

@media (max-width: 640px) {
    .login-page { background: linear-gradient(180deg, var(--login-navy-deep) 0, var(--login-navy-deep) 14rem, var(--login-page) 14rem); }
    .login-brand-panel { min-height: 0; padding: 1.15rem 1.25rem 3.6rem; }
    .brand-name { font-size: 1.85rem; }
    .brand-copy { display: none; }
    .login-scene::before { bottom: -40%; height: 120%; }
    .login-scene::after { right: 14%; bottom: 46%; }
    .login-form-panel { padding: 0 .85rem 1rem; }
    .login-card { margin-top: -2.4rem; padding: 1.5rem 1.2rem 1.15rem; border-radius: 1.1rem; }
    .login-heading { margin-bottom: 1.1rem; }
    .login-kicker { margin-bottom: .55rem; }
    .login-heading h2 { font-size: 1.65rem; }
    .login-heading p { font-size: .86rem; }
    .login-page .form-group { margin-bottom: .8rem; }
    .input-shell input { height: 2.85rem; font-size: 1rem; }
    .btn-login { min-height: 3.05rem; }
    .btn-microsoft { min-height: 2.95rem; }
    .login-legal { margin-top: .9rem; }
    .login-mobile-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .9rem -.15rem 0; padding: .8rem 0 0; border-top: 1px solid #e7edf1; }
    .login-mobile-benefits > div { min-width: 0; display: grid; justify-items: center; gap: .34rem; color: #4d6273; font-size: .68rem; font-weight: 700; text-align: center; line-height: 1.2; }
    .login-mobile-benefits > div + div { border-left: 1px solid #e4ebef; }
    .login-mobile-benefits i { display: grid; width: 1.95rem; height: 1.95rem; place-items: center; border-radius: .55rem; background: #edf3f7; color: var(--login-navy); font-size: .95rem; }
}

@media (max-width: 640px) and (max-height: 720px) {
    .login-mobile-benefits { display: none; }
    .login-heading p { display: none; }
}

/* Restablecimiento de contraseña: estilos globales porque LoginLayout carga este archivo. */
.main-login {
    min-height: 100vh;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: radial-gradient(circle at 8% 8%, rgba(255, 108, 55, .14), transparent 27rem), radial-gradient(circle at 92% 90%, rgba(40, 74, 100, .16), transparent 30rem), #f4f6f9;
}

.main-login .container-login {
    width: min(100%, 31rem);
    box-sizing: border-box;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid rgba(40, 74, 100, .1);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1.25rem 3.25rem rgba(29, 59, 83, .14);
}

.main-login .header { margin-bottom: 1.8rem; text-align: center; }
.main-login .header svg { display: block; width: 2.65rem; height: 2.65rem; margin: 0 auto .9rem; padding: .7rem; box-sizing: content-box; border-radius: 50%; background: rgba(255, 108, 55, .12); }
.main-login .header h1 { margin: 0; color: #284a64; font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 750; letter-spacing: -.035em; }
.main-login .subtitle { margin: .65rem auto 0; max-width: 24rem; color: #6d7d8b; font-size: .88rem; line-height: 1.55; }
.main-login .form-group { margin-bottom: 1rem; }
.main-login .form-group label { display: block; margin-bottom: .45rem; color: #24384a; font-size: .82rem; font-weight: 700; }
.main-login .form-group input { width: 100%; height: 3.2rem; box-sizing: border-box; padding: 0 1rem; border: 1px solid #d6dfe6; border-radius: .65rem; outline: none; background: #fff; color: #24384a; font: inherit; font-size: .92rem; transition: border-color .18s ease, box-shadow .18s ease; }
.main-login .form-group input:focus { border-color: #ff6c37; box-shadow: 0 0 0 .23rem rgba(255, 108, 55, .16); }

.main-login .requirements { margin: 1.25rem 0; padding: 1rem; border: 1px solid #e3e9ed; border-radius: .7rem; background: #f8fafb; }
.main-login .requirements h2 { margin: 0 0 .65rem; color: #284a64; font-size: .78rem; font-weight: 750; }
.main-login .requirement-item { display: flex; align-items: center; gap: .5rem; margin-top: .42rem; color: #748391; font-size: .78rem; transition: color .18s ease; }
.main-login .dot { width: .5rem; height: .5rem; flex: 0 0 auto; border: 2px solid #9ba9b4; border-radius: 50%; }
.main-login .requirement-item.valid { color: #217d67; }
.main-login .requirement-item.valid .dot { border-color: #2d9478; background: #2d9478; box-shadow: inset 0 0 0 2px #f8fafb; }
.main-login .error-span { margin-top: .55rem; }
.main-login .error-text { color: #b42318; font-size: .75rem; }

.main-login .btn-submit { width: 100%; min-height: 3.2rem; margin-top: .45rem; border: 0; border-radius: .65rem; background: #284a64; color: #fff; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; box-shadow: 0 .55rem 1rem rgba(40, 74, 100, .18); transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.main-login .btn-submit:hover:not(:disabled) { background: #1d3b53; transform: translateY(-1px); box-shadow: 0 .8rem 1.25rem rgba(40, 74, 100, .24); }
.main-login .btn-submit:focus-visible { outline: 3px solid rgba(255, 108, 55, .48); outline-offset: 3px; }
.main-login .btn-submit:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }

@media (max-width: 520px) {
    .main-login { align-items: start; padding: 1rem; }
    .main-login .container-login { margin-top: 1.5rem; padding: 1.6rem 1.25rem; border-radius: .85rem; }
}