/*
 * Pantallas de acceso de Helppo Alterno: Login, Recuperar y Restablecer contraseña (#294463).
 * Misma estructura que el estilo "modern" del login de UserPortal (#294183): fondo oscuro con resplandor
 * y retícula de puntos, tarjeta CLARA con borde de brillo cónico, campos y botones muy redondeados y botón
 * principal en degradado. Helppo no usa UserPortal (login propio en Program.cs), así que el CSS vive aquí.
 * Identidad de Helppo (logo y sitio helppo.com.mx): pizarra #4A4F67, naranja #ED8242 (la "e" del logo y el
 * botón de su login histórico) y azul marino #1E2F63. Solo cambia la presentación; la lógica de login no.
 */
:root {
    --auth-gradient-start: #F29A5E;   /* botón principal: naranja Helppo */
    --auth-gradient-mid: #ED8242;
    --auth-gradient-end: #C9581C;
    --auth-primary-color: #1E2F63;    /* foco, iconos activos, links (marino: contraste AA sobre blanco) */
    --auth-primary-hover: #2B3F7E;
    --auth-accent-rgb: 237, 130, 66;  /* naranja en r, g, b: halos y anillo de foco */
    --auth-primary-rgb: 201, 88, 28;  /* sombra del botón principal */
    --auth-slate-rgb: 122, 132, 180;  /* pizarra azulada del logo, aclarada para resplandores */
    --auth-title-a: #1E2F63;          /* degradado del título de la tarjeta */
    --auth-title-b: #4A5BA0;
    --auth-bg: #23263a;               /* pizarra del logo oscurecida */
    --auth-dot: rgba(255, 255, 255, .05);
    --auth-edge-a: rgba(var(--auth-accent-rgb), .80);
    --auth-edge-b: rgba(var(--auth-slate-rgb), .65);
    --auth-edge-c: rgba(30, 47, 99, .70);
    --auth-card-bg: #ffffff;
    --auth-field-bg: #f6f7fb;
    --auth-field-border: #dfe2ec;
    --auth-label: #2f3448;
    --auth-muted: #6b7086;
    --auth-radius-card: 28px;
    --auth-radius-field: 16px;
}

@property --auth-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

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

body {
    background:
        radial-gradient(ellipse 70% 45% at 50% 10%, rgba(var(--auth-accent-rgb), .20), transparent 70%),
        radial-gradient(ellipse 60% 45% at 90% 100%, rgba(var(--auth-slate-rgb), .22), transparent 70%),
        radial-gradient(ellipse 50% 40% at 0% 90%, rgba(30, 47, 99, .35), transparent 70%),
        radial-gradient(circle at 1px 1px, var(--auth-dot) 1px, transparent 0) 0 0 / 22px 22px,
        var(--auth-bg);
    background-attachment: fixed;
    min-height: 100vh;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    color: var(--auth-label);
}

.auth-wrap { width: 100%; max-width: 440px; }

/* ── Marca: "Helppo" como en el logo (blanco, delgado, con la "e" naranja) ── */
.auth-brand { text-align: center; margin-bottom: 1.6rem; color: #fff; }
.auth-brand .wordmark {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: .02em;
    line-height: 1.1;
    text-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.auth-brand .wordmark span { color: var(--auth-gradient-mid); }
.auth-brand p { margin-top: .35rem; font-size: 1rem; color: rgba(233, 236, 245, .72); }

/* ── Tarjeta: borde transparente con degradado cónico debajo + halo difuso detrás ──
   .auth-card-host es el contexto de apilamiento: así el halo (::before, z-index -1) queda DETRÁS del fondo. */
.auth-card-host { position: relative; z-index: 0; }
.auth-card {
    position: relative;
    border: 1.5px solid transparent;
    border-radius: var(--auth-radius-card);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(var(--auth-accent-rgb), .07), transparent 55%) padding-box,
        radial-gradient(120% 90% at 100% 100%, rgba(var(--auth-slate-rgb), .08), transparent 55%) padding-box,
        linear-gradient(var(--auth-card-bg), var(--auth-card-bg)) padding-box,
        conic-gradient(from var(--auth-angle), var(--auth-edge-a), var(--auth-edge-b), var(--auth-edge-c), var(--auth-edge-a)) border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    padding: 2rem 2.25rem 2.25rem;
    animation: auth-edge 14s linear infinite;
}
.auth-card::before {
    content: ""; position: absolute; inset: -2px; z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from var(--auth-angle), var(--auth-gradient-mid), rgb(var(--auth-slate-rgb)), #1E2F63, var(--auth-gradient-mid));
    filter: blur(22px);
    opacity: .38;
    animation: auth-edge 14s linear infinite;
    transition: opacity .3s ease;
}
.auth-card:focus-within::before { opacity: .6; }

.auth-card h1 {
    text-align: center;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--auth-title-a);
    background: linear-gradient(100deg, var(--auth-title-a), var(--auth-title-b) 75%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-card .sub { text-align: center; color: var(--auth-muted); font-size: .92rem; margin: .45rem 0 1.4rem; }

/* ── Campos en pastilla ── */
.auth-card label { display: block; font-weight: 600; font-size: .88rem; color: var(--auth-label); margin: 1rem 0 .45rem; }
.auth-card input[type=text], .auth-card input[type=password], .auth-card input[type=email] {
    width: 100%;
    border: 1px solid var(--auth-field-border);
    border-radius: var(--auth-radius-field);
    background: var(--auth-field-bg);
    padding: .8rem 1rem;
    font-size: .98rem;
    color: #22263a;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.auth-card input:focus {
    outline: none;
    border-color: var(--auth-gradient-mid);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--auth-accent-rgb), .18);
}

/* ── Botón principal: pastilla con degradado naranja y brillo ── */
.auth-card button {
    width: 100%;
    margin-top: 1.6rem;
    border: none;
    border-radius: 999px;
    padding: .9rem 2rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .2px;
    color: #fff;
    cursor: pointer;
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .32), transparent 45%),
        linear-gradient(120deg, var(--auth-gradient-start), var(--auth-gradient-mid) 45%, var(--auth-gradient-end) 100%);
    background-size: 100% 100%, 160% 100%;
    background-position: 0 0, 0% 0;
    box-shadow: 0 8px 24px rgba(var(--auth-primary-rgb), .35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    transition: transform .2s ease, box-shadow .2s ease, background-position .4s ease, filter .2s ease;
}
.auth-card button:hover, .auth-card button:focus-visible {
    transform: translateY(-1px);
    background-position: 0 0, 100% 0;
    box-shadow: 0 10px 30px rgba(var(--auth-primary-rgb), .45), 0 0 0 4px rgba(var(--auth-slate-rgb), .18);
    outline: none;
}
.auth-card button:active { transform: translateY(0); filter: brightness(.95); }
.auth-card button:disabled { cursor: progress; filter: saturate(.7) brightness(.97); transform: none; }

/* ── Mensajes y links ── */
.auth-card .msg { display: none; margin-top: 1rem; padding: .8rem 1rem; border-radius: 14px; font-size: .9rem; text-align: center; }
.auth-card .msg.err, .auth-card .login-error { color: #9f1239; background: #fff1f2; border: 1px solid #fecdd3; }
.auth-card .msg.ok { color: #14532d; background: #f0fdf4; border: 1px solid #bbf7d0; }
.auth-card .login-error { display: none; margin-top: 1rem; padding: .8rem 1rem; border-radius: 14px; font-size: .9rem; text-align: center; }
.auth-card hr { margin: 1.5rem 0 1rem; border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--auth-field-border), transparent); }
.auth-card .links { text-align: center; font-size: .93rem; color: var(--auth-muted); }
.auth-card a { color: var(--auth-primary-color); font-weight: 600; text-decoration: none; }
.auth-card a:hover { color: var(--auth-gradient-end); text-decoration: underline; }

.auth-foot { margin-top: 1.5rem; text-align: center; color: rgba(233, 236, 245, .5); font-size: .82rem; }

@keyframes auth-edge { to { --auth-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
    .auth-card, .auth-card::before { animation: none !important; }
}

@media (max-width: 576px) {
    body { padding: 16px 12px; }
    .auth-brand .wordmark { font-size: 2.5rem; }
    .auth-card { padding: 1.6rem 1.35rem 1.75rem; }
}