/* Estilos personalizados para el panel de administración */

/* Logo del header - reducir tamaño de fuente */
.fi-logo,
.fi-sidebar-header .fi-logo,
[data-sidebar-header] .fi-logo {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.25rem !important;
}

/* Grid fijo de 4 columnas para imágenes en Spatie Media Library */

/* Contenedor principal con sortable */
.fi-fo-file-upload [data-sortable-list],
.fi-fo-file-upload > div > div:has(.fi-fo-file-upload-file) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

/* Contenedor de archivos subidos */
.fi-fo-file-upload .space-y-4:has(.fi-fo-file-upload-file) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

/* Contenedor directo de los archivos */
.fi-fo-file-upload > div:not([data-drop-zone]) > div {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

/* Resetear márgenes en modo grid */
.fi-fo-file-upload [data-sortable-list] > *,
.fi-fo-file-upload .space-y-4:has(.fi-fo-file-upload-file) > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Estilo para cada archivo/imagen en el grid */
.fi-fo-file-upload .fi-fo-file-upload-file {
    width: 100% !important;
    margin: 0 !important;
}

/* Mejorar visualización de imágenes */
.fi-fo-file-upload .fi-fo-file-upload-file img {
    border-radius: 0.5rem !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Grid responsivo */
@media (max-width: 1536px) {
    .fi-fo-file-upload [data-sortable-list],
    .fi-fo-file-upload > div > div:has(.fi-fo-file-upload-file),
    .fi-fo-file-upload .space-y-4:has(.fi-fo-file-upload-file),
    .fi-fo-file-upload > div:not([data-drop-zone]) > div {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    .fi-fo-file-upload [data-sortable-list],
    .fi-fo-file-upload > div > div:has(.fi-fo-file-upload-file),
    .fi-fo-file-upload .space-y-4:has(.fi-fo-file-upload-file),
    .fi-fo-file-upload > div:not([data-drop-zone]) > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .fi-fo-file-upload [data-sortable-list],
    .fi-fo-file-upload > div > div:has(.fi-fo-file-upload-file),
    .fi-fo-file-upload .space-y-4:has(.fi-fo-file-upload-file),
    .fi-fo-file-upload > div:not([data-drop-zone]) > div {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* Mejorar la apariencia del drag and drop */
.fi-fo-file-upload [data-drop-zone] {
    border-radius: 0.75rem !important;
    border: 2px dashed #d1d5db !important;
    padding: 2rem !important;
    transition: all 0.2s ease !important;
}

.fi-fo-file-upload [data-drop-zone]:hover {
    border-color: #f59e0b !important;
    background-color: #fffbeb !important;
}

/* Animación para las imágenes */
.fi-fo-file-upload .fi-fo-file-upload-file {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.fi-fo-file-upload .fi-fo-file-upload-file:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* ============================================================
   AJUSTES DE ANCHO PARA APROVECHAR ESPACIO EN FILAMENT
   Hace que las tablas y contenido usen mejor el espacio disponible
   ============================================================ */

/* Reducir padding del contenedor principal */
.fi-main,
main.fi-main,
.fi-main-ctn > main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: none !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .fi-main,
    main.fi-main,
    .fi-main-ctn > main {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        max-width: none !important;
        width: 100% !important;
    }
}

@media (min-width: 1024px) {
    .fi-main,
    main.fi-main,
    .fi-main-ctn > main {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        max-width: none !important;
        width: 100% !important;
    }
}

/* Hacer el contenido más ancho - quitar límite de max-width */
.fi-main-ctn {
    max-width: none !important;
    width: 100% !important;
}

/* Reducir márgenes de las páginas */
.fi-page {
    max-width: none !important;
    width: 100% !important;
}

/* Hacer las tablas más anchas */
.fi-ta-ctn {
    max-width: none !important;
    width: 100% !important;
}

/* Ajustar el ancho del contenido de las páginas de recursos */
.fi-resource-page {
    max-width: none !important;
    width: 100% !important;
}

/* Reducir espaciado en el header */
.fi-header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 768px) {
    .fi-header {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Ajustar el ancho de los formularios para que usen más espacio */
.fi-fo {
    max-width: 100% !important;
}

/* Hacer que las secciones de formularios usen todo el ancho */
.fi-fo-section {
    max-width: none !important;
    width: 100% !important;
}

/* Mejorar el uso del espacio en las páginas de listado */
.fi-ta-content {
    max-width: none !important;
    width: 100% !important;
}

/* Hacer que las tablas usen todo el espacio disponible */
.fi-ta-table {
    width: 100% !important;
}

/* Ajustar el contenedor de la página completa */
.fi-page-content {
    max-width: none !important;
    width: 100% !important;
}

/* Hacer que las cards usen más espacio */
.fi-ta-card {
    max-width: none !important;
    width: 100% !important;
}

/* Reducir el padding de las celdas para más espacio */
.fi-ta-cell {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.fi-ta-header-cell {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Hacer que los grupos de la tabla usen todo el ancho */
.fi-ta-group {
    width: 100% !important;
}

/* Ajustar el ancho de las secciones en los formularios */
.fi-fo-component-ctn {
    max-width: none !important;
    width: 100% !important;
}

/* Optimizar el espacio en las páginas de creación/edición */
.fi-form {
    max-width: none !important;
    width: 100% !important;
}

/* Reducir márgenes innecesarios en secciones */
.fi-section-content {
    max-width: none !important;
    width: 100% !important;
}

/* Asegurar que el sidebar no ocupe demasiado espacio */
@media (min-width: 1024px) {
    .fi-sidebar {
        width: 16rem !important; /* 256px */
    }
}

/* Ajustar el topbar */
.fi-topbar {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 1024px) {
    .fi-topbar {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Mejorar el espacio en pantallas extra grandes */
@media (min-width: 1536px) {
    .fi-main {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }

    /* Permitir que las tablas usen hasta el 98% del ancho */
    .fi-ta-ctn {
        width: 100% !important;
    }

    .fi-ta-cell {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .fi-ta-header-cell {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Asegurar que los contenedores principales no tengan restricciones */
main.fi-main,
.fi-main-ctn > main,
.fi-layout > .fi-main-ctn > main {
    width: 100% !important;
    max-width: none !important;
}

/* Mejorar el uso del espacio en modals */
.fi-modal-content {
    max-width: 90vw !important;
}

/* Ajustar el ancho de las tablas en grupos */
.fi-ta-grouping-header {
    width: 100% !important;
}

/* Hacer que el contenido de las páginas use todo el ancho */
.fi-simple-layout {
    max-width: none !important;
    width: 100% !important;
}

/* Optimizar espacios en blanco */
.fi-simple-page {
    max-width: none !important;
    width: 100% !important;
}

/* Asegurar que las acciones de tabla estén bien distribuidas */
.fi-ta-actions {
    flex-shrink: 0 !important;
}

/* Mejorar la distribución en tablas responsivas */
.fi-ta-record {
    width: 100% !important;
}

/* Ajustar el wrapper principal de Filament */
.fi-layout {
    display: flex !important;
    width: 100% !important;
}

/* Optimizar el contenido principal */
.fi-main-content {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Reducir espacios innecesarios en el contenedor de widgets */
.fi-wi-stats-overview {
    max-width: none !important;
    width: 100% !important;
}

/* Mejorar distribución de columnas en formularios grandes */
@media (min-width: 1280px) {
    .fi-fo-grid-col-span-full {
        grid-column: span 12 / span 12 !important;
    }
}

/* Asegurar que las tablas con scroll horizontal funcionen bien */
.fi-ta-content {
    overflow-x: auto !important;
}

.fi-ta {
    overflow-x: auto !important;
    width: 100% !important;
}

/* ============================================================
   TABLAS 100% WIDTH CON SCROLL CUANDO NECESARIO
   ============================================================ */

/* Eliminar restricciones de max-width en contenedores principales */
.fi-main-ctn,
.fi-page,
.fi-resource-page,
.fi-simple-layout,
.fi-simple-page,
.fi-page-content,
.fi-section-content,
.fi-form,
.fi-fo,
.fi-fo-section,
.fi-fo-component-ctn {
    max-width: none !important;
    width: 100% !important;
}

/* Contenedor de tabla 100% con scroll automático */
.fi-ta {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* Contenedor principal de tabla sin restricciones */
.fi-ta-ctn {
    width: 100% !important;
    max-width: 100% !important;
}

/* Card de tabla 100% */
.fi-ta-card {
    width: 100% !important;
    max-width: 100% !important;
}

/* Contenido de tabla con scroll cuando necesario */
.fi-ta-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* Tabla con min-width para mantener estructura */
.fi-ta-table {
    width: 100% !important;
    min-width: 100% !important;
}

/* Wrapper de tabla con scroll */
.fi-ta-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Headers y celdas con padding adecuado */
.fi-ta-header-cell {
    padding: 0.75rem 0.5rem !important;
    white-space: nowrap !important;
}

.fi-ta-cell {
    padding: 0.75rem 0.5rem !important;
    vertical-align: middle !important;
}

/* Filas 100% */
.fi-ta-row {
    width: 100% !important;
}

/* Acciones compactas */
.fi-ta-actions {
    display: flex !important;
    gap: 0.25rem !important;
    flex-wrap: nowrap !important;
}

/* Responsive para pantallas grandes */
@media (min-width: 1536px) {
    .fi-ta-header-cell,
    .fi-ta-cell {
        padding: 0.875rem 0.75rem !important;
    }
}

/* ============================================================
   MEJORAS DE ACCESIBILIDAD Y UX (WCAG 2.1)
   ============================================================ */

/* Mejorar contraste de textos */
.fi-ta-text {
    color: rgb(17 24 39) !important; /* gray-900 */
}

.dark .fi-ta-text {
    color: rgb(243 244 246) !important; /* gray-100 */
}

/* Mejorar focus visible para navegación con teclado (WCAG 2.4.7) */
*:focus-visible {
    outline: 2px solid rgb(245 158 11) !important; /* amber-500 */
    outline-offset: 2px !important;
    border-radius: 0.375rem !important;
}

/* Mejorar contraste de badges (WCAG 1.4.3) */
.fi-badge {
    font-weight: 600 !important;
}

/* Mejorar tamaño de botones para touch (WCAG 2.5.5 - Target Size) */
.fi-btn {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Indicador visual para elementos requeridos (WCAG 3.3.2) */
.fi-fo-field-wrp-label .fi-required::after {
    content: " *" !important;
    color: rgb(239 68 68) !important; /* red-500 */
    font-weight: bold !important;
    margin-left: 0.125rem !important;
}

/* Mejorar cards con sombras sutiles */
.fi-section,
.fi-ta-card {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
    transition: box-shadow 0.2s ease !important;
}

.fi-section:hover,
.fi-ta-card:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* Mejorar botones principales con gradiente */
.fi-btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.fi-btn-primary:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
}

/* Tipografía mejorada */
.fi-header-heading {
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

.fi-section-header-heading {
    font-weight: 600 !important;
    color: rgb(17 24 39) !important;
}

.dark .fi-section-header-heading {
    color: rgb(243 244 246) !important;
}

/* Tablas más legibles */
.fi-ta-row:hover {
    background-color: rgb(254 252 232) !important; /* amber-50 */
}

.dark .fi-ta-row:hover {
    background-color: rgb(39 39 42) !important; /* zinc-800 */
}

/* Indicador de estado del registro en la tabla */
.fi-ta-row[data-estado="activo"] {
    border-left: 3px solid rgb(34 197 94) !important; /* green */
}

.fi-ta-row[data-estado="pendiente"] {
    border-left: 3px solid rgb(251 191 36) !important; /* amber */
}

.fi-ta-row[data-estado="baja"] {
    border-left: 3px solid rgb(156 163 175) !important; /* gray */
    opacity: 0.6 !important;
}

/* Mejorar estados loading */
.fi-loading-indicator {
    color: rgb(245 158 11) !important; /* amber-500 */
}

/* Animaciones sutiles */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fi-section,
.fi-ta-card,
.fi-modal-content {
    animation: fadeIn 0.3s ease-out !important;
}

/* ============================================================
   MEJORAS RESPONSIVE PARA MÓVILES (WCAG 1.4.10)
   ============================================================ */

/* Hacer botones más grandes en móvil */
@media (max-width: 768px) {
    .fi-btn {
        min-height: 48px !important;
        padding: 0.75rem 1rem !important;
    }

    .fi-ta-actions .fi-btn {
        min-width: 48px !important;
    }

    /* Mejorar espaciado en formularios móviles */
    .fi-fo-field-wrp {
        margin-bottom: 1.5rem !important;
    }

    /* Hacer inputs más altos para mejor UX táctil */
    .fi-input,
    .fi-select-input {
        min-height: 48px !important;
        font-size: 16px !important; /* Evitar zoom automático en iOS */
    }

    /* Mejorar visualización de tablas en móvil */
    .fi-ta {
        font-size: 0.875rem !important;
    }

    .fi-ta-cell {
        padding: 1rem 0.5rem !important;
    }

    /* Hacer modales full screen en móvil */
    .fi-modal {
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* Mejorar acciones en tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .fi-ta-actions {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
}

/* ============================================================
   MEJORAS DE MODO OSCURO
   ============================================================ */

.dark {
    /* Mejoras específicas para modo oscuro */
    --tw-prose-body: rgb(209 213 219);
    --tw-prose-headings: rgb(243 244 246);
}

.dark .fi-ta-card,
.dark .fi-section {
    background-color: rgb(24 24 27) !important; /* zinc-900 */
    border-color: rgb(39 39 42) !important; /* zinc-800 */
}

.dark .fi-ta-row:hover {
    background-color: rgb(39 39 42) !important; /* zinc-800 */
}

/* ============================================================
   MEJORAS PARA WIDGETS DEL DASHBOARD
   ============================================================ */

/* Mejorar visualización de stats */
.fi-wi-stats-overview-stat {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* Mejorar gráficos */
.fi-wi-chart {
    border-radius: 0.5rem !important;
}

/* ============================================================
   MEJORAS DE IDENTIDAD VISUAL
   ============================================================ */

/* Header con gradient temático */
.fi-topbar {
    background: #f59e0b !important;
}

.dark .fi-topbar {
    background: linear-gradient(135deg, #92400e 0%, #78350f 100%) !important;
}

/* Badges temáticos para comparsas */
.fi-badge[style*="success"] {
    background-color: rgb(34 197 94) !important; /* Cristianos - verde */
}

.fi-badge[style*="danger"] {
    background-color: rgb(239 68 68) !important; /* Moros - rojo */
}

/* ============================================================
   MEJORAS DE NOTIFICACIONES
   ============================================================ */

/* Mejorar contraste de notificaciones */
.fi-no {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

/* Animación de entrada para notificaciones */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fi-no {
    animation: slideInRight 0.3s ease-out !important;
}

/* ============================================================
   MEJORAS DE FORMULARIOS
   ============================================================ */

/* Mejorar labels de formularios */
.fi-fo-field-wrp-label {
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
}

/* Mejorar helper text */
.fi-fo-field-wrp-helper-text {
    font-size: 0.875rem !important;
    color: rgb(107 114 128) !important; /* gray-500 */
    margin-top: 0.25rem !important;
}

.dark .fi-fo-field-wrp-helper-text {
    color: rgb(156 163 175) !important; /* gray-400 */
}

/* Mejorar hint icons */
.fi-fo-field-wrp-hint {
    color: rgb(59 130 246) !important; /* blue-500 */
}

/* Estados de error más visibles */
.fi-fo-field-wrp-error-message {
    font-weight: 500 !important;
    color: rgb(239 68 68) !important; /* red-500 */
    margin-top: 0.5rem !important;
}

/* ============================================================
   FIN DE MEJORAS DE ACCESIBILIDAD
   ============================================================ */

/* ============================================================
   CORRECCIÓN DE SIDEBAR COLAPSADO
   ============================================================ */

/* Sidebar colapsado - ancho reducido */
.fi-sidebar.fi-sidebar-collapsed,
aside.fi-sidebar[aria-expanded="false"],
[data-sidebar][style*="width"] {
    width: 4.5rem !important;
    min-width: 4.5rem !important;
}

/* Ocultar textos cuando el sidebar está colapsado */
.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-item-label,
.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-group-label,
aside.fi-sidebar[aria-expanded="false"] .fi-sidebar-item-label,
aside.fi-sidebar[aria-expanded="false"] .fi-sidebar-group-label {
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Centrar iconos cuando el sidebar está colapsado */
.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-item,
.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-group-button,
aside.fi-sidebar[aria-expanded="false"] .fi-sidebar-item,
aside.fi-sidebar[aria-expanded="false"] .fi-sidebar-group-button {
    justify-content: center !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Logo del sidebar colapsado */
.fi-sidebar.fi-sidebar-collapsed .fi-logo,
aside.fi-sidebar[aria-expanded="false"] .fi-logo {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* DISABLED: Content margin adjustments handled by admin-fix-columns.css
   to prevent alignment conflicts */
/*
body:has(.fi-sidebar.fi-sidebar-collapsed) .fi-main,
body:has(aside.fi-sidebar[aria-expanded="false"]) .fi-main {
    margin-left: 4.5rem !important;
}
*/

/* Transiciones suaves */
.fi-sidebar,
.fi-sidebar .fi-sidebar-item,
.fi-sidebar .fi-sidebar-group,
.fi-main {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Tooltip para items del sidebar colapsado */
.fi-sidebar.fi-sidebar-collapsed .fi-sidebar-item:hover::after,
aside.fi-sidebar[aria-expanded="false"] .fi-sidebar-item:hover::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    margin-left: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgb(17 24 39);
    color: white;
    border-radius: 0.375rem;
    white-space: nowrap;
    z-index: 50;
    font-size: 0.875rem;
    pointer-events: none;
}

/* ============================================================
   FIN DE CORRECCIÓN DE SIDEBAR COLAPSADO
   ============================================================ */