/* ============================================================
   Login SIFEN — layout "split hero"
   Usado por Templates/SifenLogonWindowTemplateComponent.razor.
   Todo scoped bajo .sifen-login: no afecta al resto de la app.

   EXCEPCIÓN documentada del design system (sifen-design §2.1): el hero del
   logon conserva diseño propio de marca (lila #5F21AD + celeste #149BE9).
   Son colores Tier 1 (§4.1): idénticos en ISBO y SIFEN, y NO deben seguir al
   tema elegido en el ThemeSwitcher. Por eso van como hex y no como token.

   Regla: acá NO van overrides de clases .dxbl-* internas de DevExpress — los
   controles del formulario los pinta el tema Fluent.

   Mismo patrón que ISBO3 (ISBO.Blazor.Server/wwwroot/css/login.css).
   ============================================================ */

.sifen-login {
    display: flex;
    /* CLAVE: el .app de XAF define flex-direction: column; acá necesitamos fila.
       Sin esto el panel de marca queda apilado sobre el formulario en vez de al
       costado, que es el error que hace que el split "no aparezca". */
    flex-direction: row;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ----- Panel izquierdo: hero de marca ----- */

.sifen-login-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    padding: 4rem 3.5rem 3rem 3.5rem;
    color: #FFFFFF;
    background-color: #3D1570;
    /* Lila dominante con apenas un giro al celeste en la esquina inferior: el
       azul no debe comerse la identidad (el mockup es mayormente lila). */
    background-image:
        radial-gradient(130% 130% at 50% 40%, rgba(10, 10, 18, 0) 50%, rgba(10, 10, 18, 0.42) 100%),
        linear-gradient(158deg, #3D1570 0%, #5F21AD 52%, #7A33C9 78%, #4A6FD4 100%);
}

/* Grid de líneas finas, desvanecido hacia los bordes. Decorativo. */
.sifen-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;
}

.sifen-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
}

.sifen-hero-glow--lila {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: #7A33C9;
}

.sifen-hero-glow--celeste {
    width: 360px;
    height: 360px;
    bottom: -140px;
    right: -80px;
    background: #149BE9;
}

.sifen-hero-content {
    position: relative;
    z-index: 1;
    max-width: 26rem;
    /* Empuja el bloque hacia el centro óptico, con el tenant anclado abajo. */
    margin-top: auto;
    margin-bottom: auto;
}

.sifen-hero-logo {
    display: block;
    margin-bottom: 2.5rem;
}

.sifen-hero-tagline {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.1rem;
    max-width: 20rem;
}

.sifen-hero-sub {
    font-size: 0.95rem;
    line-height: 1.6;
    /* Contraste 7.1:1 sobre el lila del gradiente. */
    color: #D9C8EE;
}

/* Tarjeta del tenant (sifen-design §4.6): identificador siempre visible. */
.sifen-hero-tenant {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    max-width: 24rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sifen-hero-tenant-icono {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
}

.sifen-hero-tenant-texto {
    min-width: 0;
}

.sifen-hero-tenant-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #D9C8EE;
}

.sifen-hero-tenant-nombre {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sifen-hero-tenant-ruc {
    font-size: 0.75rem;
    color: #D9C8EE;
    /* tabular-nums sólo acá, no en el body (sifen-design §4.5). */
    font-variant-numeric: tabular-nums;
}

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

.sifen-login-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Sigue al tema claro/oscuro: acá sí se usan los tokens públicos
       (--DS-* Fluent, --bs-* Bootstrap), con hex de último recurso. */
    background: var(--DS-color-surface-neutral-default-rest, var(--bs-body-bg, #FFFFFF));
    padding: 2rem;
}

.sifen-login-form-container {
    width: 100%;
    max-width: 380px;
}

.sifen-login-lang {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
}

.sifen-login-logo-mobile {
    display: none;
}

.sifen-login-title {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
    color: var(--DS-color-content-neutral-default-rest, var(--bs-body-color, #1E1C22));
}

.sifen-login-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.75rem;
    color: var(--DS-color-content-neutral-subtle-rest, var(--bs-secondary-color, #5E5B66));
}

/* ----- Responsive -----
   Por debajo de 900px el hero se come la pantalla: se oculta y queda sólo el
   formulario, centrado. La jerarquía sobrevive al breakpoint. */
@media (max-width: 900px) {
    .sifen-login {
        flex-direction: column;
    }

    .sifen-login-hero {
        display: none;
    }

    .sifen-login-form-side {
        min-height: 100vh;
        padding: 1.5rem;
    }

    /* Sin hero, el logo vuelve acá para que la pantalla no quede sin marca. */
    .sifen-login-logo-mobile {
        display: block;
        margin-bottom: 1.75rem;
    }
}

/* El DetailView del logon trae su propia descripción ("Ingrese su nombre de
   usuario y contraseña"), que duplica a .sifen-login-subtitle. Se oculta acá y
   no se borra del Application Model para no afectar a otras plataformas
   (WinForms comparte ese caption). */
.sifen-login .logon-viewsite .xaf-static-text {
    display: none;
}

/* ----- Controles del formulario -----
   APRENDIZAJE (costó dos intentos): el .dxbl-btn-toolbar del logon NO se puede
   reflowear desde CSS. Ni cambiando su display, ni su flex-direction, ni
   poniendo flex-basis/order en los .dxbl-btn-group: DevExpress calcula los
   anchos en JS y cualquiera de esas tres cosas manda los botones a 16.7M px y
   les borra el texto.

   Por eso el orden que pide el mockup (enlace arriba, botón ancho abajo) se
   resuelve en el MARKUP del template, que es código propio: el .logon-toolbar
   se ubica donde corresponde y sólo se le ajusta la apariencia. */

.sifen-login .logon-toolbar {
    padding-top: 0.25rem;
    width: 100%;
}

/* Botón primario: ancho completo y color de marca (Tier 1). El ancho se fuerza
   en el botón, no en el toolbar ni en los grupos. */
.sifen-login .logon-toolbar .dxbl-btn-primary {
    min-height: 2.75rem;
    font-weight: 600;
    background-color: #5F21AD;
    border-color: #5F21AD;
}

.sifen-login .logon-toolbar .dxbl-btn-primary:hover,
.sifen-login .logon-toolbar .dxbl-btn-primary:focus-visible {
    background-color: #3D1570;
    border-color: #3D1570;
}

/* "Olvidé mi contraseña": enlace lila, sin caja, para no competir con la acción
   primaria (web-app §7). Conserva área de click ≥24px (WCAG 2.2 §2.5.8). */
.sifen-login .logon-toolbar .dxbl-btn-secondary {
    min-height: 1.75rem;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #5F21AD;
    font-weight: 500;
}

.sifen-login .logon-toolbar .dxbl-btn-secondary:hover {
    background: transparent;
    text-decoration: underline;
}

.sifen-login .logon-toolbar .dxbl-btn-secondary .dxbl-image {
    display: none;
}

/* ----- Campos -----
   El logon usa layout de dos columnas (caption | control). Se pasa a una sola
   columna apilada, que es lo que pide el mockup y lo que funciona en angosto. */
.sifen-login .logon-viewsite .dxbl-fl-cpt-wrapper {
    width: 100%;
    max-width: none;
    padding-bottom: 0.25rem;
}

.sifen-login .logon-viewsite .dxbl-fl-cpt {
    font-weight: 600;
}

.sifen-login .logon-viewsite .dxbl-fl-item {
    flex-direction: column;
    align-items: stretch;
}

.sifen-login .logon-viewsite .dxbl-edit {
    width: 100%;
}


/* ----- Fila del enlace secundario ("Olvidé mi contraseña") -----
   Por defecto es una fila propia, con el enlace a la derecha. */
.sifen-login-acciones-sec {
    position: relative;
    width: 100%;
}

/* El botón se encoge a su texto y se pega a la derecha. La cadena larga de
   selectores es necesaria para ganarle a la regla de XAF que le fija
   width:100% (.logon-bottom-toolbar .dxbl-btn-toolbar > .dxbl-btn-group >
   .dxbl-toolbar-item > .dxbl-btn). El ancho del toolbar NO se toca:
   DevExpress lo mide para su lógica adaptativa. */
.sifen-login .sifen-login-acciones-sec .logon-bottom-toolbar .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
}

/* Cuando el form trae el checkbox "Recordarme", el enlace comparte su línea
   (check a la izquierda, enlace a la derecha). XAF los renderiza en dos
   bloques distintos —el checkbox dentro del form, el enlace como action
   aparte—, así que el toolbar del enlace se saca del flujo y se sube a la fila
   del checkbox; el contenedor queda con altura cero para no agregar alto.
   Como el toolbar queda montado sobre esa fila, no recibe clics: sólo el
   enlace. Sin checkbox (p. ej. cambio de contraseña al ingresar) no se sube
   nada, para no tapar el último campo. */
.sifen-login .logon-viewsite:has(.dxbl-checkbox) + .sifen-login-acciones-sec {
    height: 0;
}

.sifen-login .logon-viewsite:has(.dxbl-checkbox) + .sifen-login-acciones-sec > .dxbl-toolbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    pointer-events: none;
}

.sifen-login .logon-viewsite:has(.dxbl-checkbox) + .sifen-login-acciones-sec .dxbl-btn {
    pointer-events: auto;
}

/* Dentro de esta fila el action se ve como enlace, no como botón. */
.sifen-login-acciones-sec .dxbl-btn,
.sifen-login-acciones-sec .dxbl-btn-secondary {
    min-height: 1.75rem;
    padding: 0.25rem 0;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #5F21AD;
    font-weight: 500;
}

.sifen-login-acciones-sec .dxbl-btn:hover {
    text-decoration: underline;
}

/* El ícono azul del action pelea con el texto del enlace. */
.sifen-login-acciones-sec .dxbl-image,
.sifen-login-acciones-sec img,
.sifen-login-acciones-sec svg {
    display: none;
}

/* ----- "Recordarme" -----
   El checkbox queda con su texto al costado, en una sola línea, en vez de
   caption arriba + control abajo (que es el layout por defecto del form). */
.sifen-login .logon-viewsite .dxbl-fl-item:has(.dxbl-checkbox) {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0.25rem;
}

/* Check primero, texto después. El caption (label.dxbl-fl-cpt) y el control
   (.dxbl-fl-ctrl) son hijos directos del item: no hay wrapper intermedio. */
.sifen-login .logon-viewsite .dxbl-fl-item:has(.dxbl-checkbox) > .dxbl-fl-ctrl {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    /* El check mide 32px de área táctil con la caja de 16px centrada: se
       compensa ese aire para que la caja alinee con el borde de los campos. */
    margin-left: -0.5rem;
}

.sifen-login .logon-viewsite .dxbl-fl-item:has(.dxbl-checkbox) > .dxbl-fl-cpt {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    /* En angosto DevExpress alinea el caption arriba (layout apilado) y le deja
       padding sólo abajo: se centra a mano contra el check. */
    align-self: center;
    padding: 0;
    font-weight: 400;
    cursor: pointer;
}

/* Ajuste fino por tamaño (XAF_SizeMode, clase xaf-size-* en el body). Los
   valores de arriba corresponden a Medium; el área táctil del check y el alto
   del enlace cambian con el tamaño (S: 24px/28px, M: 32px/30px, L: 40px/32px),
   así que la compensación del check y la altura a la que se sube el enlace
   se corrigen para que caja, texto y enlace sigan alineados. */
.xaf-size-s .sifen-login .logon-viewsite .dxbl-fl-item:has(.dxbl-checkbox) > .dxbl-fl-ctrl {
    margin-left: -0.25rem;
}

.xaf-size-l .sifen-login .logon-viewsite .dxbl-fl-item:has(.dxbl-checkbox) > .dxbl-fl-ctrl {
    margin-left: -0.625rem;
}

.xaf-size-s .sifen-login .logon-viewsite:has(.dxbl-checkbox) + .sifen-login-acciones-sec > .dxbl-toolbar {
    bottom: -2px;
}

.xaf-size-l .sifen-login .logon-viewsite:has(.dxbl-checkbox) + .sifen-login-acciones-sec > .dxbl-toolbar {
    bottom: 4px;
}