/*
 * Foto de usuario (cabecera + popup): última capa para que ningún filtro de iconos
 * la deje en blanco / invertida. Cargar este archivo al final de los CSS síncronos.
 */
html body .header-right-side .account-container img,
html body .header-right-side .account-container .dxbl-image,
html body .header-right-side .account-container .dxbl-toolbar-btn img,
html body .header-right-side .account-container .dxbl-toolbar-btn .dxbl-image,
html body .header-right-side .account-container .dxbl-toolbar-btn .dxbl-image img,
html body .header-right-side .account-container .xaf-toolbar-item img,
html body .header-right-side .account-container .xaf-toolbar-item .dxbl-image,
html body .header-right-side .account-container .xaf-toolbar-item .dxbl-image img,
html body .header-right-side .account-container .xaf-image[style*="url("],
html body .header-right-side .account-container .xaf-image[style*="URL("] {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

html body .xaf-user-menu-popup .logo-container img,
html body .xaf-user-menu .logo-container img,
html body .xaf-user-menu-popup .logo-container .dxbl-image,
html body .xaf-user-menu .logo-container .dxbl-image,
html body .xaf-user-menu-popup .logo-container .dxbl-image img,
html body .xaf-user-menu .logo-container .dxbl-image img,
html body .dxbl-popup:has(.xaf-btn.my-details) .logo-container img,
html body .dxbl-popup:has(.xaf-btn.my-details) .logo-container .dxbl-image,
html body .dxbl-popup:has(.xaf-btn.my-details) .logo-container .dxbl-image img,
html body .xaf-user-menu-popup .logo-container .xaf-image[style*="url("],
html body .xaf-user-menu .logo-container .xaf-image[style*="url("],
html body .dxbl-popup:has(.xaf-btn.my-details) .logo-container .xaf-image[style*="url("] {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

/*
 * Usuario solo contraseña: JS añade .cicumba-avatar-fallback cuando no hay img/src ni url en .xaf-image.
 * ::after cubre el hueco (el markup Blazor no siempre expone la foto igual).
 */
html.cicumba-local-auth-user .logo-container.cicumba-avatar-fallback {
    position: relative !important;
}

html.cicumba-local-auth-user .logo-container.cicumba-avatar-fallback .xaf-image,
html.cicumba-local-auth-user .logo-container.cicumba-avatar-fallback .dxbl-image img {
    opacity: 0 !important;
    visibility: hidden !important;
}

html.cicumba-local-auth-user .logo-container.cicumba-avatar-fallback::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background-color: rgba(255, 255, 255, 0.94) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'%3E%3Ccircle cx='12' cy='9' r='3.5' fill='%234a7a65'/%3E%3Cpath fill='%234a7a65' d='M5.5 20.5v-.8c0-2.4 2.3-4.1 6.5-4.1s6.5 1.7 6.5 4.1v.8h-13z'/%3E%3C/svg%3E") !important;
    background-size: 58% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

html.cicumba-local-auth-user .header-right-side .account-container.cicumba-avatar-fallback .dxbl-toolbar-btn {
    position: relative !important;
}

html.cicumba-local-auth-user .header-right-side .account-container.cicumba-avatar-fallback .dxbl-toolbar-btn .xaf-image,
html.cicumba-local-auth-user .header-right-side .account-container.cicumba-avatar-fallback .dxbl-toolbar-btn .dxbl-image img,
html.cicumba-local-auth-user .header-right-side .account-container.cicumba-avatar-fallback .dxbl-toolbar-btn img {
    opacity: 0 !important;
    visibility: hidden !important;
}

html.cicumba-local-auth-user .header-right-side .account-container.cicumba-avatar-fallback .dxbl-toolbar-btn::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background-color: rgba(255, 255, 255, 0.94) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'%3E%3Ccircle cx='12' cy='9' r='3.5' fill='%234a7a65'/%3E%3Cpath fill='%234a7a65' d='M5.5 20.5v-.8c0-2.4 2.3-4.1 6.5-4.1s6.5 1.7 6.5 4.1v.8h-13z'/%3E%3C/svg%3E") !important;
    background-size: 62% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/*
 * Override final para fotos OAuth con style inline:
 * background: url('https://...') no-repeat; background-position: top; background-size: 24px/80px.
 * Forzamos cover + center y anulamos cualquier mascara residual.
 */
html body .header-right-side .account-container .xaf-image[style*="background: url"] {
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
}

html body .xaf-user-menu-popup .logo-container > .xaf-image[style*="background: url"],
html body .xaf-user-menu .logo-container > .xaf-image[style*="background: url"],
html body .dxbl-popup:has(.xaf-btn.my-details) .logo-container > .xaf-image[style*="background: url"],
html body .xaf-user-menu-popup .logo-container .xaf-image[style*="background: url"],
html body .xaf-user-menu .logo-container .xaf-image[style*="background: url"],
html body .dxbl-popup:has(.xaf-btn.my-details) .logo-container .xaf-image[style*="background: url"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    /* Zoom suave para que la foto llene mejor el circulo del popup */
    background-size: 140% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/*
 * Settings lateral (modo compacto / idioma)
 * Override final con selectores de la estructura real:
 * <div class="settings-bar card rounded-0"> ... <nav class="themes-menu card ...">
 */
html body .settings-bar.card,
html body .header-right-side .settings-bar.card,
html body .header-right-side .theme-settings .settings-bar.card {
    background: linear-gradient(180deg, #78a894 0%, #98c2b0 48%, #b6dcc9 100%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: -6px 0 22px rgba(45, 94, 74, 0.18) !important;
    color: #ffffff !important;
}

html body .settings-bar.card nav.themes-menu,
html body .settings-bar.card nav.themes-menu.card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html body .settings-bar.card nav.themes-menu + nav.themes-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.30) !important;
}

html body .settings-bar.card .nav-item.theme-group:not(.py-0) {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

html body .settings-bar.card .nav-item.theme-group.py-0 {
    padding: 4px 14px 14px 14px !important;
}

html body .settings-bar.card dxbl-combobox.dxbl-text-edit,
html body .settings-bar.card .dxbl-text-edit,
html body .settings-bar.card .size-mode-switcher.dxbl-text-edit,
html body .settings-bar.card .language-switcher.dxbl-text-edit {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) !important;
}

html body .settings-bar.card .dxbl-text-edit-input {
    background: #ffffff !important;
    color: #1a2e26 !important;
    font-weight: 500 !important;
}

html body .settings-bar.card .dxbl-btn.dxbl-edit-btn-dropdown {
    background: #8bbaa5 !important;
    border: none !important;
    color: #ffffff !important;
}

/* Fallback robusto: en popup, cualquier xaf-image con background se considera foto */
html body .xaf-user-menu-popup .logo-container .xaf-image[style*="background"],
html body .xaf-user-menu .logo-container .xaf-image[style*="background"],
html body .dxbl-popup:has(.xaf-btn.my-details) .logo-container .xaf-image[style*="background"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask-size: auto !important;
    mask-size: auto !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}