/* ============================================================
   Login ISBO — layout "split hero"
   Usado por Templates/IsboLogonWindowTemplateComponent.razor.
   Todo scoped bajo .isbo-login: no afecta al resto de la app.
   EXCEPCIÓN documentada del design system (§2.1): el hero del logon
   conserva diseño propio de marca (lila #5F21AD + celeste #149BE9).
   Regla: acá NO van overrides de clases .dxbl-* internas de DevExpress —
   los controles del formulario los pinta el tema Fluent.
   ============================================================ */

/* Tipografías del hero, self-hosted (sin dependencia de Google Fonts).
   Sora es variable (300-800); IBM Plex Mono en 500/600. Subset latin. */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/sora-latin-var.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
}

.isbo-login {
    display: flex;
    /* el .app de XAF define flex-direction: column; acá necesitamos fila */
    flex-direction: row;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ----- Panel izquierdo: hero de producto (ISBO ERP, by ImagineSOFT) -----
   Paleta CORPORATIVA: lila #5F21AD, celeste #149BE9, fondo oscuro #0A0A12,
   texto secundario #B8B8C4. Tipografías: Sora + IBM Plex Mono (self-hosted). */

.isbo-login-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 3rem;
    color: #FFFFFF;
    font-family: 'Sora', 'Arial Black', sans-serif;
    /* Degradado diagonal lila -> celeste (colores corporativos), con
       viñeta oscura (#0A0A12) en los bordes para dar profundidad. */
    background-color: #0A0A12;
    background-image:
        radial-gradient(120% 120% at 50% 45%, rgba(10, 10, 18, 0) 45%, rgba(10, 10, 18, 0.5) 100%),
        linear-gradient(135deg, #47108F 0%, #5F21AD 34%, #1F5CC6 68%, #149BE9 100%);
}

/* Capa 1 — grid de líneas finas (1px, blanco 3%) desvanecido hacia los bordes */
.isbo-login-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 30%, transparent 100%);
    pointer-events: none;
}

/* Capa 2 — glows radiales que dan volumen y dirigen la vista al centro */
.isbo-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
}

.isbo-hero-glow--lila {
    width: 420px;
    height: 420px;
    background: #7A2FE0;
    top: -10%;
    left: -12%;
}

.isbo-hero-glow--celeste {
    width: 460px;
    height: 460px;
    background: #2FB4FF;
    bottom: -12%;
    right: -14%;
}

/* Capa 3 — UI fantasma: insinuación de un dashboard del ERP (blanco 4-6%),
   detrás del contenido, leída como textura. */
.isbo-hero-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 560px;
    height: 380px;
    transform: translate(-50%, -52%) rotate(-3deg) scale(1.08);
    display: flex;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    filter: blur(1.5px);
    pointer-events: none;
}

.isbo-ghost-sidebar {
    width: 64px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding-right: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.isbo-ghost-sidebar span {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
}

.isbo-ghost-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.isbo-ghost-cards {
    display: flex;
    gap: 14px;
    height: 92px;
}

.isbo-ghost-cards span {
    flex: 1;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.isbo-ghost-table {
    flex: 1;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.isbo-ghost-table span {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}

/* ----- Contenido central del hero ----- */

.isbo-hero-content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.isbo-hero-isotipo {
    display: block;
    margin-bottom: 1.5rem;
}

/* Lockup del producto: "ISBO" (Sora ExtraBold) con el pill "ERP" (Plex Mono)
   centrado DEBAJO del wordmark, todo sobre el mismo eje vertical. */
.isbo-hero-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.isbo-hero-wordmark {
    font-family: 'Sora', 'Arial Black', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.isbo-hero-erp {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 2.5px;
    /* compensa visualmente el letter-spacing sobrante a la derecha del último caracter */
    text-indent: 2.5px;
    text-transform: uppercase;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 7px 15px;
}

/* Línea de acento entre el lockup y el tagline */
.isbo-hero-acento {
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin: 1.4rem 0 1.2rem;
}

.isbo-hero-tagline {
    font-family: 'Sora', sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    color: #B8B8C4;
    text-align: center;
    max-width: 420px;
    line-height: 1.6;
}

/* ----- Firma del fabricante (pie del hero) ----- */

.isbo-hero-firma {
    position: absolute;
    bottom: 48px;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.isbo-hero-firma-label {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #B8B8C4;
    opacity: 0.6;
}

.isbo-hero-firma svg {
    opacity: 0.9;
}

/* Reveal de entrada, sutil y escalonado */
@keyframes isbo-hero-reveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.isbo-hero-isotipo,
.isbo-hero-lockup,
.isbo-hero-acento,
.isbo-hero-tagline,
.isbo-hero-firma {
    animation: isbo-hero-reveal 0.6s ease-out both;
}

.isbo-hero-lockup { animation-delay: 0.1s; }
.isbo-hero-acento { animation-delay: 0.2s; }
.isbo-hero-tagline { animation-delay: 0.28s; }
.isbo-hero-firma { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .isbo-hero-isotipo,
    .isbo-hero-lockup,
    .isbo-hero-acento,
    .isbo-hero-tagline,
    .isbo-hero-firma {
        animation: none;
    }
}

/* ----- Panel derecho: formulario ----- */

.isbo-login-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* sigue al tema (claro/oscuro) vía tokens de isbo-brand.css */
    background: var(--isbo-surface-alt, #f9fafb);
    padding: 2rem;
}

.isbo-login-form-container {
    width: 100%;
    max-width: 400px;
}

.isbo-login-lang {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
}

.isbo-login-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--isbo-text, #111827);
    margin-bottom: 0.25rem;
}

.isbo-login-subtitle {
    font-size: 0.95rem;
    color: var(--isbo-text-secondary, #6b7280);
    margin-bottom: 1.75rem;
}

/* Logo a color, visible sólo en mobile (el hero se oculta) */
.isbo-login-logo-mobile {
    display: none;
    width: 64px;
    height: 71px;
    background: url('../images/Logo.svg') center / contain no-repeat;
    margin: 0 auto 1.25rem;
}

/* ----- Formulario (DetailView de XAF) -----
   Los campos y el botón los renderiza el tema Fluent con el acento de marca:
   NO se overridean clases .dxbl-* (design system §2.1). Los captions arriba
   del campo se configuran en el Application Model, no por CSS. */

.isbo-login .logon-toolbar {
    margin-top: 1.25rem;
}

/* ----- Responsive: en pantallas angostas se oculta el hero ----- */

@media (max-width: 900px) {
    .isbo-login-hero {
        display: none;
    }

    .isbo-login-form-side {
        padding: 1.5rem;
    }

    .isbo-login-logo-mobile {
        display: block;
    }
}