/* ================================================================
   PRESUPUESTALIA — THEME OVERRIDE v2
   Objetivo:
     · Topbar    → fondo blanco
     · Sidebar   → fondo blanco + borde derecho
     · Body      → gris claro  (#f0f2f5)
     · Tablas / secciones → fondo blanco
     · Primario  → #137fec (azul)
     · Fuente    → Inter
   ================================================================ */

/* ── FUENTE ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap');

*, *::before, *::after {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* ── CUERPO DE LA PÁGINA ─────────────────────────────────────────── */
/* .fi-body tiene bg-gray-50 por defecto; lo ajustamos a nuestro gris */
.fi-body {
    background-color: #f0f2f5 !important;
}

/* ── TOPBAR ──────────────────────────────────────────────────────── */
/*
   Filament genera: .fi-topbar { bg-white shadow-xs ring-1 ring-gray-950/5 }
   El override anterior lo ponía oscuro (#111827). Lo restauramos a blanco
   y añadimos solo un borde inferior sutil.
*/
.fi-topbar {
    background-color: #ffffff !important;
    box-shadow: none !important;
    /* anulamos el ring de Tailwind con un border sencillo */
    outline: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    /* borramos ring que dejaba el override anterior */
    --tw-ring-shadow: none !important;
    --tw-shadow: none !important;
}

/* Nav items topbar — estado activo */
.fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: rgba(19, 127, 236, 0.08) !important;
}
.fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-topbar-item.fi-active .fi-icon {
    color: #137fec !important;
}

/* Nav items topbar — texto normal */
.fi-topbar-item-label {
    color: #374151 !important;
}
.fi-topbar-item-btn .fi-icon {
    color: #9ca3af !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
/*
   Filament compila: bg-white en móvil, lg:bg-transparent en desktop.
   Usamos !important para forzar blanco en todos los breakpoints.
*/
.fi-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    --tw-shadow: none !important;
    --tw-ring-shadow: none !important;
}

/* Ítem activo en sidebar */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(19, 127, 236, 0.08) !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #137fec !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon {
    color: #137fec !important;
}
/* Punto de borde activo */
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part {
    background-color: #137fec !important;
}

/* Hover en ítems del sidebar */
.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible {
    background-color: #f1f5f9 !important;
}

/* Texto de ítems del sidebar */
.fi-sidebar-item-label {
    color: #4b5563 !important;
}
.fi-sidebar-item-btn .fi-icon {
    color: #9ca3af !important;
}

/* Texto de cabeceras de grupo */
.fi-sidebar-group-label {
    color: #9ca3af !important;
}
.fi-sidebar-group-btn .fi-icon {
    color: #9ca3af !important;
}
.fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-sidebar-group-dropdown-trigger-btn:focus-visible {
    background-color: #f1f5f9 !important;
}

/* Header del sidebar (logo) */
.fi-body-has-topbar .fi-sidebar-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    /* anulamos ring */
    --tw-ring-shadow: none !important;
    box-shadow: none !important;
}

/* ── SECCIONES / CARDS ───────────────────────────────────────────── */
.fi-section {
    background-color: #ffffff !important;
    border: 1px solid #e8ecf0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
.fi-section-header {
    border-bottom: 1px solid #f1f5f9 !important;
    background-color: #ffffff !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
}
.fi-section-content {
    background-color: #ffffff !important;
}
.fi-section-footer {
    background-color: #fafafa !important;
    border-top: 1px solid #f1f5f9 !important;
}

/* ── TABLAS ──────────────────────────────────────────────────────── */
.fi-ta-ctn {
    background-color: #ffffff !important;
    border: 1px solid #e8ecf0 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
/* Header de tabla */
.fi-ta-header-row th,
.fi-ta-th {
    background-color: #f8fafc !important;
    color: #64748b !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid #e8ecf0 !important;
}
/* Celdas de tabla */
.fi-ta-td {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #374151 !important;
}
/* Hover en filas */
.fi-ta-row:hover .fi-ta-td {
    background-color: #f8fafc !important;
}
/* Footer de tabla (paginación) */
.fi-ta-footer-ctn,
.fi-pagination-ctn {
    background-color: #f8fafc !important;
    border-top: 1px solid #e8ecf0 !important;
}

/* ── FORMULARIOS ─────────────────────────────────────────────────── */
.fi-input-wrp,
input.fi-input,
textarea.fi-input,
select.fi-select-input {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    border-radius: 0.5rem !important;
    color: #1e293b !important;
}
input.fi-input:focus,
textarea.fi-input:focus,
select.fi-select-input:focus {
    border-color: #137fec !important;
    box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.1) !important;
    outline: none !important;
}
.fi-fo-field-wrp-label {
    color: #374151 !important;
    font-weight: 500 !important;
}
.fi-fo-field-wrp-helper-text {
    color: #94a3b8 !important;
}

/* ── BOTONES ─────────────────────────────────────────────────────── */
.fi-btn {
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
}
.fi-btn-color-primary {
    background-color: #137fec !important;
    border-color: #137fec !important;
    color: #ffffff !important;
}
.fi-btn-color-primary:hover {
    background-color: #0f6fd4 !important;
    border-color: #0f6fd4 !important;
}
.fi-btn-color-gray {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #374151 !important;
}
.fi-btn-color-gray:hover {
    background-color: #f8fafc !important;
}
.fi-btn-color-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

/* ── BADGES ──────────────────────────────────────────────────────── */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 500 !important;
    font-size: 0.72rem !important;
}

/* ── TABS ────────────────────────────────────────────────────────── */
.fi-tabs-tab {
    color: #64748b !important;
    font-weight: 500 !important;
}
.fi-tabs-tab[aria-selected="true"] {
    color: #137fec !important;
    border-color: #137fec !important;
}

/* ── MODAL ───────────────────────────────────────────────────────── */
.fi-modal-window {
    background-color: #ffffff !important;
    border-radius: 0.875rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
}

/* ── DROPDOWN ────────────────────────────────────────────────────── */
.fi-dropdown-list {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.625rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* ── REPEATER ────────────────────────────────────────────────────── */
.fi-fo-repeater-item-header {
    background-color: #f8fafc !important;
    border-left: 3px solid #137fec !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
}

/* ── PAGINACIÓN ──────────────────────────────────────────────────── */
button[aria-current="page"] {
    background-color: #137fec !important;
    color: #ffffff !important;
    border-radius: 0.375rem !important;
}

/* ── SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


/* Contenedor del menú */
.fi-topbar-nav {
    display: flex;
    flex-wrap: nowrap;
    /* 🔥 evita salto de línea */
    overflow-x: auto;
    /* 🔥 scroll horizontal si no cabe */
    white-space: nowrap;
}
/* Items */
.fi-topbar-item {
    flex: 0 0 auto;
    /* 🔥 evita que se encojan */
}
/* Opcional: ocultar scrollbar (más limpio) */
.fi-topbar-nav::-webkit-scrollbar {
    display: none;
}

.fi-topbar-item {
    flex-direction: row !important;
}

/* Icono */
.fi-topbar-item-icon {
    display: inline-block;
}
/* Texto */
.fi-topbar-item-label {
    display: inline-block;
}

.fi-topbar-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
    justify-content: flex-start;
    /* izquierda */
    align-items: center;
    gap: 1.25rem;
}

.fi-topbar-item[aria-current="page"] {
    border: 2px solid #10EF91;
    background: #f9f9f9;
    padding: 4px 16px;
    border-radius: 15px;
}

@media (min-width: 1024px) {
    .fi-topbar-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}