/*====================================================
    SYSTEM LEADS PRO CRM
    CONTACTOS.CSS
====================================================*/

*{
    box-sizing:border-box;
}

/*====================================================
    CABECERA
====================================================*/

.slp-page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    margin-bottom:25px;

    flex-wrap:wrap;

}

.slp-page-header h1{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#111827;

}

.slp-page-header p{

    margin-top:6px;

    color:#64748B;

    font-size:15px;

}

/*====================================================
    BOTON
====================================================*/

.slp-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:36px;

    padding:0 22px;

    border:none;

    border-radius:12px;

    background:#2563EB;

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.slp-btn:hover{

    background:#1D4ED8;

}

/*====================================================
    BUSCADOR
====================================================*/

.slp-toolbar{

    margin-bottom:25px;

}

.slp-toolbar .slp-input{

    width:100%;

    height:48px;

    padding:0 18px;

    border:1px solid #D1D5DB;

    border-radius:12px;

    font-size:15px;

    outline:none;

    transition:.25s;

}

.slp-toolbar .slp-input:focus{

    border-color:#2563EB;

    box-shadow:0 0 0 3px rgba(37,99,235,.10);

}

/*====================================================
    KANBAN
====================================================*/

.slp-kanban{

    display:grid;

	grid-template-columns:repeat(5,1fr);

    gap:20px;

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    align-items:flex-start;

    padding-bottom:20px;

}

.slp-kanban::-webkit-scrollbar{

    height:10px;

}

.slp-kanban::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:30px;

}

/*====================================================
    COLUMNAS
====================================================*/

.slp-column{

    flex:1;

    min-width:0;

    width:100%;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 4px 14px rgba(15,23,42,.05);

    display:flex;

    flex-direction:column;

}

.slp-column:hover{

    box-shadow:0 10px 25px rgba(15,23,42,.08);

}

.slp-column-header{

    padding:16px 18px;

    color:#fff;

    font-weight:700;

    display:flex;

    align-items:center;

justify-content:center;
}

.slp-column-header h3{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:#fff;

}

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

.slp-column[data-estado="Nuevo"] .slp-column-header{

    background:#EF4444;

}

.slp-column[data-estado="Cita cerrada"] .slp-column-header{

    background:#F59E0B;

}

.slp-column[data-estado="Registrado"] .slp-column-header{

    background:#10B981;

}

.slp-column[data-estado="Se lo piensa"] .slp-column-header{

    background:#3B82F6;

}

.slp-column[data-estado="No quiere"] .slp-column-header{

    background:#6B7280;

}

/*====================================================
    CUERPO COLUMNAS
====================================================*/

.slp-column-body{

    padding:14px;

    display:flex;

    flex-direction:column;

    gap:14px;

    min-height:600px;

    overflow-y:auto;

}

.slp-column-body::-webkit-scrollbar{

    width:8px;

}

.slp-column-body::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:20px;

}

.slp-column-body::-webkit-scrollbar-thumb:hover{

    background:#94A3B8;

}

/*====================================================
    TARJETAS
====================================================*/

.slp-card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:16px;

    padding:18px;

    box-shadow:0 6px 18px rgba(15,23,42,.06);

    transition:.25s;

    cursor:grab;

}

.slp-card:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(15,23,42,.12);

}

.slp-card:active{

    cursor:grabbing;

}

.slp-card h4{

    margin:1 0 10px !important;

    font-size:18px !important;

    font-weight:700 !important;

    color:#111827 !important;

    line-height:1.2 !important;

}

/*====================================================
    DATOS CONTACTO
====================================================*/

.slp-card-phone,
.slp-card-email{

    display:flex;

    align-items:center;

    gap:5px !important;

    margin:2px 0 !important;

    font-size:14px !important;

    color:#64748B;

    line-height:1.0 !important;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

}

.slp-card-phone{

    color:#334155;

}

.slp-card-email{

    color:#64748B;

}

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

.slp-card-buttons{

    display:flex;

    gap:10px;

    margin-top:16px;

}

.slp-card-buttons form{

    margin:0;

}

/*====================================================
    BOTONES DE ACCIONES
====================================================*/

.slp-card-buttons{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:16px;
}

.slp-card-buttons form{
    margin:0;
    padding:0;
}


/* EDITAR Y ELIMINAR */

.slp-card-buttons .slp-btn-edit,
.slp-card-buttons .slp-btn-delete{

    width:36px !important;
    height:36px !important;

    min-width:36px !important;
    min-height:36px !important;

    max-width:36px !important;
    max-height:36px !important;

    padding:0 !important;
    margin:0 !important;

    border:none !important;
    border-radius:10px !important;

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    flex:0 0 36px !important;

    box-sizing:border-box !important;

    cursor:pointer;

    transition:.25s;

    font-size:16px !important;
    line-height:1 !important;
}


/* EDITAR */

.slp-btn-edit{
    background:#2563EB;
    color:#FFFFFF;
}

.slp-btn-edit:hover{
    background:#1D4ED8;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(37,99,235,.30);
}


/* ELIMINAR */

.slp-btn-delete{
    background:#EF4444;
    color:#FFFFFF;
}

.slp-btn-delete:hover{
    background:#DC2626;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(239,68,68,.30);
}

/*====================================================
    MODAL
====================================================*/

.slp-modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(4px);

    z-index:99999;

}

.slp-modal.show{

    display:flex;

}

.slp-modal-box{

    width:560px;

    max-width:95%;

    background:#FFFFFF;

    border-radius:18px;

    padding:30px;

    box-shadow:0 25px 60px rgba(15,23,42,.25);

    animation:slpModal .25s ease;

}

@keyframes slpModal{

    from{

        opacity:0;

        transform:translateY(-25px) scale(.98);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*====================================================
    FORMULARIO
====================================================*/

.slp-form-group{

    margin-bottom:18px !important;

}

.slp-form-group label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#374151;

}

.slp-form-group input,
.slp-form-group select{

    width:100%;

    height:46px;

    border:1px solid #D1D5DB;

    border-radius:12px;

    padding:0 14px !important;

    font-size:15px;

    transition:.25s;

    background:#fff;
}

.slp-form-group input:focus,
.slp-form-group select:focus{

    outline:none;

    border-color:#2563EB;

    box-shadow:0 0 0 3px rgba(37,99,235,.12);

}

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

.slp-modal-buttons{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:28px;

}

.slp-btn-secondary{

    height:44px;

    padding:0 20px;

    border:none;

    border-radius:12px;

    background:#E5E7EB;

    color:#111827;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.slp-btn-secondary:hover{

    background:#D1D5DB;

}

/* =====================================================
   CONTACTOS MOVIL
===================================================== */

@media (max-width:768px){

    .slp-kanban{
        display:flex;
        flex-direction:column;
        gap:20px;
        width:100%;
    }


    .slp-column{
        width:100%;
        min-width:0;
        border-radius:18px;
        overflow:hidden;
    }


    .slp-column-header{
        width:100%;
        padding:16px;
        font-size:18px;
    }


    .slp-card{
        width:100%;
        box-sizing:border-box;
    }


    .slp-contact-card{
        width:100%;
        margin-bottom:15px;
    }


}

/* =====================================================
   KANBAN MOVIL HORIZONTAL
===================================================== */

@media (max-width:768px){

    .slp-kanban{
        display:flex;
        flex-direction:row;
        overflow-x:auto;
        gap:15px;
        padding-bottom:15px;
        width:100%;
        scroll-snap-type:x mandatory;
    }


    .slp-kanban::-webkit-scrollbar{
        height:6px;
    }


    .slp-column{
        flex:0 0 85%;
        max-width:85%;
        min-width:85%;
        scroll-snap-align:start;
    }


    .slp-column-header{
        font-size:18px;
        padding:15px;
    }


    .slp-contact-card{
        width:100%;
    }

}


/* ==========================================
   BOTONES LISTADO CLIENTES / SOCIOS
   ========================================== */

.slp-contact-list-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
}

.slp-contact-list-actions form{
    margin:0 !important;
    padding:0 !important;
    width:36px !important;
    height:36px !important;
    display:block !important;
}

.slp-contact-list-actions .slp-btn-edit,
.slp-contact-list-actions .slp-btn-delete{

    width:36px !important;
    height:36px !important;

    min-width:36px !important;
    min-height:36px !important;

    max-width:36px !important;
    max-height:36px !important;

    padding:0 !important;
    margin:0 !important;

    box-sizing:border-box !important;

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

    border-radius:10px !important;
    line-height:1 !important;
}

/* ==========================================
   BUSCADOR + ORDEN DE CLIENTES Y SOCIOS
   ========================================== */

.slp-toolbar{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:25px;

}


/* BUSCADOR */

.slp-toolbar #slp-search{

    flex:1;

}


/* SELECTOR */

.slp-toolbar #slp-status-order{

    width:220px;

    flex:0 0 220px;

    height:48px;

    padding:0 14px;

    background:#FFFFFF;

    cursor:pointer;

}


/* MÓVIL */

@media(max-width:768px){

    .slp-toolbar{

        flex-direction:column;

        align-items:stretch;

        gap:10px;

    }


    .slp-toolbar #slp-search,
    .slp-toolbar #slp-status-order{

        width:100%;

        flex:initial;

    }

}

/* ==========================================
   VER MÁS CONTACTOS
========================================== */

.slp-card[data-load-more-visible="0"] {
    display: none !important;
}


/* BOTÓN VER MÁS */

.slp-load-more-container {

    width: 100%;

    display: flex;

    justify-content: center;

    margin: 30px 0 10px;

}


#slp-load-more {

    min-width: 220px;

    padding: 13px 24px;

    font-weight: 700;

    cursor: pointer;

}