/*
 * Estilos personalizados para corregir problemas de Filament Breezy con Filament 5
 * Problemas: Iconos SVG enormes y paneles muy juntos en la página de perfil
 *
 * Nota: Filament 5 renombró las clases de sección de .fi-fo-section(-header|-content)
 * a .fi-section(-header|-content) respecto a Filament 4. Si en el futuro las secciones
 * de "Mi perfil" vuelven a verse pegadas tras una actualización de Filament, lo primero
 * a revisar es si estas clases han vuelto a cambiar de nombre.
 */

/* Corregir tamaño de iconos SVG en la página de perfil */
.fi-section .flex.items-center.gap-2 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
}

/* Asegurar que los iconos SVG en secciones de perfil tengan tamaño correcto */
.fi-section svg.heroicon-o-exclamation-circle,
.fi-section svg.heroicon-o-shield-check,
.fi-section svg.heroicon-o-question-mark-circle,
.fi-section svg.heroicon-s-shield-exclamation {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Agregar espaciado entre secciones del perfil */
.fi-section {
    margin-bottom: 1.5rem !important;
}

/* Mejorar el espaciado del QR de 2FA */
.fi-section .flex.mt-3.space-x-4 > div {
    flex-shrink: 0;
}

/* Corregir tamaño del QR de 2FA: se fuerza el SVG (o <img>) a llenar su contenedor de
   200x200px, sin depender del viewBox concreto que genere la libreria de QR (eso es lo
   que fallaba antes: el viewBox real no coincidia con los valores adivinados). */
.fi-breezy-qr-container {
    width: 12rem !important;
    height: 12rem !important;
    overflow: hidden;
}

.fi-breezy-qr-container svg,
.fi-breezy-qr-container img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}

/* Icono de "copiar códigos" (portapapeles): esta pagina de perfil usa el tema propio de
   Filament, no el CSS de Tailwind de la app, asi que las clases w-4/mr-2 del icono (que
   vienen del paquete filament-breezy) nunca se generan ahi. Se fuerza el tamaño aqui. */
.fi-breezy-clipboard-icon {
    display: inline-block !important;
    width: 1rem !important;
    height: 1rem !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
}

/* Asegurar espaciado consistente en las secciones de perfil */
.fi-section-header {
    margin-bottom: 1rem !important;
}

/* Corregir el contenedor principal del perfil */
.fi-page {
    gap: 1.5rem !important;
}

/* Mejorar espaciado general de secciones */
.fi-section-content {
    padding: 1.5rem !important;
}

/* Corregir iconos en alertas */
.fi-section .flex-shrink-0 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Separación entre el último campo y el botón (Actualizar / Modificar) de cada
   formulario de "Mi perfil". El wrapper del botón (.text-right) no es hijo directo
   de <form class="space-y-6">, así que esa utilidad de Tailwind no le añade margen. */
.fi-section-content .text-right {
    margin-top: 1.5rem !important;
}