/* ============================================================================
   FlowTrix — Autenticación (rediseño)
   Pantalla de acceso: login, registro (asistente de 3 pasos) y recuperación.
   Layout de dos paneles con corte diagonal; tema oscuro "network intelligence".

   Estructura del archivo:
     1. Tokens de diseño (variables)
     2. Base y utilidades
     3. Layout de paneles (izquierdo/hero, derecho/formularios)
     4. Cabecera: navegación + selector de idioma
     5. Panel hero (marca, titular, tarjeta de red)
     6. Tarjeta de formularios: tabs, campos, botones
     7. Registro: asistente por pasos + medidor de contraseña
     8. Recuperación de contraseña
     9. Pie de página
    10. Alertas y estados
    11. Responsivo
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Tokens de diseño                                                 */
/* ------------------------------------------------------------------ */
:root {
    /* Fondos y superficies */
    --ft-bg: #070A12;
    --ft-surface: #0B1220;
    --ft-surface-2: #0E1626;

    /* Bordes */
    --ft-border: #2A3441;
    --ft-border-soft: #1E2836;

    /* Texto */
    --ft-text: #F9FAFB;
    --ft-text-label: #D1D5DB;
    --ft-text-muted: #9CA3AF;
    --ft-text-dim: #64748B;

    /* Marca / acentos */
    --ft-primary: #2563EB;
    --ft-primary-400: #3B82F6;
    --ft-primary-300: #60A5FA;
    --ft-primary-200: #93C5FD;

    /* Estados */
    --ft-success: #10B981;
    --ft-warning: #F59E0B;
    --ft-danger: #EF4444;

    /* Tipografía */
    --ft-font: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
    --ft-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Radios y sombras */
    --ft-radius: 11px;
    --ft-radius-lg: 13px;
    --ft-shadow-btn: 0 10px 24px -8px rgba(37, 99, 235, .7);
}

/* ------------------------------------------------------------------ */
/* 2. Base y utilidades                                                */
/* ------------------------------------------------------------------ */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--ft-bg);
    color: var(--ft-text);
    font-family: var(--ft-font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ft-primary-400); text-decoration: none; }
a:hover { color: var(--ft-primary-300); }

input { font-family: inherit; }
input::placeholder { color: #4B5568; }
input:-webkit-autofill {
    -webkit-text-fill-color: var(--ft-text);
    -webkit-box-shadow: 0 0 0 40px var(--ft-surface) inset;
}

.ft-muted { color: var(--ft-text-muted); }
[hidden] { display: none !important; }

/* Animaciones compartidas */
@keyframes ftFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ftMenu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ftDash { to { stroke-dashoffset: -1000; } }
@keyframes ftShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-7px); }
    40%, 80% { transform: translateX(7px); }
}
.ft-shake { animation: ftShake .45s ease; }

/* ------------------------------------------------------------------ */
/* 3. Layout de paneles                                                */
/* ------------------------------------------------------------------ */
.auth {
    position: relative;
    height: 100vh;
    min-height: 660px;
    overflow: hidden;
    background: var(--ft-bg);
}

.auth__panel { position: absolute; top: 0; bottom: 0; overflow: hidden; }

/* Panel derecho: capa base con los formularios */
.auth__panel--form {
    right: 0;
    width: 52%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 28px;
    background: radial-gradient(120% 95% at 88% 100%, var(--ft-surface-2) 0%, #0A0F1A 55%, var(--ft-bg) 100%);
    /* Aísla el apilamiento interno: el destello de éxito queda detrás del
       formulario y contenido dentro del panel, sin afectar hero/divisor. */
    isolation: isolate;
}

/* Panel izquierdo: hero con corte diagonal, dibujado por encima.
   La marca se fija arriba a la izquierda y el bloque hero se centra
   verticalmente (como en el diseño original). */
.auth__panel--hero {
    left: 0;
    width: 54%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    background: radial-gradient(120% 90% at 12% 0%, #0D1526 0%, var(--ft-bg) 55%);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}

/* Resalto de luz sobre la diagonal que separa ambos paneles.
   La forma es una banda delgada que sigue el mismo corte del clip-path del
   hero (de 100% arriba a 90% abajo del ancho del panel = 54% → 48.6% del
   viewport), con degradado vertical y glow azul. */
.auth__divider {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    clip-path: polygon(54% 0, 54.09% 0, 48.69% 100%, 48.6% 100%);
    background: linear-gradient(
        to bottom,
        rgba(96, 165, 250, 0) 14%,
        rgba(96, 165, 250, .8) 42%,
        rgba(96, 165, 250, .9) 50%,
        rgba(96, 165, 250, .8) 58%,
        rgba(96, 165, 250, 0) 86%
    );
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, .65));
}

/* Decoraciones del panel derecho */
.auth__topo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: .5; pointer-events: none;
    -webkit-mask-image: radial-gradient(135% 125% at 55% 42%, #000 26%, transparent 82%);
    mask-image: radial-gradient(135% 125% at 55% 42%, #000 26%, transparent 82%);
}
.auth__spotlight {
    position: absolute; top: 50%; left: 56%;
    transform: translate(-50%, -50%);
    width: 560px; height: 640px;
    background: radial-gradient(ellipse at center, rgba(37, 99, 235, .12), transparent 62%);
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* 4. Cabecera: navegación + selector de idioma                        */
/* ------------------------------------------------------------------ */
.auth__header {
    position: absolute;
    top: 26px; left: 6%; right: 5%;
    z-index: 8;
}
.auth__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.auth__nav-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--ft-text-muted);
    cursor: pointer;
}
.auth__nav-link:hover { color: var(--ft-text); }

/* Botón "Soporte" y botones fantasma en general */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid var(--ft-border);
    background: var(--ft-surface);
    color: var(--ft-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .16s;
}
.btn-ghost:hover { border-color: var(--ft-primary-400); background: var(--ft-surface-2); }

/* Selector de idioma */
.lang { position: relative; }
.lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 10px;
    border: 1px solid var(--ft-border);
    background: var(--ft-surface);
    color: var(--ft-text);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--ft-mono);
    cursor: pointer;
    transition: all .16s;
}
.lang__btn:hover,
.lang.is-open .lang__btn { border-color: var(--ft-primary-400); background: var(--ft-surface-2); }
.lang__chevron { transition: transform .2s; }
.lang.is-open .lang__chevron { transform: rotate(180deg); }

.lang__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 168px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--ft-border);
    background: var(--ft-surface);
    box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .9);
    z-index: 20;
    animation: ftMenu .16s ease;
}
.lang__opt {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--ft-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .14s;
}
.lang__opt:hover { background: #141C2B; }
.lang__opt.is-active { background: var(--ft-surface-2); }
.lang__check { color: var(--ft-primary-400); font-size: 14px; }

/* ------------------------------------------------------------------ */
/* 5. Panel hero (izquierdo)                                           */
/* ------------------------------------------------------------------ */
.hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(59, 130, 246, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, .055) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(120% 100% at 30% 20%, #000 0%, transparent 75%);
    mask-image: radial-gradient(120% 100% at 30% 20%, #000 0%, transparent 75%);
}
.hero__orb {
    position: absolute; top: -120px; right: -80px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(37, 99, 235, .22), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}
.hero__radar {
    position: absolute; top: 50%; right: -150px;
    transform: translateY(-50%);
    opacity: .17;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at center, #000 52%, transparent 74%);
    mask-image: radial-gradient(circle at center, #000 52%, transparent 74%);
}

/* Marca: anclada arriba a la izquierda del panel hero */
.brand {
    position: absolute;
    top: 48px;
    left: 56px;
    display: flex;
    align-items: center;
    gap: 13px;
}
.brand__mark { display: block; filter: drop-shadow(0 0 16px rgba(59, 130, 246, .55)); }
.brand__text { display: flex; flex-direction: column; gap: 2px; }
.brand__name {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    background: linear-gradient(to top, var(--ft-text) 10%, var(--ft-primary-200) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand__tag {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--ft-text-dim);
    font-family: var(--ft-mono);
}

/* Sello institucional: origen académico del proyecto.
   Va en el flujo del panel, no posicionado: el margen superior automático lo
   lleva al pie y el inferior reserva la franja de .hero__legal, de modo que
   nunca puede solaparse con la tarjeta del hero aunque ésta crezca. */
.inst-seal {
    margin-top: auto;
    margin-bottom: 26px;
    max-width: 460px;
}

/* El titular se reparte con el sello el espacio libre del panel */
.auth__panel--hero .hero__body { margin-top: auto; }

.inst-seal__logos {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.inst-seal__logos img {
    height: 44px;
    width: auto;
    opacity: .9;
}

.inst-seal__title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ft-text);
    letter-spacing: -.01em;
    line-height: 1.45;
}

.inst-seal__org {
    margin: 4px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ft-text-dim);
    line-height: 1.45;
}

/* El espejo solo existe en móvil; en escritorio manda el del hero */
.inst-seal--mobile {
    display: none;
}

/* Leyenda institucional: anclada abajo a la izquierda del panel hero */
.hero__legal {
    position: absolute;
    bottom: 48px;
    left: 56px;
    margin: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ft-text-dim);
    letter-spacing: .01em;
}

/* Titular */
.hero__body { position: relative; max-width: 600px; }
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .1);
    border: 1px solid rgba(37, 99, 235, .28);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ft-primary-200);
    margin-bottom: 26px;
    font-family: var(--ft-mono);
}
.hero__badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ft-success);
    box-shadow: 0 0 8px var(--ft-success);
}
.hero__title {
    font-size: 44px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 18px;
    text-wrap: balance;
}
.hero__title-accent { color: var(--ft-primary-400); }
.hero__sub {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ft-text-muted);
    margin: 0 0 34px;
    max-width: 460px;
}

/* Tarjeta de red (ilustración del globo + copy) */
.hero__card {
    display: flex;
    align-items: center;
    gap: 26px;
    max-width: 520px;
    padding: 22px 24px;
    border-radius: 18px;
    border: 1px solid rgba(59, 130, 246, .16);
    background: linear-gradient(160deg, rgba(17, 24, 39, .7), rgba(9, 13, 22, .7));
    backdrop-filter: blur(6px);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85);
}
.hero__card-globe { flex: none; display: block; }
.hero__card-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ft-success);
    font-family: var(--ft-mono);
    margin-bottom: 8px;
}
/* Punto verde con "respiración" (latido suave) */
.hero__card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ft-success);
    box-shadow: 0 0 8px var(--ft-success);
    animation: ftBreathe 2.4s ease-in-out infinite;
}
@keyframes ftBreathe {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px var(--ft-success); }
    50% { opacity: .45; transform: scale(.72); box-shadow: 0 0 3px var(--ft-success); }
}
.hero__card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.hero__card-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ft-text-muted);
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* 6. Tarjeta de formularios                                           */
/* ------------------------------------------------------------------ */
.auth__form {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 344px;
}

/* Marca compacta (solo visible en móvil, ver responsivo) */
.auth__brand-mobile {
    display: none;
    align-items: center;
    gap: 11px;
    justify-content: center;
    margin-bottom: 26px;
}

/* Tabs Login / Registro */
.tabs {
    display: flex;
    padding: 5px;
    background: var(--ft-surface);
    border: 1px solid var(--ft-border-soft);
    border-radius: var(--ft-radius-lg);
    margin-bottom: 26px;
}
.tabs__btn {
    flex: 1;
    padding: 10px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--ft-text-muted);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
}
.tabs__btn.is-active {
    background: linear-gradient(180deg, var(--ft-primary-400), var(--ft-primary));
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .7);
}

/* Pantallas */
.screen { animation: ftFade .4s ease; }
.screen__title {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 7px;
}
.screen__desc {
    font-size: 14px;
    color: var(--ft-text-muted);
    margin: 0 0 28px;
}

/* Botón "Continuar con Google". */
.btn-oauth {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 12px;
    border-radius: var(--ft-radius);
    border: 1px solid var(--ft-border);
    background: var(--ft-surface);
    color: var(--ft-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}
.btn-oauth:hover { border-color: var(--ft-primary-400); background: var(--ft-surface-2); }
/* Logo a color de Google encerrado en su círculo blanco. */
.btn-oauth__badge {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: #fff;
}

/* Separador "o con tu correo" */
.divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
}
.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ft-border);
}
.divider span {
    font-size: 11.5px;
    color: var(--ft-text-dim);
    font-family: var(--ft-mono);
}

/* Campos */
.field { margin-bottom: 18px; }
.field__label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ft-text-label);
    margin-bottom: 8px;
}
.field__label--row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.field__link { font-size: 12px; font-weight: 500; cursor: pointer; }

.control { position: relative; }
.control__icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ft-text-dim);
    display: flex;
}
.control__toggle {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--ft-text-dim);
    display: flex;
}
.control__toggle:hover { color: var(--ft-text-muted); }

.input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--ft-radius);
    border: 1px solid var(--ft-border);
    background: var(--ft-surface);
    color: var(--ft-text);
    font-size: 14px;
    outline: none;
    transition: all .16s;
}
.input:focus {
    border-color: var(--ft-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}
.auth .input:focus-visible { outline: none !important; }
.input--icon { padding-left: 42px; }
.input--toggle { padding-right: 44px; }
.input--invalid { border-color: var(--ft-danger); }

select.input { appearance: none; cursor: pointer; padding-right: 40px; }
.control__caret {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ft-text-dim);
    display: flex;
}

/* Botón primario */
.btn-primary {
    width: 100%;
    padding: 13px;
    border-radius: var(--ft-radius);
    border: none;
    background: linear-gradient(180deg, var(--ft-primary-400), var(--ft-primary));
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--ft-shadow-btn);
    transition: all .18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -8px rgba(37, 99, 235, .85);
}
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Enlace de cambio de pantalla al pie del formulario */
.switch {
    text-align: center;
    font-size: 13px;
    color: var(--ft-text-muted);
    margin: 22px 0 0;
}
.switch a { font-weight: 600; cursor: pointer; }

/* Spinner de carga */
.loader {
    width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ftSpin .7s linear infinite;
}
@keyframes ftSpin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* 7. Registro: asistente por pasos                                    */
/* ------------------------------------------------------------------ */
.steps { display: flex; gap: 6px; margin-bottom: 22px; }
.steps__seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--ft-border-soft);
    transition: background .3s;
}
.steps__seg.is-on { background: var(--ft-primary); }

.step-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.step-head__kicker {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ft-primary-400);
    font-family: var(--ft-mono);
}
.step-head__name { font-size: 11.5px; color: var(--ft-text-dim); }

/* Recorta solo en horizontal (para ocultar los pasos contiguos) y deja que la
   sombra/brillo de los botones salga en vertical, como en el login; así no se
   marcan los bordes del contenedor al pasar el mouse. */
.wizard {
    overflow: hidden;
    transition: height .28s ease;
}
.wizard__track {
    display: flex;
    width: 400%;
    align-items: flex-start;
    transition: transform .45s cubic-bezier(.4, 0, .15, 1);
}
.wizard__step { width: 25%; flex: 0 0 25%; }

/* Los botones del asistente van a todo el ancho del paso, así que una sombra
   con difusión lateral se recortaría en los lados del carrusel. Se usa una
   sombra prácticamente solo vertical (mismo aire flotante, sin marcar bordes). */
.wizard .btn-primary { box-shadow: 0 14px 24px -20px rgba(37, 99, 235, .75); }
.wizard .btn-primary:hover:not(:disabled) {
    box-shadow: 0 22px 34px -30px rgba(37, 99, 235, .95);
}

/* Nota informativa (paso ubicación) */
.hint {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ft-text-dim);
    margin: 0 0 20px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}
.hint svg { flex: none; margin-top: 1px; }

/* Fila de botones back / next */
.btn-row { display: flex; gap: 10px; }
.btn-row .btn-primary { flex: 1; }
.btn-back {
    flex: 0 0 auto;
    padding: 13px 20px;
    border-radius: var(--ft-radius);
    border: 1px solid var(--ft-border);
    background: var(--ft-surface);
    color: var(--ft-text-label);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .16s;
}
.btn-back:hover { border-color: #475569; }

/* Prefijo @ del usuario */
.control__prefix {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--ft-text-dim);
    font-family: var(--ft-mono);
    font-size: 14px;
}
.input--prefix { padding-left: 34px; }

/* Botón "Verificar" embebido en el campo de correo */
.control__inline-btn {
    position: absolute;
    right: 6px; top: 6px; bottom: 6px;
    padding: 0 14px;
    border-radius: 8px;
    border: none;
    background: rgba(37, 99, 235, .15);
    color: var(--ft-primary-300);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s;
}
.control__inline-btn:hover { background: rgba(37, 99, 235, .28); }
.control__inline-btn:disabled { opacity: .55; cursor: not-allowed; }
.input--inline-btn { padding-right: 92px; }

/* Verificación de correo por código embebida en el campo */
#reg_code { letter-spacing: 3px; font-family: var(--ft-mono); }

/* Correo verificado: se resalta en azul de marca (no verde) para no romper
   con la identidad del diseño. */
.control__icon--ok { display: none; color: var(--ft-primary-300); }
#regEmailField[data-verify="done"] .control__icon--ok { display: flex; }
#regEmailField[data-verify="done"] #reg_email {
    padding-left: 42px;
    padding-right: 14px;
    border-color: var(--ft-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
    color: var(--ft-text-muted);
}
#regEmailField[data-verify="done"] #btnVerifyEmail { display: none; }

.verify-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 11.5px;
}
.verify-foot__hint { color: var(--ft-text-dim); }
.verify-foot__actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.verify-foot__sep { color: var(--ft-border); }
.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--ft-primary-300);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
.link-btn:hover { color: var(--ft-primary-400); text-decoration: underline; }
.link-btn:disabled { opacity: .55; cursor: not-allowed; text-decoration: none; }

/* Contenedor del botón de Google. */
.oauth-slot { display: flex; justify-content: center; min-height: 44px; }

/* Teléfono: selector de código de país + número */
.control--tel { display: flex; gap: 8px; }
.tel__code {
    flex: 0 0 auto;
    width: 108px;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.tel__number { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------ */
/* 8. Feedback: error por campo, destello de éxito, nota contextual     */
/* ------------------------------------------------------------------ */

/* Texto rojo sutil bajo un campo (solo errores de servidor) */
.field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ft-danger);
    animation: ftHintIn .22s ease;
}
.field-error svg { flex: none; }
@keyframes ftHintIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Realce del borde inválido (refuerza input--invalid) */
.input--invalid {
    border-color: var(--ft-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

/* Éxito de login/registro: la topología de red del fondo "despierta" (sube su
   brillo) y corren paquetes por sus líneas. Sin destello ni cambio de layout. */
.auth__topo.is-pulsing { animation: ftTopoWake 1.4s ease-in-out forwards; }
@keyframes ftTopoWake {
    0%   { opacity: .5; }
    30%  { opacity: .7; }
    70%  { opacity: .7; }
    100% { opacity: .5; }
}

.auth__topo #topoEdges line { transition: stroke .5s ease; }
.auth__topo.is-pulsing #topoEdges line { stroke: rgba(96, 165, 250, .38); }

.auth__topo #topoNodes circle { transition: fill .5s ease; }
.auth__topo.is-pulsing #topoNodes circle { fill: #7fb0e8; }

/* Paquetes que viajan por las aristas (capa temporal creada en JS).
   Sin filtros (drop-shadow por frame causaba jank): basta el color claro. */
.topo-pulses line { opacity: .85; }

/* Nota breve anclada a un elemento (acciones pendientes) */
.anchor-note {
    position: fixed;
    z-index: 300;
    transform: translate(-50%, 4px);
    max-width: 240px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #131e30;
    border: 1px solid var(--ft-border);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
    color: var(--ft-text-muted);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.anchor-note.is-in { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
    .field-error { animation: none; }
    /* El grafo solo sube su brillo (los paquetes no se lanzan, ver login.js). */
}

/* Medidor de fuerza de contraseña */
.pw-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 14px;
}
.pw-meter__bar {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--ft-border-soft);
    overflow: hidden;
}
.pw-meter__fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: all .3s;
}
.pw-meter__label {
    font-size: 11px;
    font-weight: 600;
    min-width: 52px;
    text-align: right;
    font-family: var(--ft-mono);
    color: var(--ft-text-dim);
}

/* Términos y condiciones */
.terms {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    margin-bottom: 16px;
    user-select: none;
}
.terms__box {
    flex: none;
    width: 20px; height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    border: 1px solid var(--ft-border);
    background: var(--ft-surface);
    transition: all .16s;
}
.terms.is-checked .terms__box {
    border-color: var(--ft-primary);
    background: linear-gradient(180deg, var(--ft-primary-400), var(--ft-primary));
    box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .6);
}
.terms__text { font-size: 12px; line-height: 1.5; color: var(--ft-text-muted); }
.terms__text a { color: var(--ft-primary); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* 8. Recuperación de contraseña                                       */
/* ------------------------------------------------------------------ */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ft-text-muted);
    cursor: pointer;
    margin-bottom: 26px;
}
.back-link:hover { color: var(--ft-text); }

.icon-badge {
    width: 46px; height: 46px;
    border-radius: var(--ft-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, .12);
    border: 1px solid rgba(37, 99, 235, .25);
    margin-bottom: 18px;
}
.icon-badge--success {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .3);
}

/* ------------------------------------------------------------------ */
/* 9. Pie de página                                                    */
/* ------------------------------------------------------------------ */
.auth__footer {
    position: absolute;
    bottom: 22px; left: 6%; right: 5%;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.footer__social { display: flex; align-items: center; gap: 12px; }
.footer__icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ft-border-soft);
    background: var(--ft-surface);
    color: var(--ft-text-dim);
    cursor: pointer;
    transition: all .16s;
}
.footer__icon:hover { color: var(--ft-primary-400); border-color: var(--ft-border); }
.footer__icon--unavailable { opacity: .48; cursor: not-allowed; }
.footer__icon--unavailable:hover { color: inherit; border-color: var(--ft-border-soft); }
.footer__legal { display: flex; align-items: center; gap: 18px; }
.footer__legal a {
    font-size: 12px;
    font-weight: 500;
    color: var(--ft-text-dim);
    cursor: pointer;
}
.footer__legal a:hover { color: var(--ft-text-muted); }

/* ------------------------------------------------------------------ */
/* 10. Responsivo                                                      */
/* ------------------------------------------------------------------ */

/* Tablet: reduce el ancho del hero y la escala del titular */
@media (max-width: 1200px) {
    .auth__panel--hero { width: 50%; padding: 40px; }
    .auth__panel--form { width: 54%; }
    .brand { top: 40px; left: 40px; }
    .hero__title { font-size: 38px; }
    /* La diagonal ahora corta en 50% → 45% del viewport */
    .auth__divider { clip-path: polygon(50% 0, 50.09% 0, 45.09% 100%, 45% 100%); }
    .hero__legal { bottom: 40px; left: 40px; }
}

/* Alturas reducidas (portátiles de 1366x768 y similares) y ventanas estrechas,
   donde la tarjeta del hero crece al reajustarse: el sello se resuelve en una
   sola línea para devolverle aire al titular sin perder la atribución. */
@media (min-width: 901px) and (max-height: 830px),
       (min-width: 901px) and (max-width: 1120px) and (max-height: 900px) {
    .auth__panel--hero .inst-seal {
        display: flex;
        align-items: center;
        gap: 14px;
        max-width: 560px;
    }
    .auth__panel--hero .inst-seal__logos { flex: none; gap: 11px; margin-bottom: 0; }
    .auth__panel--hero .inst-seal__logos img { height: 32px; }
    .auth__panel--hero .inst-seal__title { font-size: 11.5px; }
    .auth__panel--hero .inst-seal__org { display: none; }
}

/* Ventanas de escritorio realmente justas (poco alto útil, o estrechas y
   bajas a la vez): el hero baja de escala para que marca, titular, tarjeta y
   sello quepan sin pisarse. */
@media (min-width: 901px) and (max-height: 700px),
       (min-width: 901px) and (max-width: 1000px) and (max-height: 800px) {
    .hero__badge { margin-bottom: 18px; }
    .hero__title { font-size: 32px; }
    .hero__sub { margin-bottom: 24px; }
    .hero__card { gap: 18px; padding: 16px 18px; }
    .hero__card-globe { width: 96px; height: 96px; }
}

/* Móvil / vertical: una sola columna, sin corte diagonal */
@media (max-width: 900px) {
    .auth {
        height: auto;
        min-height: 100vh;
        display: block;
        /* Recorta la decoración que sobresale a los lados sin crear scroll
           horizontal ni alterar el centrado de la columna del formulario. */
        overflow-x: clip;
    }
    /* El hero decorativo se oculta; su marca se muestra compacta arriba */
    .auth__panel--hero { display: none; }
    /* El halo de fondo (560px) sobresaldría del viewport en móvil */
    .auth__spotlight { display: none; }
    /* Sin corte diagonal en móvil, no hay divisor que resaltar */
    .auth__divider { display: none; }

    .auth__panel--form {
        position: relative;
        width: 100%;
        min-height: 100vh;
        padding: 92px 20px 84px;
    }
    .auth__brand-mobile { display: flex; }

    /* El sello del hero no existe aquí; se muestra el espejo compacto */
    .inst-seal {
        display: none;
    }

    .inst-seal--mobile {
        display: block;
        position: static;
        max-width: none;
        margin: 0 0 22px;
    }

    .inst-seal--mobile .inst-seal__logos {
        gap: 11px;
        margin-bottom: 9px;
    }

    .inst-seal--mobile .inst-seal__logos img {
        height: 30px;
    }

    .inst-seal--mobile .inst-seal__title {
        font-size: 11.5px;
    }

    /* Cabecera y pie pasan a flujo relativo dentro del panel.
       En móvil se ocultan los enlaces de texto secundarios (Guía / Acerca de)
       para dejar solo el idioma y Soporte, evitando que la barra se recorte. */
    .auth__header { left: 20px; right: 20px; top: 18px; }
    .auth__nav { gap: 10px; justify-content: flex-end; }
    .auth__nav-link,
    .auth__nav .btn-ghost { display: none; }
    .auth__footer {
        left: 20px; right: 20px; bottom: 16px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* Pantallas muy estrechas: reduce la escala del titular del hero */
@media (max-width: 480px) {
    .hero__title { font-size: 32px; }
}
/* Paso de perfil de uso: comparte la paleta y los controles del inicio de sesión. */
.onboard-progress { margin: 0 0 10px; color: var(--ft-primary-300); font: 600 11px var(--ft-mono); letter-spacing: .04em; text-transform: uppercase; }
.onboard-section { margin-bottom: 18px; }
.onboard-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.onboard-cards button { min-height: 62px; padding: 11px; border: 1px solid #2A3441; border-radius: 10px; background: #101A2B; color: #D7E1F1; font: 600 12px/1.3 inherit; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.onboard-cards button:hover, .onboard-cards button.is-selected { border-color: #3B82F6; background: #152741; color: #E6F0FF; box-shadow: 0 0 0 1px rgba(59,130,246,.25); }
.onboard-cards button:active { filter: brightness(1.08); }
.onboard-cards button.is-just-selected { animation: onboard-card-select .3s cubic-bezier(.2,.8,.3,1); }
.onboard-cards.is-selection-required { animation: ftSelectionRequired .5s ease; }
.onboard-cards.is-selection-required button { border-color: #D99A3A; box-shadow: 0 0 0 1px rgba(217,154,58,.24); }
.onboard-cards + .input { margin-top: 14px; }

@keyframes ftSelectionRequired {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.onboard-license-summary { margin: 0 0 16px; padding: 14px 15px; border: 1px solid rgba(59,130,246,.42); border-radius: 10px; background: rgba(21,39,65,.72); color: #E6F0FF; font-size: 13px; line-height: 1.45; }
#ob-org { margin-top: 18px; }
#ob-org .field { margin-bottom: 14px; }
#cp-org { margin-top: 18px; }
#cp-org .field { margin-bottom: 14px; }
#ob-range-field .input, #ob-org .input, #cp-range-field .input, #cp-org .input { box-sizing: border-box; min-height: 44px; }
@keyframes onboard-card-select { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(1.2); } }
.onboard-nav { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 16px; }
.onboard-nav .btn-primary, .onboard-nav .btn-back { flex: 1; }
.cp-onboarding { padding: 2px 0 0; }
.screen[data-screen="completar"] { max-height: min(680px, calc(100vh - 150px)); overflow-y: auto; padding-right: 4px; }
.screen[data-screen="completar"] .btn-primary { box-shadow: 0 9px 18px -15px rgba(37,99,235,.58); }
.screen[data-screen="completar"] .btn-primary:hover:not(:disabled) { box-shadow: 0 12px 22px -16px rgba(37,99,235,.7); }
.screen[data-screen="completar"]::-webkit-scrollbar { width: 6px; }
.screen[data-screen="completar"]::-webkit-scrollbar-thumb { background: #2b4264; border-radius: 6px; }
@media (max-width: 520px) { .onboard-cards { grid-template-columns: 1fr; } }