/* ════════════════════════════════════════════════════════════════
   LOGIN V2 — "Atelier Clínico" (2026-06-12)
   Capa de rediseño cargada DESPUÉS de extracted/login.css.
   Misma paleta índigo/violeta sobre navy; tipografía display serif
   Fraunces, motas de luz en el panel de marca, hairlines de luz,
   inputs y botones refinados. Cero cambios funcionales.
   Para revertir: quitar el <link> en login.html.
   ════════════════════════════════════════════════════════════════ */

:root {
    --font-display-v2: 'Fraunces', Georgia, 'Times New Roman', serif;
    --lv2-hairline: linear-gradient(160deg,
        rgba(167, 139, 250, 0.5) 0%,
        rgba(99, 102, 241, 0.1) 40%,
        rgba(99, 102, 241, 0.04) 62%,
        rgba(139, 92, 246, 0.32) 100%);
}

/* ─────────────────────────────────────────────
   FONDO — aurora + grano de película
   ───────────────────────────────────────────── */
.bg-canvas::before {
    content: '';
    position: absolute; inset: -20%;
    background:
        conic-gradient(from 210deg at 30% 20%,
            transparent 0deg,
            rgba(99, 102, 241, 0.08) 60deg,
            transparent 130deg,
            rgba(139, 92, 246, 0.06) 220deg,
            transparent 300deg);
    animation: lv2Aurora 36s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes lv2Aurora {
    from { transform: rotate(0deg) scale(1); }
    to   { transform: rotate(8deg) scale(1.08); }
}
.bg-canvas::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.035;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.grid-pattern {
    background-image:
        radial-gradient(circle at center, rgba(167, 139, 250, 0.06) 1px, transparent 1.5px),
        linear-gradient(rgba(99, 102, 241, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.025) 1px, transparent 1px);
    background-size: 120px 120px, 60px 60px, 60px 60px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 30%, transparent 100%);
}

/* ─────────────────────────────────────────────
   CONTENEDOR — hairline de luz alrededor
   ───────────────────────────────────────────── */
.login-wrapper {
    border-radius: 32px;
    box-shadow:
        0 60px 140px -40px rgba(3, 3, 14, 0.9),
        0 0 80px -30px rgba(99, 102, 241, 0.35);
}
.login-wrapper::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 32px;
    padding: 1px;
    background: var(--lv2-hairline);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 30;
}

/* ─────────────────────────────────────────────
   PANEL DE MARCA — motas de luz + serif editorial
   ───────────────────────────────────────────── */
.brand-panel {
    background:
        linear-gradient(165deg, rgba(26, 26, 52, 0.78) 0%, rgba(14, 14, 32, 0.92) 100%);
    border: none;
}
/* Motas de luz ascendentes en el panel de marca (sin hélice — feedback usuario).
   landing-fx.js initMotes() genera los <span>. */
.login-motes {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.login-motes span {
    position: absolute;
    top: 102%;
    border-radius: 50%;
    background: var(--mote-c, rgba(165, 180, 252, 0.7));
    box-shadow: 0 0 10px 2px var(--mote-glow, rgba(129, 140, 248, 0.35));
    animation:
        moteRise var(--mote-dur, 14s) linear infinite,
        moteSway var(--mote-sway, 4s) ease-in-out infinite alternate;
}
@keyframes moteRise {
    0%   { top: 102%; opacity: 0; }
    10%  { opacity: var(--mote-o, 0.8); }
    80%  { opacity: calc(var(--mote-o, 0.8) * 0.6); }
    100% { top: -5%; opacity: 0; }
}
@keyframes moteSway {
    from { transform: translateX(-6px); }
    to   { transform: translateX(6px); }
}
.brand-header, .features-section, .ai-section {
    position: relative;
    z-index: 2;
}
.brand-title {
    font-family: var(--font-display-v2);
    font-weight: 560;
    font-variation-settings: 'opsz' 110;
    letter-spacing: -0.015em;
    font-size: 2.4rem;
    background: linear-gradient(115deg, #ffffff 5%, #c4b5fd 60%, #818cf8 110%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.brand-title-accent {
    font-style: italic;
    font-weight: 520;
}
.brand-subtitle { font-weight: 350; }
.brand-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a5b4fc;
}
/* Badge "Premium": de pill chillón a sello sobrio */
.brand-badge {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.45);
    color: #c4b5fd;
    animation: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 500;
}
.brand-status {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

/* Feature cards del panel: vidrio + hairline + halo cursor */
.feature-card {
    position: relative;
    background: rgba(22, 22, 44, 0.55);
    border: none;
    overflow: hidden;
    box-shadow:
        0 16px 40px -18px rgba(5, 5, 18, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.feature-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lv2-hairline);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
.feature-card::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
        rgba(129, 140, 248, 0.12), transparent 65%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.feature-card:hover::after { opacity: 1; }
.feature-card:hover {
    transform: translateX(4px);
    box-shadow:
        0 20px 50px -18px rgba(5, 5, 18, 0.85),
        0 0 36px -14px rgba(99, 102, 241, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.feature-text h4 { letter-spacing: 0.005em; }
.feature-icon {
    box-shadow:
        0 12px 28px -8px rgba(99, 102, 241, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Chips de niveles IA */
.ai-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ai-chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(129, 140, 248, 0.22);
    border-radius: 999px;
    transition: all 0.3s var(--ease-premium, cubic-bezier(0.23, 1, 0.32, 1));
}
.ai-chip:hover {
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
}

/* ─────────────────────────────────────────────
   PANEL DE FORMULARIO
   ───────────────────────────────────────────── */
.form-panel {
    background:
        linear-gradient(170deg, rgba(20, 20, 42, 0.88) 0%, rgba(13, 13, 30, 0.96) 100%);
    border: none;
}
.form-title {
    font-family: var(--font-display-v2);
    font-weight: 560;
    font-variation-settings: 'opsz' 90;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #ffffff 20%, #c7cdf4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.form-icon-container {
    position: relative;
    border-radius: 50%;
    box-shadow:
        0 14px 34px -10px rgba(99, 102, 241, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.form-icon-container::after {
    content: '';
    position: absolute; inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(129, 140, 248, 0.3);
    border-top-color: rgba(196, 181, 253, 0.8);
    animation: lv2IconOrbit 6s linear infinite;
}
@keyframes lv2IconOrbit {
    to { transform: rotate(360deg); }
}

/* Tabs */
.login-tabs-top {
    background: rgba(10, 10, 24, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 999px;
    box-shadow: inset 0 2px 8px rgba(3, 3, 14, 0.5);
}
.login-tab-btn { border-radius: 999px; }
.login-tab-btn.active {
    box-shadow:
        0 6px 20px -6px rgba(99, 102, 241, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Inputs — foco con anillo de luz */
.input-field {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(99, 102, 241, 0.18);
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.input-field:focus {
    border-color: rgba(139, 92, 246, 0.65);
    background: rgba(99, 102, 241, 0.07);
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.16),
        0 0 24px -6px rgba(99, 102, 241, 0.45);
}

/* Botón principal — pill con barrido de luz */
.btn-submit {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    box-shadow:
        0 12px 34px -8px rgba(99, 102, 241, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-submit::after {
    content: '';
    position: absolute; top: 0; left: -120%;
    width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transition: left 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}
.btn-submit:hover::after { left: 130%; }

/* OAuth — se mantienen blancos (convención Google, máximo contraste);
   solo se refina la forma a pill */
.auth-alt-google { border-radius: 999px; }
.auth-alt-divider span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.security-info {
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.16);
}
.security-info i { color: #34d399; }

/* ─────────────────────────────────────────────
   ACCESIBILIDAD
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bg-canvas::before,
    .form-icon-container::after,
    .btn-submit::after { animation: none !important; }
    .login-motes span { animation: none !important; display: none; }
}