/* Fondo suave con patrón */
.fen-bg {
    background: radial-gradient(24rem 24rem at -10% -10%, rgba(41,98,255,.12), transparent 60%), radial-gradient(28rem 28rem at 110% 10%, rgba(0,200,180,.12), transparent 60%), radial-gradient(18rem 18rem at 50% 120%, rgba(123,31,162,.10), transparent 60%), linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
    min-height: 100vh;
}

/* Cinta superior con gradiente institucional */
.fen-topbar {
    height: 6px;
    background: linear-gradient(90deg,#0d47a1 0%, #1565c0 35%, #2e7d32 65%, #00897b 100%);
}

/* Navbar “glass” */
.fen-navbar {
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(150%) blur(8px);
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid rgba(13,71,161,.06);
}

/* Toggle más visible en fondos claros */
.fen-toggler {
    border: 0 !important;
}

/* Píldoras de navegación */
.fen-pill {
    border-radius: 999px;
    padding: .45rem .9rem;
    font-weight: 600;
    transition: all .2s ease;
    border: 1px solid transparent;
    color: #0f172a !important;
}

    .fen-pill:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    .fen-pill.active {
        background: #e0e7ff;
        border-color: #c7d2fe;
        box-shadow: 0 1px 0 rgba(13,71,161,.06), inset 0 0 0 1px rgba(99,102,241,.15);
    }

/* Superficie principal (tarjeta contenedora de la vista) */
.fen-surface {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(2,6,23,.06);
}

/* Footer limpio */
.fen-footer {
    background: transparent;
}

/* Ajustes pequeños */
.navbar-brand {
    letter-spacing: .2px;
}