html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}


.header-logo {
    flex-shrink: 0;
    background-image: url(../images/Logoflowdata.svg);
    width: 200px;
    height: 80px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#logon-template-component .header-logo {
    -webkit-mask-position: center;
    mask-position: center;
}

.logon-main div[data-item-name="PasswordHint"] + .xaf-static-text {
    width: 100%;
    line-height: 1rem;
    color: var(--DS-color-content-neutral-subdued-rest);
}

/* Centrar el logo del Logon y darle tamaño */
.logon-main div[data-item-name="LogonImage"] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

    .logon-main div[data-item-name="LogonImage"] img,
    .logon-main div[data-item-name="LogonImage"] svg {
        max-width: 220px;
        height: auto;
        display: block;
    }


body:not(.dxbl-theme-fluent) .logon-main div[data-item-name="PasswordHint"] + .xaf-static-text {
    opacity: 0.5;
    font-size: 0.75rem;
}

.dxbl-theme-fluent.xaf-size-s .logon-main div[data-item-name="LogonText"] + .xaf-static-text {
    font-size: var(--DS-font-size-caption-1);
    line-height: var(--DS-line-height-caption-1);
    font-weight: var(--DS-font-weight-caption-1);
}

.dxbl-theme-fluent.xaf-size-m .logon-main div[data-item-name="LogonText"] + .xaf-static-text {
    font-size: var(--DS-font-size-body-1);
    line-height: var(--DS-line-height-body-1);
    font-weight: var(--DS-font-weight-body-1);
}

.dxbl-theme-fluent.xaf-size-s .logon-main .xaf-static-text {
    font-size: var(--DS-font-size-caption-2);
    line-height: var(--DS-line-height-caption-2);
    font-weight: var(--DS-font-weight-caption-2);
}

.dxbl-theme-fluent.xaf-size-m .logon-main .xaf-static-text {
    font-size: var(--DS-font-size-caption-1);
    line-height: var(--DS-line-height-caption-1);
    font-weight: var(--DS-font-weight-caption-1);
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}
/* =====================
   XAF TOASTS - TOP STYLE
   ===================== */

/* 1️⃣ Contenedor principal: lo fijamos arriba */
.xaf-alerts-stack {
    position: fixed !important;
    top: 10px !important; /* separación del borde superior */
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important; /* anula posición inferior */
    z-index: 9999 !important; /* que quede sobre todo */
    pointer-events: none; /* evita bloquear clics del usuario */
}

/* 2️⃣ Contenedor interno: alinear al inicio (arriba) */
.xaf-alerts-stack-inner {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start; /* izquierda */
    justify-content: flex-start; /* arriba */
    padding-top: 60px; /* margen según tu header */
    gap: 6px;
    padding-left: 16px;
}

/* 3️⃣ Cada alerta individual */
.xaf-alert {
    pointer-events: auto; /* habilita clics (por ejemplo, cerrar con la X) */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-bottom: 6px;
    opacity: 0.95;
    max-width: 520px; /* ancho razonable */
    width: auto;
}

/* 4️⃣ Ajustes de color por tipo */
.xaf-alert--success {
    background-color: #1e8449 !important;
    color: #fff !important;
}

.xaf-alert--warning {
    background-color: #f39c12 !important;
    color: #000 !important;
}

.xaf-alert--error {
    background-color: #c0392b !important;
    color: #fff !important;
}

.xaf-alert--info {
    background-color: #2471a3 !important;
    color: #fff !important;
}

/* Mover los mensajes de XAF Blazor hacia arriba y centrarlos */
/*.dxbl-toast,*/ /* toast de DevExpress */
/*.dxbl-notification,*/ /* a veces XAF lo pinta así */
/*.xaf-notification-container,
.dxbl-toast-container {
    bottom: auto !important;
    top: 1.5rem !important;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 9999;
}*/

/* a veces el contenedor viene en flex al fondo */
/*.dxbl-toast-wrapper,
.dxbl-notification-wrapper {
    bottom: auto !important;
    top: 1.5rem !important;
}*/