/*=========================================
    MG GUÍAS - ESTILO GENERAL
==========================================*/

:root{

    --mg-green:#6E8B3D;
    --mg-green-dark:#5C7433;

    --mg-beige:#F6F0E5;
    --mg-white:#FFFFFF;

    --mg-border:#DCCEB9;

    --mg-text:#2E2E2E;
    --mg-text-light:#777777;

    --radius:18px;

}

/*=========================================
    GENERAL
==========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background-image:url("https://res.cloudinary.com/dlte2cyol/image/upload/v1783715225/images_22_i94rle.jpg");

    background-repeat:repeat;

    background-size:350px;

    background-attachment:fixed;

    color:var(--mg-text);

    font-family:Arial, Helvetica, sans-serif;

    padding:18px;

}

/*=========================================
    TITULOS
==========================================*/

h1,h2,h3{

    color:var(--mg-text);

    margin-bottom:18px;

    font-weight:bold;

}

h2{

    font-size:36px;

    font-weight:700;

    margin-bottom:24px;

    color:#222;

}

h3{

    font-size:18px;

    margin-bottom:10px;

}

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

input,
textarea,
select{

    width:100%;

    padding:12px;

    font-size:16px;

    border-radius:16px;

    border:2px solid var(--mg-border);

    background:white;

    transition:.25s;

    margin-top:4px;

margin-bottom:10px;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--mg-green);

}

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

button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:16px;

    background:var(--mg-green);

    color:white;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

button:hover{

    background:var(--mg-green-dark);

}

button:disabled{

    background:#BDBDBD;

}

/*=========================================
    RESULTADOS
==========================================*/

#results{

    margin-top:25px;

}

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

.card{

    background:#FFFFFF;

    border-radius:28px;

    padding:26px;

    margin-bottom:26px;

    border:1px solid #EFE5D8;

    box-shadow:
        0 14px 38px rgba(0,0,0,.08),
        0 4px 12px rgba(0,0,0,.05);

}

/*=========================================
    PAQUETES
==========================================*/

.package{

    background:white;

    border-radius:20px;

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

    padding:20px;

    margin-bottom:25px;

}

/*=========================================
    MENSAJE MEJOR PRECIO
==========================================*/

.bestPrice{

    display:inline-block;

    background:var(--mg-green);

    color:white;

    padding:8px 14px;

    border-radius:12px;

    font-weight:bold;

    margin-bottom:20px;

}

/*=========================================
    SERVICIO
==========================================*/

.serviceInfo{

    text-align:center;

    margin-top:10px;

}

.serviceTitle{

    font-size:22px;

    font-weight:700;

    color:#222;

    margin-bottom:10px;

}

.servicePrice{

    font-size:24px;

    font-weight:700;

    color:#222;

    margin-bottom:10px;

}

.serviceDays{

    font-size:18px;

    color:#222;

    margin-bottom:18px;

}

/*=========================================
    LOGOS
==========================================*/

.carrierLogo{
    display:block;
    margin:0 auto;
    height:auto;
    max-width:100%;
}

.carrierLogo.fedex{
    width:180px;
}

.carrierLogo.dhl{
    width:260px;   /* prueba entre 250 y 270 */
}

.carrierLogo.paquetexpress{
    width:210px;
}

/*=========================================
    SEPARADORES
==========================================*/

hr{

    border:none;

    height:1px;

    background:var(--mg-border);

    margin:30px 0;

}

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

.fieldHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

    margin-bottom:8px;

}

.fieldHeader button{

    width:auto;

    background:none;

    color:var(--mg-green);

    padding:0;

    font-size:16px;

    font-weight:bold;

}

.fieldHeader button:hover{

    background:none;

}

/*=========================================
    CARGANDO
==========================================*/

#loading{

    text-align:center;

    font-size:20px;

    margin-top:20px;

    color:var(--mg-green);

}

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

@media(max-width:700px){

    body{

        padding:15px;

    }

    h2{

        font-size:28px;

    }

    h3{

        font-size:22px;

    }

    .servicePrice{

        font-size:40px;

    }

}

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

.header{

    position:sticky;
    top:0;
    z-index:999;

    position:sticky;

    background:#fff;

    text-align:center;

    margin:-18px -18px 12px -18px;

    padding:12px 18px;

    border-bottom:3px solid var(--mg-green);

    box-shadow:0 3px 10px rgba(0,0,0,.05);

}

.headerTop{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.menuBtn{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    padding:0;

    border:none;

    background:transparent;

    color:var(--mg-green);

    font-size:30px;

}

.menuBtn:hover{

    background:#F8F8F8;

}

.header h1{

    margin:0;

    font-size:24px;

    font-weight:700;

}

.header p{

    margin-top:2px;

    font-size:14px;

    color:#666;

}

button:active{

    transform:scale(.97);

}

.headerLogo{

    display:block;

    width:220px;

    max-width:65%;

    height:auto;

    margin:2px auto;

}

.headerLogoIndex{
    transform:translateX(22px);
}

/* Caja de colonias */

#origin_colonies div,
#destination_colonies div{

    padding:18px 20px;

    margin:8px;

    border-radius:14px;

    border:none;

    font-size:17px;

    font-weight:500;

    background:#fff;

    color:#222;

    transition:.18s;

    cursor:pointer;

}

/* Cada colonia */

#origin_colonies div,
#destination_colonies div{

    padding:18px 22px;

    font-size:17px;

    color:#222;

    cursor:pointer;

    transition:.2s;

    border-bottom:1px solid #efefef;

}

/* Última */

#origin_colonies div:last-child,
#destination_colonies div:last-child{

    border-bottom:none;

}

/* Hover */

#origin_colonies div:hover,
#destination_colonies div:hover{

    background:#6E8B3D;

    color:#fff;

}

/* Al tocar */

#origin_colonies div:active,
#destination_colonies div:active{

    background:#5D7432;

    color:#fff;

    transform:scale(.98);

}

/* Cuando ya seleccionó */

#origin_colonies strong,
#destination_colonies strong{

    display:block;

    padding:18px 22px;

    background:#6F8F3A;

    color:#fff;

    font-size:18px;

    font-weight:600;

}

.selectedColony{

    padding:16px 20px;

    font-size:18px;

    color:#222;

    font-weight:600;

    background:transparent;

    border-top:1px solid #ECECEC;

}

input[readonly]{

    background:#F8F5EE;

    color:#555;

    border:2px solid #E3D8C8;

    font-weight:600;

}

/*==================================================
      ESTILO FORMULARIO DE GUÍA
==================================================*/

/* Tarjetas principales */

.guideSection{

    background:#FFFFFF;

    border-radius:24px;

    padding:24px;

    margin-bottom:26px;

    border:1px solid #EFE5D8;

    box-shadow:
        0 12px 35px rgba(0,0,0,.08),
        0 2px 8px rgba(0,0,0,.04);

}

/* Títulos */

.guideSection h2{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:30px;

    font-weight:700;

    color:#222;

    margin-bottom:22px;

}

/* Subtítulos */

.guideSection h3{

    font-size:22px;

    color:#222;

    margin-bottom:16px;

}

/* Etiquetas */

.guideSection label{

    display:block;

    margin-top:16px;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

    color:#555;

}

/* Campos */

.guideSection input,
.guideSection textarea,
.guideSection select{

    width:100%;

    height:58px;

    padding:0 18px;

    border-radius:18px;

    border:2px solid #DCCEB9;

    background:#FFFFFF;

    font-size:17px;

}

/* Focus */

.guideSection input:focus,
.guideSection textarea:focus,
.guideSection select:focus{

    border-color:#6E8B3D;

}

/* Textarea */

.guideSection textarea{

    height:90px;

    padding-top:14px;

    resize:vertical;

}

.card label{

    display:block;

    margin-top:10px;

    margin-bottom:4px;

    font-size:15px;

    font-weight:600;

    color:#666;

}

/* Servicio seleccionado */

#selectedService{
    text-align:center;
}

/* Solo el título de Servicio seleccionado */

.serviceCard h2{
    text-align:center;
    justify-content:center;
    display:flex;
}

/* ===========================
   MENÚ LATERAL
=========================== */

/* ===========================
   MENÚ LATERAL
=========================== */

.sideMenu{

    position:fixed;
    top:0;
    left:-280px;

    width:260px;
    height:100vh;

    background:#FFFFFF;

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

    transition:left .25s ease;

    z-index:2000;

    padding-top:150px;

    overflow-y:auto;

}

.sideMenu.open{

    left:0;

}

.sideMenu a{

    display:block;

    padding:20px 24px;

    color:#333;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    border-bottom:1px solid #EFEFEF;

    transition:all .20s ease;

}

.sideMenu a:hover{

    background:#F7F8F3;

    color:#6E8B3D;

    padding-left:32px;

}

.sideMenu a:active{

    background:#EDF3E4;

}

.menuOverlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:1999;

}

.menuOverlay.show{

    opacity:1;

    visibility:visible;

}

#trackingResult{
    margin-top:20px;
}

.trackingCard{

    background:#fff;

    border-radius:22px;

    padding:22px;

    box-shadow:0 6px 18px rgba(0,0,0,.12);

    animation:fadeIn .25s;

}

.trackingCard h3{

    margin:0 0 14px;

    text-align:center;

}

.trackingRow{

    margin:10px 0;

    font-size:17px;

    line-height:1.5;

}

.statusSuccess{

    color:#5F7F33;

    font-weight:700;

}

.statusError{

    color:#d32f2f;

    font-weight:700;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=====================================
PAQUETERÍA RASTREO
======================================*/

.carrierSelector{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin:15px 0 25px;

}

.carrierOption{

    background:#fff;

    border:2px solid #DDD;

    border-radius:18px;

    padding:18px;

    cursor:pointer;

    transition:.25s;

}

.carrierOption.selected{

    border-color:#6E8B3D;

    background:#F7FAF1;

    box-shadow:0 0 0 2px rgba(110,139,61,.15);

}

.carrierOption img{

    display:block;

    margin:auto;

}

.sideMenu::before{

    content:"";

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:170px;

    height:95px;

    background-image:url("https://res.cloudinary.com/dlte2cyol/image/upload/v1783715960/Polish_20260710_143853645_wp8vaa.png");

    background-repeat:no-repeat;

    background-position:center;

    background-size:contain;

}