/* ==========================================================
   SEGUIMIENTO
   ========================================================== */

.trackingHero{
    padding:42px 22px;

    border-bottom:1px solid #dce5eb;

    background:#f2f6fa;
}

.trackingHero > div{
    width:min(1180px,100%);

    margin:auto;
}

.trackingHero span{
    color:#087cf0;

    font-size:12px;
    font-weight:900;

    letter-spacing:2px;
}

.trackingHero h1{
    margin:8px 0;

    font-size:39px;
}

.trackingHero p{
    margin:0;

    color:#6d8292;

    font-size:17px;
}

.trackingPublicPage{
    width:min(1180px,calc(100% - 40px));

    margin:auto;
    padding:30px 0 70px;
}

.trackingSearchCard{
    padding:18px;

    display:grid;
    grid-template-columns:1fr 1fr 180px;
    gap:12px;
    align-items:end;

    border:1px solid #dce5eb;
    border-radius:13px;

    background:white;
}

.trackingSearchCard label span{
    display:block;

    margin-bottom:6px;

    font-size:13px;
    font-weight:800;
}

.trackingSearchCard input{
    width:100%;
    height:45px;

    padding:0 12px;

    border:1px solid #cad9e3;
    border-radius:7px;

    font-size:15px;
}

.trackingSearchCard button{
    height:45px;

    border:0;
    border-radius:7px;

    background:#087cf0;
    color:white;

    font-weight:900;
}

.trackingError{
    margin-top:15px;
    padding:14px;

    border-radius:8px;

    background:#fff0f2;
    color:#c32a42;

    font-weight:750;
}

.trackingResultCard{
    margin-top:18px;
    padding:22px;

    border:1px solid #dce5eb;
    border-radius:13px;

    background:white;
}

.trackingResultHeader{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.trackingResultHeader span{
    color:#708594;
    font-size:10px;
}

.trackingResultHeader h2{
    margin:4px 0;

    font-size:27px;
}

.trackingResultHeader p{
    margin:0;
    color:#718695;
}

.trackingStatusCurrent{
    align-self:start;

    padding:9px 12px;

    border-radius:999px;

    background:#e7f5ec;
    color:#147b47;
}

.trackingSteps{
    margin:25px 0;

    display:flex;
}

.trackingStep{
    position:relative;

    flex:1;

    text-align:center;
}

.trackingStep:not(:last-child):after{
    content:"";

    position:absolute;

    top:18px;
    left:50%;
    right:-50%;

    height:3px;

    background:#dce5eb;
}

.trackingStep.active:not(:last-child):after{
    background:#087cf0;
}

.trackingStepDot{
    position:relative;
    z-index:2;

    width:37px;
    height:37px;

    margin:auto;

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

    border-radius:50%;

    background:#dfe7ec;
    color:#718492;

    font-weight:900;
}

.trackingStep.active .trackingStepDot{
    background:#087cf0;
    color:white;
}

.trackingStep span{
    display:block;

    margin-top:7px;

    color:#617989;

    font-size:11px;
    font-weight:700;
}

.trackingSummaryGrid{
    margin:20px 0;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.trackingSummaryGrid > div{
    padding:12px;

    border-radius:8px;

    background:#f5f8fa;
}

.trackingSummaryGrid span{
    display:block;

    color:#738795;

    font-size:10px;
}

.trackingSummaryGrid strong{
    display:block;

    margin-top:4px;
}

.trackingProduct{
    min-height:60px;

    padding:10px 0;

    display:grid;
    grid-template-columns:1fr 170px 120px;
    gap:15px;
    align-items:center;

    border-top:1px solid #edf1f4;
}

.trackingProduct small{
    display:block;

    margin-top:3px;

    color:#728694;
}

.trackingCancelled{
    margin:20px 0;

    padding:15px;

    border-radius:8px;

    background:#fff0f2;
    color:#c22a42;

    font-weight:850;
}


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

.qrAdminGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.qrAdminCard{
    padding:22px;

    border:1px solid #dce5eb;
    border-radius:13px;

    background:white;

    text-align:center;
}

.qrAdminCard h2{
    margin:0 0 7px;
}

.qrAdminCard p{
    color:#6c8291;
}

.qrImageBox{
    width:260px;
    max-width:100%;

    margin:20px auto;

    padding:12px;

    border:1px solid #e1e7eb;
    border-radius:12px;

    background:white;
}

.qrImageBox img{
    display:block;

    width:100%;
}

.qrAdminCard > strong{
    display:block;

    overflow-wrap:anywhere;

    color:#0871cf;
}

.qrLocalWarning{
    margin-top:15px;

    padding:12px;

    border-radius:8px;

    background:#fff7e6;
    color:#80611a;

    font-size:11px;
}


/* ==========================================================
   INTEGRACIONES
   ========================================================== */

.integrationCard{
    min-height:78px;

    margin-bottom:10px;
    padding:15px 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    border:1px solid #dce5eb;
    border-radius:10px;

    background:white;
}

.integrationCard h2{
    margin:0;

    font-size:17px;
}

.integrationCard p{
    margin:4px 0 0;

    color:#708594;

    font-size:12px;
}

.integrationStatus{
    padding:7px 10px;

    border-radius:999px;

    font-size:10px;
    font-weight:900;
}

.integrationStatus.ready{
    background:#e6f6ec;
    color:#187947;
}

.integrationStatus.pending{
    background:#fff0d4;
    color:#9a6600;
}

.integrationSecurity{
    margin-top:20px;
    padding:14px;

    border-radius:8px;

    background:#eef6fb;
    color:#42677e;

    font-size:12px;
}


/* ==========================================================
   LEGALES
   ========================================================== */

.legalPage{
    width:min(900px,calc(100% - 40px));

    margin:auto;
    padding:45px 0 70px;

    color:#17384d;
}

.legalPage h1{
    margin:0 0 20px;

    font-size:37px;
}

.legalPage h2{
    margin:28px 0 8px;

    font-size:20px;
}

.legalPage p,
.legalPage li{
    color:#566f80;

    font-size:15px;
    line-height:1.65;
}

.legalImportant{
    padding:17px;

    border-radius:9px;

    background:#eef6fd;

    color:#275f83;

    font-weight:750;
    line-height:1.5;
}

.legalPrimaryButton{
    min-height:44px;

    margin-top:10px;
    padding:0 18px;

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

    border-radius:7px;

    background:#087cf0;
    color:white;

    text-decoration:none;

    font-weight:850;
}

.legalUpdated{
    margin-top:40px !important;

    color:#82939f !important;

    font-size:11px !important;
}


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

@media(max-width:800px){

    .trackingSearchCard{
        grid-template-columns:1fr;
    }

    .trackingSteps{
        flex-direction:column;
        gap:10px;
    }

    .trackingStep{
        display:flex;
        align-items:center;
        gap:10px;

        text-align:left;
    }

    .trackingStep:not(:last-child):after{
        display:none;
    }

    .trackingStepDot{
        margin:0;
        flex:0 0 37px;
    }

    .trackingStep span{
        margin:0;
    }

    .trackingSummaryGrid{
        grid-template-columns:1fr 1fr;
    }

    .trackingProduct{
        grid-template-columns:1fr;
    }

    .qrAdminGrid{
        grid-template-columns:1fr;
    }
}

@media(max-width:550px){

    .trackingSummaryGrid{
        grid-template-columns:1fr;
    }
}

.gestgoCheckoutLegal{
    margin:16px 0;
    padding:13px;

    border:1px solid #d9e5ed;
    border-radius:8px;

    background:#f7fafc;
}

.gestgoCheckoutLegal label{
    display:flex;
    gap:9px;
    align-items:flex-start;

    color:#526f81;

    font-size:12px;
    line-height:1.5;
}

.gestgoCheckoutLegal input{
    margin-top:3px;
}

.gestgoCheckoutLegal a{
    color:#0874d5;

    font-weight:750;
}