/* ==========================================================
   APD WHATSAPP MODULE
   Premium Dashboard UI
========================================================== */


/* ==========================================================
   WhatsApp Header
========================================================== */

.apd-whatsapp-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    margin-bottom:35px;

}



/* ==========================================================
   Main Connection Card
========================================================== */


.apd-whatsapp-status-card{

    position:relative;

    overflow:hidden;

    background:#fff;

}



/*
   Barra superior de estado
*/

.apd-whatsapp-status-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        var(--apd-primary),
        var(--apd-green)
    );

}



/* ==========================================================
   Card Header
========================================================== */


.apd-whatsapp-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

}



.apd-card-title{

    display:flex;

    align-items:center;

    gap:18px;

}



.apd-card-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--apd-primary),
        var(--apd-primary-light)
    );

    color:#fff;

    font-size:28px;

    box-shadow:

        0 10px 25px rgba(13,43,108,.20);

}



/* ==========================================================
   Status Badge
========================================================== */


.apd-status-badge{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 20px;

    border-radius:999px;

    background:#fff;

    border:1px solid var(--apd-border);

    box-shadow:

        0 8px 20px rgba(0,0,0,.06);

}



.apd-status-badge strong{

    display:block;

    font-size:14px;

}



.apd-status-badge small{

    display:block;

    margin-top:3px;

    font-size:12px;

    color:var(--apd-text-light);

}



.apd-status-dot{

    font-size:22px;

}



/* ==========================================================
   Metrics
========================================================== */


.apd-whatsapp-metrics{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:20px;

    padding:0 30px 30px;

}



.apd-stat-card{

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f7f9fd
        );


    border:1px solid var(--apd-border);


    border-radius:18px;


    padding:22px;


    transition:.25s ease;


}



.apd-stat-card:hover{

    transform:translateY(-4px);


    box-shadow:

        0 15px 35px rgba(13,43,108,.12);

}



.apd-stat-card span{

    display:block;

    font-size:13px;

    color:var(--apd-text-light);

    margin-bottom:10px;

}



.apd-stat-card strong{

    display:block;

    font-size:22px;

    color:var(--apd-primary);

}



/* ==========================================================
   Information Grid
========================================================== */


.apd-info-grid{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:20px;

}



.apd-info-item{

    background:#f8fafc;

    border:1px solid var(--apd-border);

    border-radius:16px;

    padding:18px;

}



.apd-label{

    display:block;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.05em;

    color:var(--apd-text-light);

    margin-bottom:8px;

}



.apd-info-item strong{

    display:block;

    color:var(--apd-text);

    font-size:15px;

    word-break:break-word;

}



/* ==========================================================
   Legacy Info Rows
========================================================== */


.apd-info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid var(--apd-border);

}



.apd-info-row:last-child{

    border-bottom:none;

}



.apd-info-row span{

    color:var(--apd-text-light);

    font-size:14px;

}



.apd-info-row strong{

    color:var(--apd-text);

    text-align:right;

    max-width:60%;

    overflow:hidden;

    text-overflow:ellipsis;

}



/* ==========================================================
   Success / Error States
========================================================== */


.apd-text-success{

    color:#4E8B00;

    font-weight:700;

}



.apd-text-danger{

    color:#D32F2F;

    font-weight:700;

}



/* ==========================================================
   Responsive
========================================================== */


@media(max-width:900px){


    .apd-whatsapp-card-header{

        flex-direction:column;

        align-items:flex-start;

    }



    .apd-whatsapp-metrics{

        grid-template-columns:1fr;

        padding:20px;

    }



    .apd-info-grid{

        grid-template-columns:1fr;

    }


}
/* ==========================================================
   APD ACTION CENTER
   Premium Actions UI
========================================================== */


/* ==========================================================
   Action Container
========================================================== */


.apd-whatsapp-actions{

    position:relative;

    overflow:hidden;

}



.apd-whatsapp-actions::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--apd-green),
        var(--apd-primary)
    );

}



/* ==========================================================
   Action Items
========================================================== */


.apd-action-item,
.apd-action-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:24px;

    background:#fff;

    border:1px solid var(--apd-border);

    border-radius:20px;

    margin-bottom:18px;

    transition:.25s ease;

}



.apd-action-item:hover,
.apd-action-card:hover{

    transform:translateY(-3px);

    box-shadow:

        0 15px 35px rgba(13,43,108,.10);

    border-color:#d7e2f5;

}



/* ==========================================================
   Action Icon
========================================================== */


.apd-action-icon{

    width:58px;

    height:58px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;


    background:

        linear-gradient(
            135deg,
            #eef4ff,
            #ffffff
        );


    font-size:28px;


    box-shadow:

        inset 0 0 0 1px var(--apd-border);

}



/* ==========================================================
   Action Content
========================================================== */


.apd-action-content,
.apd-action-info{

    flex:1;

}



.apd-action-content h3,
.apd-action-info h3{

    margin:0 0 8px;


    color:var(--apd-primary);


    font-size:18px;


    font-weight:700;

}



.apd-action-content p,
.apd-action-info p{

    margin:0;

    color:var(--apd-text-light);

    line-height:1.6;

    max-width:560px;

}



/* ==========================================================
   Action Button Area
========================================================== */


.apd-action-button,
.apd-form{

    flex-shrink:0;

}



.apd-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;


    min-height:44px;


    padding:0 24px;


    border-radius:14px;


    font-size:14px;


    font-weight:700;


    cursor:pointer;


    border:none;


    transition:.25s ease;

}



/* Primary */

.apd-btn-primary{

    color:#fff;


    background:

        linear-gradient(
            135deg,
            var(--apd-primary),
            var(--apd-primary-light)
        );


    box-shadow:

        0 10px 25px rgba(13,43,108,.25);

}



.apd-btn-primary:hover{

    transform:translateY(-2px);


    box-shadow:

        0 15px 35px rgba(13,43,108,.35);

}



/* Secondary */


.apd-btn-secondary{

    color:var(--apd-primary);


    background:#fff;


    border:1px solid var(--apd-primary);


}



.apd-btn-secondary:hover{

    background:var(--apd-primary);


    color:#fff;


    transform:translateY(-2px);

}



/* ==========================================================
   Divider
========================================================== */


.apd-divider{

    border:0;

    height:1px;

    background:var(--apd-border);

    margin:28px 0;

}



/* ==========================================================
   Roadmap
========================================================== */


.apd-roadmap{

    margin-top:35px;

    padding:25px;


    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );


    border-radius:22px;


    border:1px solid var(--apd-border);

}



.apd-roadmap h3{

    margin:0 0 10px;


    color:var(--apd-primary);


    font-size:20px;

}



.apd-roadmap-text{

    margin:0;


    color:var(--apd-text-light);

}



/* ==========================================================
   Roadmap Grid
========================================================== */


.apd-roadmap-grid{

    display:grid;


    grid-template-columns:

        repeat(2,1fr);


    gap:16px;


    margin-top:25px;

}



/* ==========================================================
   Roadmap Items
========================================================== */


.apd-roadmap-item{

    display:flex;

    align-items:center;


    gap:12px;


    min-height:58px;


    background:#fff;


    border:1px solid var(--apd-border);


    padding:18px;


    border-radius:16px;


    color:var(--apd-text);


    font-size:14px;


    font-weight:600;


    transition:.25s ease;


}



.apd-roadmap-item:hover{


    border-color:var(--apd-primary);


    transform:translateY(-4px);


    box-shadow:

        0 12px 30px rgba(13,43,108,.10);


}



/* ==========================================================
   Responsive
========================================================== */


@media(max-width:768px){


    .apd-action-item,
    .apd-action-card{

        flex-direction:column;

        align-items:flex-start;

    }



    .apd-action-button,
    .apd-form{

        width:100%;

    }



    .apd-btn{

        width:100%;

    }



    .apd-roadmap-grid{

        grid-template-columns:1fr;

    }


}
/* ==========================================================
   APD WHATSAPP MESSAGE PREVIEW
   Premium Chat UI
========================================================== */


.apd-message-preview{

    position:relative;

    max-width:420px;

    padding:20px 22px;

    background:#EAF9DF;

    border-radius:22px 22px 22px 6px;

    box-shadow:

        0 12px 30px rgba(124,199,10,.15);

    border:1px solid rgba(124,199,10,.25);

}



/*
   Flecha estilo burbuja WhatsApp
*/

.apd-message-preview::after{

    content:"";

    position:absolute;

    left:22px;

    bottom:-10px;


    width:0;

    height:0;


    border-style:solid;

    border-width:12px 12px 0 0;

    border-color:#EAF9DF transparent transparent transparent;

}



/* ==========================================================
   Message Header
========================================================== */


.apd-message-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;

}



.apd-message-avatar{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:

        linear-gradient(
            135deg,
            var(--apd-green),
            #9BE326
        );


    font-size:20px;


}



.apd-message-name{

    font-size:14px;

    font-weight:700;

    color:var(--apd-primary);

}



/* ==========================================================
   Message Text
========================================================== */


.apd-message-text{

    color:#16213E;

    line-height:1.7;

    font-size:15px;

    margin:0;

}



/* ==========================================================
   Message Footer
========================================================== */


.apd-message-footer{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:8px;


    margin-top:12px;


    font-size:12px;


    color:#6E7B91;

}



.apd-message-status{

    color:#0D8A00;

    font-weight:700;

}



/* ==========================================================
   QR AREA
========================================================== */


.apd-qr-container{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px;

}



/* QR Card */


.apd-qr-box{

    position:relative;


    width:280px;

    height:280px;


    background:#fff;


    border-radius:28px;


    border:1px solid var(--apd-border);


    display:flex;

    align-items:center;

    justify-content:center;


    box-shadow:


        0 20px 50px rgba(13,43,108,.12);


    overflow:hidden;


}



/*
   Efecto premium alrededor QR
*/


.apd-qr-box::before{

    content:"";


    position:absolute;


    inset:15px;


    border-radius:20px;


    border:2px dashed rgba(13,43,108,.15);


}



/*
   Imagen QR
*/


.apd-qr-box img{

    position:relative;

    z-index:2;


    width:210px;

    height:210px;

    border-radius:12px;

}



/* ==========================================================
   QR Loading
========================================================== */


.apd-qr-loading{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;

    color:var(--apd-text-light);

}



.apd-qr-spinner{

    width:45px;

    height:45px;

    border-radius:50%;


    border:4px solid #E6ECF5;


    border-top-color:var(--apd-primary);


    animation:

        apd-spin 1s linear infinite;

}



@keyframes apd-spin{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }


}



/* ==========================================================
   Responsive
========================================================== */


@media(max-width:768px){


    .apd-whatsapp-header{

        flex-direction:column;

        align-items:flex-start;

    }



    .apd-whatsapp-card-header{

        flex-direction:column;

        align-items:flex-start;

    }



    .apd-action-item,
    .apd-action-card{

        flex-direction:column;

        align-items:stretch;

    }



    .apd-action-button,
    .apd-form{

        width:100%;

    }



    .apd-btn{

        width:100%;

    }



    .apd-roadmap-grid{

        grid-template-columns:1fr;

    }



    .apd-info-grid{

        grid-template-columns:1fr;

    }



    .apd-info-row{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }



    .apd-info-row strong{

        max-width:100%;

        text-align:left;

    }



    .apd-qr-box{

        width:230px;

        height:230px;

    }



}

/* ==========================================================
   WhatsApp Layout Premium
========================================================== */


.apd-whatsapp-layout{

    display:grid;

    grid-template-columns:

        1.4fr 1fr;

    gap:28px;

    align-items:start;

}



.apd-whatsapp-status-card,
.apd-whatsapp-actions{

    height:100%;

}



/* Cards internas */

.apd-card-body{

    padding:35px;

}



/* Separación entre bloques */

.apd-section-title{

    margin:25px 0 20px;

    font-size:18px;

    color:var(--apd-primary);

}



/* Mobile */

@media(max-width:1000px){

    .apd-whatsapp-layout{

        grid-template-columns:1fr;

    }

}