/* ==========================================================
   CODE MOTION AUTOMATION
   PUBLIC QUOTE PORTAL
==========================================================*/

*{
    box-sizing:border-box;
}

.cqm-card{
    max-width:1150px;
    margin:40px auto;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
}

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

.cqm-header{

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

    background:#0B1426;

    padding:25px 30px 30px;

    text-align:center;
}

.cqm-logo{

    display:block;

    width:320px;

    max-width:90%;

    height:auto;

    margin-bottom:20px;

}

.cqm-title{

    display:block;

    color:#ffffff;

    font-size:38px;

    font-weight:700;

    letter-spacing:1px;

    line-height:1.2;

    margin-bottom:8px;

}

.cqm-quote-number{

    color:#d4d8e2;

    font-size:22px;

    margin-bottom:18px;

}

.cqm-status{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

}

.cqm-status.draft{
    background:#F59E0B;
    color:#fff;
}

.cqm-status.approved{
    background:#16A34A;
    color:#fff;
}

.cqm-status.rejected{
    background:#DC2626;
    color:#fff;
}

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

.cqm-body{

    padding:35px;

}

.cqm-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

}

.cqm-section{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:10px;

    padding:24px;

}

.cqm-section h3{

    margin:0 0 18px;

    color:#0B1426;

    font-size:22px;

    border-bottom:2px solid #ececec;

    padding-bottom:10px;

}

.cqm-row{

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin-bottom:12px;

}

.cqm-label{

    font-weight:700;

    color:#374151;

}

.cqm-value{

    text-align:right;

    color:#111827;

}

/* ==========================================================
   NOTES
==========================================================*/

.cqm-notes{

    margin-top:30px;

    padding:24px;

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:10px;

}

.cqm-notes h3{

    margin-top:0;

}

/* ==========================================================
   PDF
==========================================================*/

.cqm-pdf{

    margin-top:35px;

}

.cqm-pdf iframe{

    width:100%;

    height:900px;

    border:none;

    border-radius:10px;

}

/* ==========================================================
   SIGNATURE
==========================================================*/

.cqm-signature-card{

    margin-top:35px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:10px;

    padding:25px;

}

.cqm-signature-card h3{

    margin-bottom:10px;

}

.cqm-form-group{

    margin-bottom:18px;

}

.cqm-form-group label{

    display:block;

    margin-bottom:6px;

    font-weight:600;

}

.cqm-form-group input[type=text],
.cqm-form-group input[type=email]{

    width:100%;

    padding:12px;

    border:1px solid #d1d5db;

    border-radius:8px;

    font-size:15px;

}

#signature-pad{

    width:100%;

    height:220px;

    border:2px dashed #cbd5e1;

    border-radius:10px;

    background:#fff;

    cursor:crosshair;

}

.cqm-signature-buttons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:20px;

}

.cqm-button{

    display:inline-block;

    background:#D62828;

    color:#fff;

    text-decoration:none;

    border:none;

    border-radius:8px;

    padding:12px 24px;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.cqm-button:hover{

    background:#b91c1c;

    color:#fff;

}

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

@media(max-width:900px){

    .cqm-card{

        margin:15px;

    }

    .cqm-body{

        padding:20px;

    }

    .cqm-grid{

        grid-template-columns:1fr;

    }

    .cqm-header{

        padding:20px;

    }

    .cqm-logo{

        width:320px;

    }

    .cqm-title{

        font-size:30px;

    }

    .cqm-quote-number{

        font-size:18px;

    }

    .cqm-pdf iframe{

        height:650px;

    }

}
/* FORZAR TAMAÑO DEL LOGO */

.cqm-header img.cqm-logo{
    width:320px !important;
    max-width:320px !important;
    height:auto !important;
    display:block !important;
    margin:0 auto 25px !important;
}