/* ==========================================================
   🎛️ BOTÓN FILTROS
========================================================== */

.btnFiltrosCatalogo{

    background:var(--colorCardFondo);
    color:var(--colorTextoGeneral);

    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;

    padding:10px 18px;

    font-size:.95rem;
    font-weight:500;

    transition:.25s;

    box-shadow:
        0 3px 12px rgba(0,0,0,.06);

}

.btnFiltrosCatalogo:hover{

    background:var(--colorPrincipal);
    color:white;

    transform:translateY(-2px);

    box-shadow:
        0 8px 22px rgba(245,151,154,.35);

}

.btnFiltrosCatalogo i{

    color:var(--colorPrincipal);

    transition:.25s;

}

.btnFiltrosCatalogo:hover i{

    color:white;

}


/* ==========================================================
   POPUP
========================================================== */

.popupFiltrosCatalogo{

    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;

    align-items:flex-end;

    justify-content:center;

}

.popupFiltrosOverlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(3px);

}


/* ==========================================================
   CONTENIDO
========================================================== */

.popupFiltrosContenido{

    position:relative;

    width:100%;
    max-width:520px;

    background:var(--colorCardFondo);

    border-radius:28px 28px 0 0;

    padding:24px;

    box-shadow:
        0 -10px 35px rgba(0,0,0,.18);

    animation:popupFiltrosSubir .25s ease;

}


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

.popupFiltrosHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.popupFiltrosHeader h4{

    margin:0;

    color:var(--colorTextoGeneral);

    font-size:1.15rem;

    font-weight:700;

}

.popupFiltrosHeader i{

    color:var(--colorPrincipal);

}

.popupFiltrosCerrar{

    border:none;

    background:none;

    font-size:2rem;

    color:#999;

    cursor:pointer;

    transition:.2s;

}

.popupFiltrosCerrar:hover{

    color:var(--colorPrincipal);

}


/* ==========================================================
   BODY
========================================================== */

.popupFiltrosBody{

    display:flex;

    flex-direction:column;

    gap:14px;

}


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

.btnFiltroCatalogo{

    width:100%;

    border:none;

    background:#fafafa;

    color:var(--colorTextoGeneral);

    border-radius:18px;

    padding:16px 18px;

    text-align:left;

    font-size:1rem;

    font-weight:500;

    transition:.25s;

    display:flex;

    align-items:center;

}

.btnFiltroCatalogo i{

    width:28px;

    color:var(--colorPrincipal);

    font-size:1.05rem;

}

.btnFiltroCatalogo:hover{

    background:var(--colorPrincipal);

    color:white;

    transform:translateX(4px);

    box-shadow:
        0 10px 24px rgba(245,151,154,.30);

}

.btnFiltroCatalogo:hover i{

    color:white;

}


/* ==========================================================
   ANIMACIÓN
========================================================== */

@keyframes popupFiltrosSubir{

    from{

        transform:translateY(60px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}


/* ==========================================================
   DESKTOP
========================================================== */

@media(min-width:768px){

    .popupFiltrosCatalogo{

        align-items:center;

    }

    .popupFiltrosContenido{

        border-radius:26px;

        max-width:430px;

    }

}

.mensajeClienteCatalogo{
    background: linear-gradient(
        135deg,
        rgba(245,151,154,.10),
        rgba(169,87,90,.05)
    );

    border:1px solid rgba(169,87,90,.18);
    border-left:4px solid var(--colorPrincipal);

    border-radius:14px;

    padding:14px 16px;

    transition:.25s;
}

.mensajeClienteCatalogoTitulo{
    font-family:var(--fontPrincipal);
    font-size:15px;
    font-weight:600;
    color:var(--colorSecundario);
    margin-bottom:4px;
}

.mensajeClienteCatalogoTexto{
    font-family:var(--fontPrincipal);
    font-size:14px;
    line-height:1.45;
    color:var(--colorTextoGeneral);
}

.mensajeClienteCatalogo a{
    color: var(--colorPrincipal);
    font-weight: 600;
    text-decoration: none;
    transition: .2s;
}

.mensajeClienteCatalogo a:hover{
    color: var(--colorSecundario);
    text-decoration: underline;
}

/* ==========================================================
   👤 POPUP REGISTRO CLIENTE
   ========================================================== */

.popupRegistroCliente{
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    padding: 20px;
    font-family: var(--fontPrincipal);
}

.popupRegistroClienteOverlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
}

.popupRegistroClienteContenido{
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--colorCardFondo);
    color: var(--colorCardTexto);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 55px rgba(0,0,0,.20);
    animation: popupRegistroClienteAnim .25s ease;
}

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

.popupRegistroClienteHeader{
    background: linear-gradient(
        135deg,
        var(--colorPrincipal),
        var(--colorSecundario)
    );

    color: white;

    padding: 18px 22px;

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

.popupRegistroClienteHeader h4{
    margin:0;
    font-size:1.2rem;
    font-weight:600;
}

.popupRegistroClienteCerrar{
    border:none;
    background:none;
    color:white;
    font-size:2rem;
    line-height:1;
    cursor:pointer;
    opacity:.85;
    transition:.2s;
}

.popupRegistroClienteCerrar:hover{
    opacity:1;
    transform:scale(1.08);
}

/* ==========================================================
   BODY
   ========================================================== */

.popupRegistroClienteBody{
    padding:26px;
}

.tituloRegistroCliente{
    font-size:1.45rem;
    font-weight:700;
    color:var(--colorTextoGeneral);
    margin-bottom:10px;
}

.descripcionRegistroCliente{
    font-size:.95rem;
    color:#777;
    line-height:1.55;
}

/* ==========================================================
   INPUTS
   ========================================================== */

.popupRegistroClienteBody .form-label{
    font-weight:600;
    color:var(--colorTextoGeneral);
    margin-bottom:8px;
}

.inputRegistroCliente{
    border-radius:14px;
    border:1px solid #dddddd;
    padding:13px 15px;
    font-size:.95rem;
    transition:.25s;
    box-shadow:none !important;
}

.inputRegistroCliente:focus{
    border-color:var(--colorPrincipal);
    box-shadow:0 0 0 .2rem rgba(245,151,154,.18)!important;
}

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

#btnCancelarRegistroCliente,
#btnGuardarRegistroCliente{
    border-radius:14px;
    padding:11px 22px;
    font-weight:600;
}

#btnCancelarRegistroCliente{
    border:1px solid #dddddd;
    background:white;
    color:#666;
}

#btnCancelarRegistroCliente:hover{
    background:#f7f7f7;
}

#btnGuardarRegistroCliente{
    border:none;
    background:var(--colorPrincipal);
}

#btnGuardarRegistroCliente:hover{
    background:var(--colorSecundario);
}

/* ==========================================================
   ANIMACIÓN
   ========================================================== */

@keyframes popupRegistroClienteAnim{

    from{
        opacity:0;
        transform:translateY(18px) scale(.96);
    }

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

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:576px){

    .popupRegistroCliente{
        padding:14px;
        align-items:flex-end;
    }

    .popupRegistroClienteContenido{
        max-width:100%;
        border-radius:22px 22px 0 0;
    }

    .popupRegistroClienteBody{
        padding:22px;
    }

}