/* =========================================
   SIDEBAR NEGRO + TEXTO BLANCO
========================================= */

/* Fondo general */
.sidebar,
.sidebar-inner,
.sidebar-menu {
    background-color: #000 !important;
}

/* Texto del menú */
.sidebar-menu a,
.sidebar-menu span,
.sidebar-menu li {
    color: #fff !important;
}

/* Íconos */
.sidebar-menu i,
.sidebar-menu img {
    filter: brightness(0) invert(1);
}

/* Submenús */
.sidebar-menu ul {
    background-color: #000 !important;
}

/* =========================================
   HOVER AMARILLO SIDEBAR
========================================= */

.sidebar-menu a:hover {
    background-color: #efb80b !important;
    color: #000 !important;
}

/* Íconos en hover */
.sidebar-menu a:hover i,
.sidebar-menu a:hover img {
    filter: none;
}

/* =========================================
   HEADER-LEFT NEGRO
========================================= */

.header-left {
    background-color: #000 !important;
}

.header-left.active {
    background-color: #000 !important;
}

/* =========================================
   USER MENU NEGRO
========================================= */

.nav.user-menu {
    background-color: #000 !important;
}

.nav.user-menu .nav-item,
.nav.user-menu .nav-link {
    background-color: #000 !important;
    color: #fff !important;
}

.nav.user-menu .dropdown-menu {
    background-color: #000 !important;
    border: none;
}

.nav.user-menu .dropdown-item,
.nav.user-menu h5,
.nav.user-menu h6,
.nav.user-menu span {
    color: #fff !important;
}

/* =========================================
   HEADER SUPERIOR NEGRO
========================================= */

.header {
    background-color: #000 !important;
}

.header * {
    color: #fff !important;
}

.header .dropdown-menu {
    background-color: #000 !important;
    border: none;
}

/* =========================================
   ICONO 3 PUNTOS MOBILE AMARILLO
========================================= */

.mobile-user-menu i.fa-ellipsis-v {
    color: #efb80b !important;
}

.mobile-user-menu a:hover i.fa-ellipsis-v {
    color: #ffcc00 !important;
}

/* =========================================
   LOADER OVERLAY GLOBAL
========================================= */

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background: rgba(20, 20, 20, 0.65);
    backdrop-filter: blur(4px);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 99999;

    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease;
}

.loader-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loader-box {
    width: 360px;

    padding: 35px 45px;

    background: #ffffff;
    border-radius: 14px;

    text-align: center;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);

    animation: fadeInUp 0.4s ease;
}

.spinner {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

    border: 6px solid #f3f3f3;
    border-top: 6px solid #efb80b;
    border-radius: 50%;

    animation: spin 1s linear infinite;
}

.loader-box h4 {
    margin: 10px 0 5px;

    color: #333;
    font-weight: 600;
}

.loader-box p {
    margin: 0;

    font-size: 14px;
    color: #666;
}

/* =========================================
   ANIMACIONES
========================================= */

@keyframes spin {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeInUp {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================= */
/* FAB PREMIUM FINAL */
/* ========================================= */

.fab-container{

    position: fixed;

    right: 28px;
    bottom: 28px;

    z-index: 999999;

    overflow: visible;
}

/* ========================================= */
/* BOTÓN PRINCIPAL */
/* ========================================= */

.fab-main{

    width: 72px;
    height: 72px;

    border: none;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

    color: #fff;

    font-size: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 18px 40px rgba(0,0,0,.28);

    transition: all .35s ease;
}

.fab-main:hover{
    transform: scale(1.08);
}

.fab-main.active{
    transform: rotate(45deg);
}

/* ========================================= */
/* CONTENEDOR OPCIONES */
/* ========================================= */

.fab-options{

    position: absolute;

    right: 0;
    bottom: 95px;

    opacity: 0;
    visibility: hidden;

    overflow: visible;

    pointer-events: none;

    transition: all .3s ease;
}

.fab-options.show{

    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}

/* ========================================= */
/* ITEMS */
/* ========================================= */

.fab-item{

    position: absolute;

    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    gap: 14px;

    white-space: nowrap;

    text-decoration: none !important;

    opacity: 0;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

/* ========================================= */
/* CURVATURA ORBITAL */
/* ========================================= */

.fab-options.show .fab-item:nth-child(1){
    transform: translate(-15px,-25px);
    opacity: 1;
}

.fab-options.show .fab-item:nth-child(2){
    transform: translate(-55px,-105px);
    opacity: 1;
}

.fab-options.show .fab-item:nth-child(3){
    transform: translate(-85px,-195px);
    opacity: 1;
}

.fab-options.show .fab-item:nth-child(4){
    transform: translate(-95px,-290px);
    opacity: 1;
}

.fab-options.show .fab-item:nth-child(5){
    transform: translate(-70px,-385px);
    opacity: 1;
}

.fab-options.show .fab-item:nth-child(6){
    transform: translate(-20px,-470px);
    opacity: 1;
}

/* ========================================= */
/* LABELS */
/* ========================================= */

.fab-item span{

    background: rgba(15,23,42,.97);

    color: #fff;

    height: 46px;

    padding: 0 20px;

    border-radius: 16px;

    display: flex;
    align-items: center;

    font-size: 14px;
    font-weight: 600;

    box-shadow:
        0 10px 28px rgba(0,0,0,.20);

    transition: all .25s ease;
}

.fab-item:hover span{
    transform: translateX(-5px);
}

/* ========================================= */
/* ICONOS */
/* ========================================= */

.fab-icon{

    width: 58px;
    height: 58px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    font-size: 22px;

    flex-shrink: 0;

    box-shadow:
        0 10px 28px rgba(0,0,0,.20);

    transition: all .25s ease;
}

.fab-item:hover .fab-icon{
    transform: scale(1.08);
}

/* ========================================= */
/* COLORES */
/* ========================================= */

.fab-purple .fab-icon{
    background: linear-gradient(135deg,#7c3aed,#8b5cf6);
}

.fab-green .fab-icon{
    background: linear-gradient(135deg,#16a34a,#4ade80);
}

.fab-orange .fab-icon{
    background: linear-gradient(135deg,#ea580c,#fb923c);
}

.fab-pink .fab-icon{
    background: linear-gradient(135deg,#db2777,#f472b6);
}

.fab-blue .fab-icon{
    background: linear-gradient(135deg,#2563eb,#60a5fa);
}

.fab-cyan .fab-icon{
    background: linear-gradient(135deg,#0891b2,#22d3ee);
}

/* ========================================= */
/* MOBILE */
/* ========================================= */

@media(max-width:768px){

    .fab-container{

        right: 16px;
        bottom: 16px;
    }

    .fab-main{

        width: 58px;
        height: 58px;

        font-size: 22px;
    }

    .fab-icon{

        width: 46px;
        height: 46px;

        font-size: 18px;
    }

    /* SOLO ICONOS EN MOBILE */
    .fab-item span{
        display: none;
    }

    /* CURVA MOBILE */
    .fab-options.show .fab-item:nth-child(1){
        transform: translate(0,-65px);
    }

    .fab-options.show .fab-item:nth-child(2){
        transform: translate(-35px,-120px);
    }

    .fab-options.show .fab-item:nth-child(3){
        transform: translate(-55px,-190px);
    }

    .fab-options.show .fab-item:nth-child(4){
        transform: translate(-55px,-265px);
    }

    .fab-options.show .fab-item:nth-child(5){
        transform: translate(-30px,-335px);
    }

    .fab-options.show .fab-item:nth-child(6){
        transform: translate(0,-405px);
    }
}

/* ========================================= */
/* EVITAR RECORTES GLOBALES */
/* ========================================= */

.wrapper,
.content-wrapper,
.content,
.main-sidebar{

    overflow: visible !important;
}










/* =========================================
   PAGE HEADER
========================================= */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

/* =========================================
   TITULO
========================================= */

.page-title h4 {
    margin: 0 0 8px;

    font-size: 28px;
    font-weight: 700;

    color: #111827;
}

/* =========================================
   BREADCRUMB PREMIUM
========================================= */

.page-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    font-size: 14px;
}

/* Inicio */
.page-breadcrumb a {
    display: flex;
    align-items: center;
    gap: 6px;

    text-decoration: none;

    color: #6b7280;

    font-weight: 500;

    transition: all 0.25s ease;
}

.page-breadcrumb a:hover {
    color: #efb80b;
}

/* Flechas */
.breadcrumb-separator {
    color: #cbd5e1;

    font-size: 12px;
}

/* Padre */
.breadcrumb-parent {
    color: #374151;

    font-weight: 700;
}

/* Actual */
.breadcrumb-current {
    color: #111827;

    font-weight: 600;
}

/* =========================================
   BOTONES
========================================= */

.page-btn {
    display: flex;
    align-items: center;

    gap: 10px;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .page-header {
        flex-direction: column;
        align-items: center;

        text-align: center;

        gap: 18px;
    }

    /* Título */
    .page-title {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .page-title h4 {
        margin-bottom: 10px;

        font-size: 24px;

        text-align: center;
    }

    /* Breadcrumb */
    .page-breadcrumb {
        justify-content: center;

        text-align: center;
    }

    /* Botones */
    .page-btn {
        width: 100%;

        display: flex;

        gap: 10px;
    }

    .page-btn button {
        flex: 1;

        display: flex;
        align-items: center;
        justify-content: center;
    }
}