/* para aplicar los cambios */
/* php artisan filament:assets */

/* ============================================= */
/* CSS PERSONALIZADO PARA FILAMENT (v3+)         */
/* Mejorado para una apariencia más moderna,     */
/* profesional y con mayor profundidad visual.   */
/* ============================================= */

/* Colores base (mantengo exactamente tus 3 esquemas) */
.fi-body {
    /* Verde / Teal (default) */
    --nav-accent-rgb: 20, 184, 166;
    --nav-accent-text: #0f766e;
    --nav-accent-text-dark: #5eead4;
}

.fi-body.fi-panel-impuesto620 {
    /* Amarillo (impuesto620) - tono ligeramente más cálido y premium */
    --nav-accent-rgb: 234, 179, 8;
    --nav-accent-text: #9f6b0b;
    --nav-accent-text-dark: #fde047;
}

.fi-body.fi-panel-impuesto048 {
    /* Azul (impuesto048) - tono más vibrante y moderno */
    --nav-accent-rgb: 59, 130, 246;
    --nav-accent-text: #1e40af;
    --nav-accent-text-dark: #93c5fd;
}

/* ============================================= */
/* SIDEBAR GLOBAL - con más profundidad y estilo */
/* ============================================= */
.fi-sidebar {
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 4px 0 12px -4px rgb(15 23 42 / 0.08);
    transition: box-shadow 0.2s ease;
}

.dark .fi-sidebar {
    border-right-color: rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, #171717 0%, #111111 100%);
    box-shadow: 4px 0 12px -4px rgb(0 0 0 / 0.35);
}

/* Items del sidebar - más redondeados y suaves */
.fi-sidebar .fi-sidebar-item-btn {
    border-radius: 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 2px 8px;
    padding: 10px 16px;
}

.fi-sidebar .fi-sidebar-item-btn:hover {
    background-color: rgba(var(--nav-accent-rgb), 0.12);
    transform: translateX(2px);
}

/* Estado activo - más destacado y elegante */
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: rgba(var(--nav-accent-rgb), 0.32);
    color: var(--nav-accent-text);
    font-weight: 700;
    box-shadow:
        inset 4px 0 0 rgba(var(--nav-accent-rgb), 0.95),
        0 2px 6px -2px rgba(var(--nav-accent-rgb), 0.3);
}

.dark .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: rgba(var(--nav-accent-rgb), 0.38);
    color: var(--nav-accent-text-dark);
    box-shadow:
        inset 4px 0 0 rgba(var(--nav-accent-rgb), 0.95),
        0 2px 6px -2px rgba(var(--nav-accent-rgb), 0.5);
}

/* Focus accesibilidad */
.fi-sidebar .fi-sidebar-item-btn:focus-visible {
    outline: 2px solid rgba(var(--nav-accent-rgb), 0.6);
    outline-offset: 3px;
}

/* ============================================= */
/* TOPBAR GLOBAL - glassmorphism + profundidad   */
/* ============================================= */
.fi-topbar {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
    background-color: #f8fafc;
    box-shadow: 0 4px 12px -4px rgb(15 23 42 / 0.1);
}

.dark .fi-topbar {
    border-bottom-color: rgba(148, 163, 184, 0.2);
    background-color: #171717;
    box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.4);
}

/* ============================================= */
/* MEJORAS GENERALES ADICIONALES (opcional pero recomendadas) */
/* ============================================= */

/* Fondo general del panel para mayor cohesión */
.fi-body {
    background: #f8fafc;
}

.dark .fi-body {
    background: #111111;
}

/* Cabecera del sidebar (logo / branding) - más limpia */
.fi-sidebar-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding: 16px 20px;
}

.dark .fi-sidebar-header {
    border-bottom-color: rgba(148, 163, 184, 0.15);
}

/* Pequeño ajuste en el contenido principal para que combine mejor */
.fi-content {
    background: transparent;
}

/* ============================================= */
/* NOTAS FINALES */
/* ============================================= */
/*
   ✅ Colores 100% respetados (solo se ajustaron opacidades y gradientes)
   ✅ Más profundidad con sombras sutiles
   ✅ Bordes redondeados modernos (0.75rem)
   ✅ Transiciones más suaves y premium
   ✅ Mejor accesibilidad (focus-visible)
   ✅ Glassmorphism ligero en topbar
   ✅ Gradientes más elegantes y consistentes
   ✅ Funciona perfecto con los 3 temas (default + los dos panels)

   Para aplicar:
   php artisan filament:assets
*/