/* =========================================================
   COFILEX ADMIN PANEL
   Sidebar + Topbar institucional
   ========================================================= */

:root {
    --cofilex-navy: #071b2a;
    --cofilex-navy-dark: #04121d;
    --cofilex-navy-light: #0b2a3f;
    --cofilex-gold: #d6ad4f;
    --cofilex-gold-light: #ffd86a;
    --cofilex-white: #ffffff;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.fi-main-sidebar.fi-sidebar,
.fi-sidebar.fi-main-sidebar {
    background:
        linear-gradient(
            180deg,
            var(--cofilex-navy-dark) 0%,
            var(--cofilex-navy) 48%,
            var(--cofilex-navy-light) 100%
        ) !important;

    border-inline-end: 1px solid rgba(214, 173, 79, 0.20) !important;

    color: var(--cofilex-white) !important;

    box-shadow:
        8px 0 30px rgba(0, 15, 28, 0.12) !important;
}

/* Header del menú */

.fi-main-sidebar .fi-sidebar-header,
.fi-main-sidebar .fi-sidebar-header-ctn {
    background:
        linear-gradient(
            180deg,
            #061521 0%,
            #071b2a 100%
        ) !important;

    border-bottom: 1px solid rgba(214, 173, 79, 0.18) !important;
}

/* Logo */

.fi-main-sidebar .fi-sidebar-header-logo-ctn img,
.fi-main-sidebar .fi-logo img {
    filter:
        drop-shadow(0 0 6px rgba(214, 173, 79, 0.28)) !important;
}

/* Navegación */

.fi-main-sidebar .fi-sidebar-nav,
.fi-main-sidebar .fi-sidebar-footer {
    color: var(--cofilex-white) !important;
}

/* Labels */

.fi-main-sidebar .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-database-notifications-btn-label {
    color: rgba(255, 255, 255, 0.94) !important;
}

/* Títulos ADMINISTRACIÓN / DOCUMENTOS */

.fi-main-sidebar .fi-sidebar-group-label {
    color: var(--cofilex-gold) !important;

    opacity: 1 !important;

    letter-spacing: 0.06em !important;

    text-transform: uppercase !important;

    font-size: 0.70rem !important;

    font-weight: 700 !important;
}

/* Botones */

.fi-main-sidebar .fi-sidebar-item-btn,
.fi-main-sidebar .fi-sidebar-group-btn,
.fi-main-sidebar .fi-sidebar-group-collapse-btn,
.fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn,
.fi-main-sidebar .fi-sidebar-open-collapse-sidebar-btn,
.fi-main-sidebar .fi-sidebar-close-collapse-sidebar-btn,
.fi-main-sidebar .fi-sidebar-database-notifications-btn {
    color: var(--cofilex-white) !important;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease !important;
}

/* Iconos */

.fi-main-sidebar .fi-sidebar-item-icon,
.fi-main-sidebar .fi-icon-btn,
.fi-main-sidebar .fi-sidebar-group-btn svg,
.fi-main-sidebar .fi-sidebar-item-btn svg,
.fi-main-sidebar .fi-sidebar-group-collapse-btn svg,
.fi-main-sidebar .fi-sidebar-open-collapse-sidebar-btn svg,
.fi-main-sidebar .fi-sidebar-close-collapse-sidebar-btn svg {
    color: rgba(255, 255, 255, 0.90) !important;

    stroke: currentColor;
}

/* Hover */

.fi-main-sidebar .fi-sidebar-item-btn:hover,
.fi-main-sidebar .fi-sidebar-group-btn:hover {
    background:
        linear-gradient(
            90deg,
            rgba(214, 173, 79, 0.08),
            rgba(255, 255, 255, 0.04)
        ) !important;

    transform: translateX(2px);
}

/* Activo */

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-main-sidebar .fi-sidebar-item-btn[aria-current='page'] {
    background:
        linear-gradient(
            90deg,
            rgba(214, 173, 79, 0.18),
            rgba(255, 255, 255, 0.07)
        ) !important;

    border: 1px solid rgba(214, 173, 79, 0.40) !important;

    box-shadow:
        inset 3px 0 0 var(--cofilex-gold),
        0 0 18px rgba(214, 173, 79, 0.08) !important;

    color: var(--cofilex-white) !important;
}

/* Texto e icono activos */

.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--cofilex-gold-light) !important;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.fi-topbar {
    position: relative !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 68% -80%,
            rgba(40, 105, 145, 0.24),
            transparent 48%
        ),
        linear-gradient(
            105deg,
            #04121d 0%,
            #08283b 52%,
            #04121d 100%
        ) !important;

    border-bottom: 1px solid rgba(214, 173, 79, 0.70) !important;

    box-shadow:
        0 8px 30px rgba(0, 18, 30, 0.11) !important;
}

/* Ola/brillo ambiental */

.fi-topbar::before {
    content: "";

    position: absolute;

    width: 48%;
    height: 120px;

    left: 22%;
    bottom: -95px;

    border-radius: 50%;

    border-top:
        1px solid rgba(214, 173, 79, 0.24);

    box-shadow:
        0 -3px 18px rgba(214, 173, 79, 0.08);

    pointer-events: none;
}

/* Línea dorada animada */

.fi-topbar::after {
    content: "";

    position: absolute;

    left: -30%;
    bottom: 0;

    width: 30%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a97622,
            var(--cofilex-gold-light),
            #a97622,
            transparent
        );

    box-shadow:
        0 0 9px rgba(255, 216, 106, 0.75);

    animation:
        cofilexGoldSweep 9s linear infinite;

    pointer-events: none;
}

@keyframes cofilexGoldSweep {

    0% {
        left: -30%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        left: 110%;
        opacity: 0;
    }
}

/* =========================================================
   TOPBAR — buscador
   ========================================================= */

.fi-topbar .fi-input-wrp {
    background:
        rgba(255, 255, 255, 0.025) !important;

    border-color:
        rgba(214, 173, 79, 0.34) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}

.fi-topbar input {
    color:
        var(--cofilex-white) !important;

    background:
        transparent !important;
}

.fi-topbar input::placeholder {
    color:
        rgba(255, 255, 255, 0.58) !important;
}

.fi-topbar .fi-input-wrp:focus-within {
    border-color:
        rgba(255, 216, 106, 0.72) !important;

    box-shadow:
        0 0 0 3px rgba(214, 173, 79, 0.08) !important;
}

/* =========================================================
   TOPBAR — botones e iconos
   ========================================================= */

.fi-topbar svg {
    color:
        rgba(255, 255, 255, 0.90) !important;
}

.fi-topbar button {
    transition:
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease !important;
}

.fi-topbar button:hover {
    background:
        rgba(214, 173, 79, 0.09) !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 0 0 1px rgba(214, 173, 79, 0.22) !important;
}

/* =========================================================
   MÓVIL
   ========================================================= */

.fi-sidebar-close-overlay {
    background-color:
        rgba(3, 14, 23, 0.72) !important;
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fi-topbar::after {
        animation:
            none !important;

        left:
            0 !important;

        width:
            100% !important;

        opacity:
            0.55 !important;
    }

    .fi-main-sidebar .fi-sidebar-item-btn,
    .fi-topbar button {
        transition:
            none !important;
    }
}/* =========================================================
   COFILEX — BUSCADOR SUPERIOR DORADO
   ========================================================= */

.fi-topbar .fi-input-wrp {
    background: rgba(7, 27, 42, 0.72) !important;
    border: 1px solid rgba(214, 173, 79, 0.78) !important;
    border-radius: 14px !important;

    box-shadow:
        inset 0 0 0 1px rgba(255, 216, 106, 0.04),
        0 0 0 rgba(214, 173, 79, 0) !important;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease !important;
}

.fi-topbar .fi-input-wrp:focus-within {
    border-color: #ffd86a !important;

    background: rgba(8, 35, 54, 0.92) !important;

    box-shadow:
        0 0 0 3px rgba(214, 173, 79, 0.10),
        0 0 18px rgba(214, 173, 79, 0.20) !important;
}

/* Texto */
.fi-topbar .fi-input {
    color: #ffd86a !important;
}

.fi-topbar input {
    color: #ffd86a !important;
    background: transparent !important;
}

/* Placeholder "Buscar" */
.fi-topbar input::placeholder {
    color: rgba(255, 216, 106, 0.72) !important;
}

/* Lupa */
.fi-topbar .fi-input-wrp svg {
    color: #ffd86a !important;
}

/* Si Filament genera botón dentro del buscador */
.fi-topbar .fi-input-wrp button {
    color: #ffd86a !important;
}

/* Hover elegante */
.fi-topbar .fi-input-wrp:hover {
    border-color: rgba(255, 216, 106, 0.95) !important;

    box-shadow:
        0 0 12px rgba(214, 173, 79, 0.12) !important;
}