/* ══════════════════════════════════════════════
   Filament Portal Cannis — CSS FINAL DEFINITIVO
   ══════════════════════════════════════════════ */

/* ── 1. FONDO GLOBAL con gradiente ecosystem ── */
/* Todo va en el html para que sea la capa más baja */
html {
    background-color: #050d1a !important;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(0, 102, 204, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(51, 153, 255, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(10, 35, 70, 0.4) 0%, transparent 70%);
    background-attachment: fixed !important;
    background-size: 100% 100% !important;
}

/* ── 2. TODOS los contenedores de layout: transparentes ── */
/* Así el gradiente del html se ve a través de todo */
body,
body > div,
.fi-layout,
.fi-body,
.fi-main,
.fi-main-ctn {
    background: transparent !important;
}

/* ── 3. SIDEBAR: fondo semi-sólido para diferenciarlo del content ── */
.fi-sidebar {
    height: 100dvh !important;
    overflow-y: auto !important;
    background-color: rgba(5, 13, 26, 0.92) !important;
    border-right: 1px solid rgba(82, 242, 156, 0.08) !important;
}

.fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(82, 242, 156, 0.08) !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    --tw-shadow: none !important;
}

.fi-sidebar-nav {
    overflow-y: auto !important;
}

/* ── 4. TOPBAR: glass effect ── */
.fi-topbar,
.fi-topbar nav {
    background-color: rgba(5, 13, 26, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(82, 242, 156, 0.1) !important;
}

/* ── 5. NAV items ── */
.fi-sidebar-item-button:hover {
    background-color: rgba(82, 242, 156, 0.06) !important;
}

.fi-sidebar-item-button.bg-gray-100 {
    background-color: rgba(82, 242, 156, 0.1) !important;
    border-right: 2px solid rgba(82, 242, 156, 0.6) !important;
}

.fi-sidebar-item-label.text-primary-600,
.fi-sidebar-item-icon.text-primary-600 {
    color: #52F29C !important;
}

.fi-sidebar-group-label {
    color: rgba(82, 242, 156, 0.55) !important;
}

/* ── 6. SECTIONS / CARDS: glass sobre el gradiente ── */
.fi-section,
.fi-card,
.fi-wi-stats-overview-stat {
    background-color: rgba(10, 22, 40, 0.75) !important;
    border: 1px solid rgba(82, 242, 156, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ── 7. TABLAS ── */
.fi-ta-ctn,
.fi-ta-content {
    background: rgba(10, 22, 40, 0.75) !important;
    border: 1px solid rgba(82, 242, 156, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.fi-ta thead th {
    background-color: rgba(5, 12, 25, 0.9) !important;
    border-bottom: 1px solid rgba(82, 242, 156, 0.08) !important;
}

.fi-ta tbody td {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(82, 242, 156, 0.04) !important;
}

.fi-ta-row:hover td {
    background-color: rgba(82, 242, 156, 0.04) !important;
}

.fi-ta-footer,
.fi-pagination-ctn {
    background: rgba(5, 12, 25, 0.6) !important;
    border-top: 1px solid rgba(82, 242, 156, 0.06) !important;
}

/* ── 8. SEARCH glass ── */
.fi-global-search-field {
    background: rgba(10, 22, 40, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(82, 242, 156, 0.15) !important;
    border-radius: 10px !important;
}

.fi-global-search-field input,
input[type="search"] {
    background: transparent !important;
    color: #e0f0ff !important;
}

/* ── 9. TOM SELECT (selects de Filament) ── */
.ts-wrapper .ts-control {
    background: rgba(10, 22, 40, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(82, 242, 156, 0.15) !important;
    border-radius: 8px !important;
    color: #e0f0ff !important;
    box-shadow: none !important;
}

.ts-wrapper.focus .ts-control {
    border-color: rgba(82, 242, 156, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(82, 242, 156, 0.08) !important;
}

.ts-dropdown {
    background: #071525 !important;
    border: 1px solid rgba(82, 242, 156, 0.15) !important;
    border-radius: 8px !important;
    z-index: 9999 !important;
}

.ts-dropdown .option {
    color: #c0d8f0 !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: rgba(82, 242, 156, 0.08) !important;
    color: #52F29C !important;
}

.ts-dropdown .option.selected {
    background: rgba(82, 242, 156, 0.12) !important;
    color: #52F29C !important;
}

/* ── 10. INPUTS ── */
.fi-input,
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    background-color: rgba(10, 22, 40, 0.8) !important;
    border-color: rgba(51, 153, 255, 0.2) !important;
    color: #fff !important;
}

input:focus,
textarea:focus {
    border-color: rgba(82, 242, 156, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(82, 242, 156, 0.08) !important;
    outline: none !important;
}

/* ── 11. DROPDOWNS — fondo sólido, siempre encima ── */
.fi-dropdown-panel {
    background-color: #071525 !important;
    border: 1px solid rgba(82, 242, 156, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 9999 !important;
}

.fi-dropdown-list-item-button:hover {
    background: rgba(82, 242, 156, 0.06) !important;
    color: #52F29C !important;
}

/* ── 12. MODALES ── */
.fi-modal-window {
    background: rgba(7, 18, 37, 0.97) !important;
    border: 1px solid rgba(82, 242, 156, 0.12) !important;
    backdrop-filter: blur(16px) !important;
}

/* El overlay/backdrop del modal */
.fi-modal-close-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}

/* ── 13. PAGINACIÓN ── */
.fi-pagination-item-btn:hover {
    background: rgba(82, 242, 156, 0.08) !important;
    border-color: rgba(82, 242, 156, 0.3) !important;
    color: #52F29C !important;
}

.fi-pagination-item-btn[aria-current="page"] {
    background: rgba(82, 242, 156, 0.15) !important;
    border-color: rgba(82, 242, 156, 0.4) !important;
    color: #52F29C !important;
    font-weight: 700 !important;
}

/* ── 14. BOTONES y BADGES primary ── */
.fi-btn-color-primary,
.fi-badge-color-primary {
    color: #0a1628 !important;
    font-weight: 700 !important;
}

/* ── 15. SCROLLBAR ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #52F29C, rgba(82, 242, 156, 0.3));
    border-radius: 999px;
}

/* Reemplazá estos dos bloques en tu CSS: */

.fi-sidebar {
    height: 100dvh !important;
    overflow-y: auto !important;
    background-color: transparent !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    border-right: 1px solid rgba(82, 242, 156, 0.08) !important;
}

.fi-topbar,
.fi-topbar nav {
    background-color: transparent !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    border-bottom: 1px solid rgba(82, 242, 156, 0.1) !important;
}

/* Desktop: transparente para ver el gradiente */
@media (min-width: 1024px) {
    .fi-sidebar {
        background-color: transparent !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }
}

/* Mobile: fondo sólido para que tape el contenido correctamente */
@media (max-width: 1023px) {
    .fi-sidebar {
        background-color: rgba(5, 13, 26, 0.98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Topbar igual — transparente solo en desktop */
@media (min-width: 1024px) {
    .fi-topbar,
    .fi-topbar nav {
        background-color: transparent !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }
}

@media (max-width: 1023px) {
    .fi-topbar,
    .fi-topbar nav {
        background-color: rgba(5, 13, 26, 0.97) !important;
    }
}

/* ── WIZARD ── */
.fi-fo-wizard-header {
    background: rgba(10, 22, 40, 0.85) !important;
    border: 1px solid rgba(82, 242, 156, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.fi-fo-wizard-header-step-button {
    background: transparent !important;
}

.fi-fo-wizard-header-step-separator svg {
    color: rgba(82, 242, 156, 0.15) !important;
}

/* Step completado */
.fi-fo-wizard-header-step.fi-completed .fi-fo-wizard-header-step-icon-ctn {
    background-color: #52F29C !important;
}

/* Línea de progreso entre steps */
.fi-fo-wizard-header {
    --tw-divide-color: rgba(82, 242, 156, 0.08) !important;
}

/* Tick del step completado — negro sobre fondo verde */
.fi-fo-wizard-header-step.fi-completed .fi-fo-wizard-header-step-icon {
    color: #0a1628 !important;
}

/* Íconos dentro de botones primary — negro igual que el texto */
.fi-btn-color-primary .fi-btn-icon,
.fi-btn-color-primary svg {
    color: #0a1628 !important;
}

/* ── PERFIL / EDIT PROFILE ── */
/* ── PERFIL: fi-section-content-ctn ── */
.fi-section-content-ctn {
    background-color: rgba(10, 22, 40, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: none !important;
    --tw-ring-color: rgba(82, 242, 156, 0.08) !important;
    --tw-shadow: none !important;
}

/* FilePond avatar */
.filepond--panel-root {
    background-color: rgba(10, 22, 40, 0.6) !important;
    border: 1px solid rgba(82, 242, 156, 0.12) !important;
}

.filepond--item-panel {
    background-color: rgba(5, 13, 26, 0.8) !important;
}

/* ── PERFIL: section header area ── */
.fi-section.fi-aside {
    background: transparent !important;
    border: none !important;
}

.fi-section-header {
    background: transparent !important;
    border: none !important;
}

.fi-section-content-ctn {
    border-radius: 10px;
}

/* ── LOGIN / REGISTER ── */
.fi-simple-main {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    --tw-ring-color: rgba(82, 242, 156, 0.08) !important;
}

.fi-simple-layout {
    background: transparent !important;
}

/* Wizard header del register */
.fi-simple-main .fi-fo-wizard-header {
    background: rgba(5, 13, 26, 0.6) !important;
    border: 1px solid rgba(82, 242, 156, 0.08) !important;
}

/* Steps content dentro del register */
.fi-simple-main .fi-fo-wizard-step {
    background: transparent !important;
}

/* ── REGISTER: wizard container ── */
.fi-fo-wizard.fi-contained {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    --tw-ring-color: rgba(82, 242, 156, 0.08) !important;
    --tw-shadow: none !important;
}

/* Header del wizard dentro del register */
.fi-fo-wizard.fi-contained .fi-fo-wizard-header {
    background: rgba(5, 13, 26, 0.5) !important;
    border-bottom: 1px solid rgba(82, 242, 156, 0.08) !important;
}