/* ============================================================
   Estética corporativa empresarial para diálogos DSADialog.
   - Overlay con backdrop-filter blur.
   - Eliminamos por completo la titlebar de Radzen (era la "X
     fantasma" que se veía sobre el contenido) y ponemos nuestra
     propia X flotante con ::before sobre el contenedor.
   - Bordes redondeados grandes y sombra moderna.
   - Reset global del outline-focus que Blazor SSR aplica al primer
     elemento focusable de cada navegación.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────────
   FIX · Borde blanco sobre títulos al cargar la página
   Blazor SSR / Enhanced Navigation pone el focus en el primer
   elemento focusable (típicamente <h1> o un wrapper con tabindex=-1)
   y los navegadores dibujan el outline de accesibilidad. Al primer
   click desaparece, pero estéticamente queda raro al cargar.
   Quitamos outline de headers y contenedores no-interactivos cuando
   reciben focus de forma programática (sin teclado).
   Botones, inputs y enlaces conservan el focus-visible para A11Y real.
   ───────────────────────────────────────────────────────────────── */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
[tabindex="-1"]:focus,
section:focus, article:focus, header:focus, main:focus,
div:focus, span:focus {
    outline: none !important;
    box-shadow: none !important;
}

h1:focus:not(:focus-visible),
h2:focus:not(:focus-visible),
h3:focus:not(:focus-visible),
h4:focus:not(:focus-visible),
h5:focus:not(:focus-visible),
h6:focus:not(:focus-visible),
[tabindex="-1"]:focus:not(:focus-visible),
section:focus:not(:focus-visible),
article:focus:not(:focus-visible),
header:focus:not(:focus-visible),
main:focus:not(:focus-visible),
div:focus:not(:focus-visible),
span:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Overlay con blur sutil */
.rz-dialog-mask {
    background: rgba(15, 23, 42, .55) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Diálogos DSADialog (CssClass="dsa-dialog-host") */
.dsa-dialog-host.rz-dialog,
.dsa-dialog-host .rz-dialog-content {
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25), 0 8px 16px rgba(0, 0, 0, .12) !important;
    border: 0 !important;
}

.dsa-dialog-host.rz-dialog {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* La titlebar de Radzen se elimina por completo: no ocupa altura, no
   pinta franja, ni botón propio. La X la pone nuestro CSS abajo. */
.dsa-dialog-host .rz-dialog-titlebar {
    display: none !important;
}

/* Botón X flotante propio: replica el comportamiento del .rz-dialog-titlebar-icon
   pero sin reservar espacio en el flujo. Radzen ya lo crea como hijo del
   titlebar, pero al ocultar el titlebar perdemos el botón también — usamos
   selector hermano para sacarlo del titlebar oculto y reposicionarlo. */
.dsa-dialog-host .rz-dialog-titlebar-icons,
.dsa-dialog-host .rz-dialog-titlebar-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Truco: aunque el titlebar esté display:none, lo "rescatamos" con un
   wrapper visible que sólo contiene el botón close. Lo posicionamos absolute. */
.dsa-dialog-host {
    position: relative;
}

.dsa-dialog-host .rz-dialog-content {
    padding: 0 !important;
    background: white !important;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto !important;
}

/* X corporativa flotante — es un pseudo-botón que cierra vía data attribute.
   No funciona desde aquí (no podemos enganchar JS), así que mejor no
   ocultamos el titlebar entero sino que lo reducimos a sólo la X.
   Ver bloque definitivo abajo. */

/* === ENFOQUE FINAL: la titlebar se queda como contenedor abs sólo para la X === */
.dsa-dialog-host .rz-dialog-titlebar {
    display: block !important;
    position: absolute !important;
    top: .55rem !important;
    right: .55rem !important;
    left: auto !important;
    width: auto !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    z-index: 20;
    box-shadow: none !important;
}

.dsa-dialog-host .rz-dialog-titlebar::before,
.dsa-dialog-host .rz-dialog-titlebar::after {
    display: none !important;
}

.dsa-dialog-host .rz-dialog-titlebar-title {
    display: none !important;
}

.dsa-dialog-host .rz-dialog-titlebar-icons {
    margin: 0 !important;
    padding: 0 !important;
}

.dsa-dialog-host .rz-dialog-titlebar-icon {
    color: #6b7280 !important;
    background: rgba(255,255,255,.92) !important;
    transition: color .12s, background .12s, transform .12s;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(15,23,42,.08);
}

.dsa-dialog-host .rz-dialog-titlebar-icon:hover {
    color: #111827 !important;
    background: #f3f4f6 !important;
    transform: scale(1.05);
}