﻿.page-header {
    margin-top: 71px;
}

.margin-cotizador {
    margin: 25px !important;
}

.select2-container--default
.select2-results__option--selected {
    background-color: transparent !important;
}

.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #009640 !important;
/*    color: #009640 !important;
*/}


/* Evita que el texto del label se parta en 2 líneas */
.label-nowrap {
    white-space: nowrap;
    display: inline-flex; /* funciona bien con tu d-flex */
    align-items: center;
}

.label-inline {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-width: 140px;
}

/* Contenedor de Peso/Largo/Alto/Ancho */
.dim-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 10px; /* vertical horizontal */
    align-items: center;
}

/* Cada bloque: Label + Input */
.dim-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* importantísimo para que no se desborde */
}

    /* Label con ancho consistente */
    .dim-item > label {
        flex: 0 0 95px; /* ancho fijo del label */
        margin: 0; /* quita márgenes duros */
        white-space: nowrap;
    }

    /* Input ocupa el resto */
    .dim-item > input {
        flex: 1;
        min-width: 0;
       /* width: 100%;*/
    }

/* Solo tercera fila: dimensiones */
.dim-row .dim-item {
    gap: 10px; /* separa label e input */
    align-items: center;
}

    /* Mobile: que ocupe full */
    .dim-row .dim-item > input.form-control {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

/* Desktop: compacto */
@media (min-width: 768px) {
    .dim-row .dim-item > input.form-control {
        width: 80px !important;
        max-width: 80px !important;
        flex: 0 0 80px !important;
    }

    .almacenamiento-section .servicio-content {
        padding-top: 60px;
    }

    .cotizador-nacional-page .cotizador-row {
        display: flex;
        gap: 28px;
    }

        .cotizador-nacional-page .cotizador-row > .col-md-6,
        .cotizador-nacional-page .cotizador-row > .cotizador-col,
        .cotizador-nacional-page .cotizador-row > .ms-md-2 {
            flex: 1 1 0;
            width: 0;
            max-width: none;
            margin-left: 0 !important;
        }

        .cotizador-nacional-page .cotizador-row .form-line {
            grid-template-columns: 120px 1fr;
            column-gap: 5px;
        }

    #valor_declarado {
        max-width: 113px !important;
    }

    .cotizador-int #valor_declarado {
        width: 113px !important;
    }
}


/* 1) El contenedor del checkbox SIEMPRE del mismo tamaño */
.control.control--checkbox {
    position: relative;
    display: inline-block;
    width: 22px; /* mismo para ambos */
    height: 22px;
    padding-left: 0; /* importante para que no se mueva */
    margin: 0;
    vertical-align: middle;
}

.seguro-text {
    display: inline-block;
    font-size: 14px;
    color: #525252; /* o tu text-dark-gray */
    line-height: 1;
    white-space: nowrap;
}


/* Asegurar envío a la derecha en desktop */
@media (min-width: 768px) {
    .seguro-wrap {
        justify-content: flex-end;
        margin-right: 10px;
    }
}
@media (max-width: 767.98px) {
    .seguro-wrap {
        flex-wrap: wrap;
    }
}

@media (min-width: 768px) {
    .seguro-wrap {
        flex-wrap: nowrap;
    }
}
/* Una sola regla para todas las filas tipo "Label: [Control]" */
.form-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.form-line__label {
    width: 150px; /* usa el mismo ancho que visualmente te alinea con selects */
    flex: 0 0 150px;
    white-space: nowrap;
    margin: 0;
}

.form-line__control {
    flex: 1 1 auto;
    min-width: 0;
}


.seguro-slot {
    width: 260px; /* reserva espacio SIEMPRE */
    flex: 0 0 260px; /* no se achica */
}

.seguro-banner {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Solo en pantallas grandes (desktop) */
@media (min-width: 1600px) {
    .seguro-wrap {
        margin-right: 120px; /* ajusta este valor */
    }
}

/* ==============================
   BOTONES COTIZADOR - ESTILO COLOMBIA
============================== */

/* Verde Cotizar */
.cotizador-link--green {
    color: #009640 !important; /* verde corporativo */
    text-decoration: none !important;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .25s ease;
}
/* Flecha */
.cotizador-link--green::after {
    content: "›";
    font-size: 18px;
    line-height: 1;
    transition: transform .25s ease;
}
    .cotizador-link--green:hover {
        color: #df1a95 !important;
        text-decoration: none !important;
    }

    .cotizador-link--green::after {
        transform: translateX(4px);
    }

    /* Fucsia Limpiar */
    .cotizador-link--pink {
        color: #df1a95 !important;
        text-decoration: none !important;
        font-weight: 600;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all .25s ease;
    }

/* Flecha */
.cotizador-link--pink::after {
    content: "›";
    font-size: 18px;
    line-height: 1;
    transition: transform .25s ease;
}
    .cotizador-link--pink:hover {
        color: #525252 !important;
        text-decoration: none !important;
    }

        .cotizador-link--pink::after {
            transform: translateX(4px);
        }



/* evita overflow del control en flex */
.col-md-10 {
    min-width: 0;
}

/*VISTA CONTACTOS SERVIENTREGA*/

.widget-contact-form label {
    font-weight: bold;
}

/* Espaciado interno de inputs y textarea */
.widget-contact-form .form-control {
    padding: 12px 16px;
    border-radius: 6px;
}

/* Separación entre grupos */
.widget-contact-form .form-group {
    margin-bottom: 18px;
}

.widget-contact-form .row {
    margin-bottom: 10px;
}

/*PRODUCTO DOCUMENTOS*/
.servicio-block {
    padding: 32px 0;
}

    .servicio-block + .servicio-block {
        border-top: 1px solid #f2f2f2;
    }

/* Desktop */
.servicio-row {
    display: flex;
    align-items: center;
    gap: 40px;
}

.servicio-row--reverse {
    flex-direction: row-reverse;
}

.servicio-row > .servicio-media,
.servicio-row > .servicio-content {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Iconos */
.servicio-icon {
    width: 75%;
    max-width: 420px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* Móvil */
@media (max-width: 790px) {

    .servicio-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        /* Centramos y damos aire real al bloque de texto */
        .servicio-content .m-b-40 {
            max-width: 520px;
            margin: 0 auto;
            padding-inline: 20px; /* ← aire lateral */
        }

        /* Mejor lectura en móvil */
        .servicio-content p {
            text-align: justify !important; /* recomendado en móvil */
            line-height: 1.8;
        }

        /* Título centrado limpio */
        .servicio-content h3 {
            text-align: center;
            margin-bottom: 12px;
        }

    .servicio-row,
    .servicio-row--reverse {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

        .servicio-row > .servicio-media,
        .servicio-row > .servicio-content {
            flex: 0 0 100%;
            max-width: 100%;
        }

    .servicio-icon {
        width: min(420px, 90vw);
        max-width: 420px;
    }
}

/* Contenedor del icono con tamaño uniforme */
.servicio-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 340px; /* ← altura uniforme desktop */
}

/* Imagen se adapta dentro */
.servicio-icon {
    max-width: 320px; /* ancho máximo uniforme */
    max-height: 280px; /* alto máximo uniforme */
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 790px) {

    .servicio-media {
        height: 240px; /* un poco más compacto en móvil */
    }

    .servicio-icon {
        max-width: 260px;
        height: 220px !important;
        max-height: 220px;
    }
}

/* Color uniforme para todos los títulos de servicios */
.servicio-content h3 {
    color: #525252 !important;
}

/* Select2 cerrado cuando tiene focus */
.select2-container--default.select2-container--focus
.select2-selection--single {
    border: 1px solid #009640 !important;
    box-shadow: 0 0 0 2px rgba(0,150,64,.15) !important;
    outline: none !important;
}

/* Input buscador interno */
.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
    border: 1px solid #009640 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0,150,64,.15) !important;
}

.gap-cotizador {
    gap: 4rem; /* puedes subir a 5rem o 6rem si quieres más separación */
}

/* INPUTS GRANDES */
.input-grande {
    width: 100% !important;
    max-width: 420px !important; /* puedes ajustar 400–460px */
}

/* INPUTS PEQUEÑOS (Peso y Valor) */
.input-pequeno {
    width: 100% !important;
    max-width: 100px !important; /* puedes ajustar 160–200px */
}

/* Layout profesional para todas las filas del cotizador */
.cotizador-row .form-line {
    display: grid;
    grid-template-columns: 115px 1fr; /* label fijo + control flexible */
    align-items: center;
    column-gap: 20px; /* separación real label/input */
    margin-bottom: 6px; /* compacto vertical */
}

/* Label fijo */
.cotizador-row .form-line__label {
    margin: 0;
    white-space: nowrap;
}

/* Control ocupa el resto */
.cotizador-row .form-line__control {
    min-width: 0;
}

.cotizador-row .select2-container {
    width: 100% !important;
    max-width: 420px;
}

    /* 2) Que el "select visible" ocupe todo el contenedor */
    .cotizador-row .select2-container .selection,
    .cotizador-row .select2-container .select2-selection--single {
        width: 100% !important;
        box-sizing: border-box;
    }

/* Asegurar envío: mismo ancho que los selects grandes */
.seguro-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

/* Empuja "Valor" al extremo derecho del ancho grande */
.seguro-valor {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* <-- esto alinea al final */
}

/* Separación entre columna izquierda y derecha */
@media (max-width: 790px) {

    /*  IMPORTANTE: volver a layout vertical */
    .cotizador-row {
        display: block !important;
        margin-bottom: 18px; /* más aire entre bloques */
    }

        /* Más espacio entre cada opción */
        .cotizador-row .form-line {
            margin-bottom: 16px;
            row-gap: 8px;
        }

    /* Labels un poco más separados */
    .form-line__label {
        margin-bottom: 4px;
    }

    /* la fila permite wrap */
    .seguro-row.input-grande {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* fuerza que Valor baje */
    #seguroBanner {
        order: 99 !important; /* lo manda al final */
        flex: 0 0 100% !important; /* rompe línea */
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important; /* mata margin-left:auto */
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        pointer-events: auto !important; /* por si lo estabas bloqueando */
    }

        /* input compacto */
        #seguroBanner #valor_declarado {
            width: 110px !important;
            max-width: 110px !important;
            flex: 0 0 110px !important;
            margin: 0 !important;
        }

}

.form-line {
    display: flex;
    align-items: center;
    gap: 14px;
}

.form-line__label {
    white-space: nowrap;
    margin: 0;
}

.form-line--wide .form-control {
    min-height: 38px;
}

/* Select2 full width (por si Destino es select2) */
.select2-container {
    width: 100% !important;
}

/* Fila 1: asegurar envío en una sola línea y estable */
.seguro-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    flex-wrap: nowrap; /* clave para que NO se vaya abajo en desktop */
}

.seguro-label {
    white-space: nowrap;
}

.seguro-op {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.seguro-text {
    margin: 0;
}

/* Valor: reserva espacio para que no “salte” */
/* Contenedor Valor alineado al final y sin saltos */
.seguro-valor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* lo pega al final de la columna */
    visibility: visible; /* oculto sin romper layout */
    opacity: 1;
    pointer-events: none;
    transition: opacity .15s ease;
}

    .seguro-valor.is-hidden {
        visibility: hidden; /* mantiene el espacio */
        pointer-events: none;
        opacity:0;
    }

/* Fila 3: más pegado label/input (sin heredar espacios grandes) */
.dim-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dim-item label {
        white-space: nowrap;
    }

/* Mobile: permite que asegurar envío haga wrap */
@media (max-width: 767.98px) {
    .seguro-row {
        flex-wrap: wrap;
    }

    .seguro-valor {
        min-width: 100%;
    }
}

/* ==========================
   INTERNACIONAL (NO CHOCA)
========================== */
.cotizador-int .form-line {
    gap: 0px; /* acerca input al label */
}

.cotizador-int .form-line__label {
    flex: 0 0 120px; /* ancho label más compacto */
    width: 120px;
}

/* Reduce el ancho de Destino/Tipo servicio y evita crecimiento “loco” por zoom */
.cotizador-int .input-grande {
    max-width: clamp(220px, 28vw, 300px) !important;
    width: 100% !important;
}

/* Select2 (si aplica) mantiene el mismo ancho del input */
.cotizador-int .select2-container {
    width: 100% !important;
    max-width: clamp(220px, 28vw, 300px) !important;
}

/* Valor más cerca de las opciones (solo Internacional) */
.cotizador-int .seguro-valor {
    margin-left: 12px !important; /* antes: auto */
    pointer-events: auto; /* para que el input funcione */
}

/* =========================
   COTIZADOR INTERNACIONAL - FIX MÓVIL
   Bordes visibles + botones separados
========================== */
@media (max-width: 767.98px) {

    /* 1) Dale aire lateral al contenedor general (evita que se “corte” el borde) */
    section form,
    #cotizacionForm {
        padding-inline: 12px; /* ajusta 10–16px a gusto */
    }

    /* 2) Asegura que la card no toque el borde del teléfono y se vean radios/sombra */
    .card-principal.cotizador-int {
        width: 100% !important;
        margin: 14px auto !important; /* separa de arriba/abajo */
        padding: 16px !important; /* padding interno más compacto en móvil */
        border-radius: 18px !important;
        border: 1px solid rgba(0,0,0,.14); /* borde visible */
        background: #fff;
        box-shadow: 0 10px 22px rgba(0,0,0,.12);
        overflow: visible !important; /* evita recorte del border/shadow */
    }

    /* Si algún padre estuviera recortando (raro pero pasa), esto ayuda */
    .col-12.col-lg-9.mx-auto.card-principal.p-4.cotizador-int {
        overflow: visible !important;
    }

    /* 3) Evita que select2 o inputs se “salgan” y empujen el borde */
   /* .cotizador-int .form-control,
    .cotizador-int .select2-container {
        max-width: 100% !important;
    }*/

    /* 4) Botones: en móvil recomiendo apilarlos (se ven más limpios y separados) */
    .gap-cotizador {
        display: flex;
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 40px !important; /* o clamp(24px, 8vw, 60px) */
    }

    /* Un poquito más “tocables” en móvil */
    .cotizador-link--green,
    .cotizador-link--pink {
        font-size: 16px;
        padding: 8px 0; /* mantiene look tipo link pero con más alto */
    }

    /* Ajustar layout general del bloque seguro */
    .seguro-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    #seguroValorWrap {
        order: 4; /* lo posiciona después de los radios */
    }

    /* Contenedor del valor más pequeño y en línea */
    #seguroValorWrap.seguro-valor {
        display: flex;
        align-items: center;
        gap: 62px;
        margin-left: -5px !important;
        margin-top: 4px;
        padding: 4px 6px;
        border-radius: 8px;
        background: transparent; /* elimina sensación de caja nueva */
    }

    /* Label Valor más pequeño */
    #seguroValorWrap label {
       /* font-size: 13px;*/
        margin-bottom: 0;
    }

    /* Input mucho más compacto */
    #seguroValorWrap input {
        width: 110px !important;
        height: 34px;
        padding: 4px 8px;
        font-size: 13px;
    }
}
/* =========================
   AGENCIAS - SOLO MÓVIL
   ========================= */
@media (max-width: 767.98px) {
    .page-header {
        padding-inline: 16px; /* aire lateral */
    }

        .page-header .lead {
            margin-inline: auto;
            max-width: 32ch; /* evita que sea muy ancho */
            font-size: 18px; /* más pequeño */
            line-height: 1.25;
            text-align: center;
        }

        /* Si ese --mt-40 te baja demasiado o pega raro en móvil */
        .page-header .--mt-40 {
            margin-top: 10px !important;
        }
}

@media (max-width: 790px){


    /* La form-line que contiene el seguro la convertimos en GRID */
    .form-line:has(.seguro-row.input-grande) {
        display: grid !important;
        grid-template-columns: 115px 1fr !important; /* label fijo + controles */
        grid-template-rows: auto auto !important; /* 2 filas */
        column-gap: 22px !important;
        row-gap: 6px !important;
        align-items: center !important;
    }

        /* Label "Asegurar envío:" se queda arriba izquierda */
        .form-line:has(.seguro-row.input-grande) > .form-line__label {
            grid-column: 1 !important;
            grid-row: 1 !important;
            margin: 0 !important;
        }

        /* Controles (Si/No + Valor) viven en la columna derecha */
        .form-line:has(.seguro-row.input-grande) > .form-line__control {
            grid-column: 2 !important;
            grid-row: 1 / span 2 !important; /* ocupa ambas filas */
            min-width: 0 !important;
        }

    /* Dentro del control: Si/No arriba */
    .seguro-row.input-grande {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Valor abajo (segunda línea) */
    #seguroBanner {
        font-size: 15px !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 4px 0 0 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
        position: static !important; /* sin movimientos raros */
        transform: translateX(-57px); /* ajusta -10px, -15px, -25px a gusto */
    }

        #seguroBanner #valor_declarado {
            width: 110px !important;
            max-width: 110px !important;
        }
}

/* CONTACTO SERVIENTREGA: más espacio entre label y textbox */
.widget-contact-form .form-group label {
    display: block;
    margin-bottom: 10px;
}

.widget-contact-form .form-control {
    margin-top: 0;
}

.contact-cards-row {
    margin-left: -10px;
    margin-right: -10px;
}

    .contact-cards-row > [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }

.contact-card {
    height: 100%;
}

/* =========================
   RESULTADO COTIZACIÓN
   Nacional + Internacional
========================= */
.resultado-cotizacion {
    width: 75%;
    border-radius: 18px;
    padding: 22px !important;
}

    .resultado-cotizacion .card-principal__header {
        margin-bottom: 14px;
    }

.resultado-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
}

.resultado-item {
    display: grid;
    grid-template-columns: 150px minmax(110px, 220px);
    justify-content: start;
    align-items: center;
}

.resultado-label {
    margin: 0;
    padding: 8px 0px;
   /* border: 1px solid #7a7a7a;*/
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: #fff;
    color: #525252;
    white-space: nowrap;
    font-weight: 700;
}

.resultado-valor {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #525252;
    border-radius: 0 6px 6px 0;
    background: #fff;
    display: flex;
    align-items: center;
    color: #525252;
    min-width: 110px;
    max-width: 220px;
}

    .resultado-valor.total-valor {
        min-width: 140px;
        max-width: 220px;
        font-weight: 700;
    }

@media (max-width: 991.98px) {
    .resultado-cotizacion {
        width: 100%;
        padding: 18px !important;
    }

    .resultado-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .resultado-item {
        grid-template-columns: 140px 1fr;
    }

    .resultado-valor {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .resultado-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .resultado-label {
      /*  border-right: 1px solid #7a7a7a;
        border-radius: 6px;*/
    }

    .resultado-valor {
        border-radius: 6px;
        max-width: 100%;
    }
}

.resultado-grid--internacional .resultado-item--total {
    grid-column: 2;
}

@media (max-width: 991.98px) {
    .resultado-grid--internacional .resultado-item--total {
        grid-column: auto;
    }
}




/* =========================
   COTIZADOR NACIONAL
   FIX SOLO MÓVIL PARA "VALOR"
========================= */
@media (max-width: 790px) {
    .cotizador-nacional-page #seguroBanner {
        transform: translateX(-136px) !important;
        margin: 6px 0 0 0 !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
    }

        .cotizador-nacional-page #seguroBanner > span {
            min-width: 48px;
            text-align: left;
            margin: 0;
        }

        .cotizador-nacional-page #seguroBanner #valor_declarado {
            width: 110px !important;
            max-width: 110px !important;
            flex: 0 0 110px !important;
            margin-left: 76px !important;
        }

    .input-pequeno {
        width: 100% !important;
        max-width: 420px !important;
        flex: 1 1 auto !important;
    }

}


.cotizador-int .seguro-op {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cotizador-int #seguroValorWrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Desktop */
@media (min-width: 768px) {

    .cotizador-int #valor_declarado {
        width: 120px;
        min-width: 120px;
    }
}

/* =========================================
   COTIZADOR INTERNACIONAL - BLOQUE SUPERIOR LIMPIO
   ========================================= */

.cotizador-int .cotizador-int-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 14px;
    align-items: start;
}

.cotizador-int .top-item {
    min-width: 0;
}

/* misma base visual en ambos lados */
.cotizador-int .cotizador-int-top .form-line {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
}

.cotizador-int .cotizador-int-top .form-line__label {
    flex: 0 0 130px;
    width: 130px;
    margin: 0;
    white-space: nowrap;
}

.cotizador-int .cotizador-int-top .form-line__control {
    flex: 1 1 auto;
    min-width: 0;
}

/* seguro */
.cotizador-int .seguro-line {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 38px;
}

/* valor */
.cotizador-int .valor-line .form-line__control {
    display: flex;
    align-items: center;
}

.cotizador-int #valor_declarado {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.cotizador-int .valor-line.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* móvil */
@media (max-width: 767.98px) {
    .cotizador-int .cotizador-int-top {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

        .cotizador-int .cotizador-int-top .form-line {
            align-items: flex-start;
        }

        .cotizador-int .cotizador-int-top .form-line__label {
            flex: 0 0 120px;
            width: 120px;
        }

    .cotizador-int .seguro-line {
        gap: 12px;
    }
}

/* =========================================
   COTIZADOR INTERNACIONAL - AJUSTE FINAL VALOR
   ========================================= */

.cotizador-int .top-item--seguro,
.cotizador-int .top-item--valor {
    padding-left: 0;
}

    /* misma alineación horizontal de la columna derecha */
    .cotizador-int .top-item--seguro .form-line__label,
    .cotizador-int .top-item--valor .form-line__label {
        flex: 0 0 130px;
        width: 130px;
    }

    /* Asegurar envío centrado verticalmente */
    .cotizador-int .top-item--seguro .form-line,
    .cotizador-int .top-item--valor .form-line {
        min-height: 38px;
        align-items: center;
    }

/* El control de VALOR no debe crecer */
.cotizador-int .valor-line__control {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex;
    align-items: center;
}


/* opcional: un ajuste fino para que Valor arranque justo debajo de Asegurar envío */
@media (min-width: 768px) {
    .cotizador-int .top-item--valor {
        margin-top: 0;
    }


    .cotizador-int .valor-line {
        gap: 10px !important;
    }

        .cotizador-int .valor-line .form-line__label {
            flex: 0 0 auto !important;
            width: auto !important;
        }

    .cotizador-int .valor-line__control {
        flex: 0 0 auto !important;
        width: auto !important;
    }

}


/* =========================================
   COTIZADOR INTERNACIONAL - FILA 3 ESTABLE
   ========================================= */

.cotizador-int .dim-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    column-gap: 28px;
    row-gap: 12px;
    align-items: start;
}

/* PESO */
.cotizador-int .dim-peso-line {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
}

    .cotizador-int .dim-peso-line .form-line__label {
        flex: 0 0 130px;
        width: 130px;
        margin: 0;
        white-space: nowrap;
    }

.cotizador-int .dim-peso-control {
    flex: 0 0 auto;
    width: auto;
}

    .cotizador-int .dim-peso-control input {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }

/* MEDIDAS */
.cotizador-int .dim-pack {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: 22px;
    row-gap: 12px;
    align-items: center;
    justify-content: start;
}

.cotizador-int .dim-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .cotizador-int .dim-cell label {
        margin: 0;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .cotizador-int .dim-cell input {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        flex: 0 0 100px !important;
    }

/* resolución intermedia */
@media (max-width: 1200px) {
    .cotizador-int .dim-pack {
        grid-template-columns: repeat(2, max-content);
    }
}

/* tablet */
@media (max-width: 991.98px) {
    .cotizador-int .dim-grid {
        grid-template-columns: 1fr;
    }

    .cotizador-int .dim-pack {
        grid-template-columns: repeat(2, max-content);
    }
}

/* móvil */
@media (max-width: 767.98px) {
    .cotizador-int .dim-grid {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    .cotizador-int .dim-pack {
        grid-template-columns: 1fr;
    }

    .cotizador-int .dim-cell {
        justify-content: space-between;
    }

        .cotizador-int .dim-cell input,
        .cotizador-int .dim-peso-control input {
            width: 100px !important;
            min-width: 100px !important;
            max-width: 100px !important;
        }
}

/* =========================================
   COTIZADOR INTERNACIONAL
   Igualar separación de VALOR con dimensiones
   ========================================= */

.cotizador-int .valor-line {
    display: flex;
    align-items: center;
    gap: 8px !important; /* misma separación que Largo/Alto/Ancho */
}

    .cotizador-int .valor-line .form-line__label {
        flex: 0 0 130px;
        width: 130px;
    }

.cotizador-int .valor-line__control {
    flex: 0 0 auto !important;
}

.cotizador-int #valor_declarado {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
}

/* =========================================
   COTIZADOR INTERNACIONAL - SIMETRÍA DERECHA / ALTO
   ========================================= */

.cotizador-int .cotizador-int-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 14px;
    align-items: start;
}

/* columna derecha superior */
.cotizador-int .top-item--valor .valor-line,
.cotizador-int .top-item:nth-child(2) .form-line {
    width: 100%;
}

/* Fila 3 estable */
.cotizador-int .dim-row-stable {
    display: grid;
    grid-template-columns: 250px max-content max-content max-content;
    column-gap: 12px;
    row-gap: 12px;
    align-items: center;
}

/* Peso mantiene la misma lógica de arriba */
.cotizador-int .dim-peso-line {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
}

    .cotizador-int .dim-peso-line .form-line__label {
        flex: 0 0 130px;
        width: 130px;
        margin: 0;
        white-space: nowrap;
    }

.cotizador-int .dim-peso-control {
    flex: 0 0 auto;
    width: auto;
}

    .cotizador-int .dim-peso-control input {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }

/* Largo / Alto / Ancho con columnas iguales */
.cotizador-int .dim-col {
    min-width: 0;
    display: flex;
    align-items: center;
}

.cotizador-int .dim-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .cotizador-int .dim-cell label {
        margin: 0;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .cotizador-int .dim-cell input {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        flex: 0 0 100px !important;
    }

/* VALOR con separación igual a dimensiones */
.cotizador-int .valor-line {
    display: flex;
    align-items: center;
    gap: 8px !important;
}

    .cotizador-int .valor-line .form-line__label {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        white-space: nowrap;
    }

.cotizador-int .valor-line__control {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Este ajuste alinea la columna Valor con la de Alto */
@media (min-width: 992px) {
    .cotizador-int .top-item--valor {
        transform: translateX(-6px);
    }

    .cotizador-int .top-item:nth-child(2) {
        transform: translateX(-6px);
    }
}

/* Tablet */
@media (max-width: 991.98px) {
    .cotizador-int .dim-row-stable {
        grid-template-columns: 1fr 1fr;
    }
}

/* Móvil */
@media (max-width: 767.98px) {
    .cotizador-int .cotizador-int-top,
    .cotizador-int .dim-row-stable {
        grid-template-columns: 1fr;
    }

    .cotizador-int .dim-cell {
        justify-content: space-between;
    }

        .cotizador-int .dim-cell input,
        .cotizador-int .dim-peso-control input,
        .cotizador-int #valor_declarado {
            width: 120px !important;
            min-width: 120px !important;
            max-width: 120px !important;
        }

    .cotizador-int .top-item--valor,
    .cotizador-int .top-item:nth-child(2) {
        transform: none;
    }
}