.nav-style {
    background-color: #007D8A !important;
    box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.75) !important;
}

/* Mismo estilo que el texto de ayuda de Proveedores */
.disclaimer {
    font-size: 13px;
    color: #6c757d;
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1.4; /* el line-height heredado separaba mucho las líneas cuando el texto ocupa dos */
}

/* Espacio entre inputs: .pg-contact-form le pone 22px a todos */
#contact-form .single-input {
    margin-top: 14px;
}

/* Select + campo "Otro" en la misma línea: mientras el campo está oculto el select ocupa todo el ancho;
   cuando aparece, se reparten mitad y mitad (la altura de la fila no cambia) */
.select-con-otro {
    display: flex;
    gap: 8px;
}

    .select-con-otro select,
    .select-con-otro .campo-otro {
        flex: 1;
        min-width: 0; /* deja que el select se achique aunque su texto sea largo */
    }

/* Campo de texto que aparece al elegir "Otro" en un desplegable. Arranca oculto (lo muestra el JS) */
.campo-otro {
    display: none;
}

/*----------------------------PROVINCIA-------------------------------*/

/* Casillas una al lado de la otra; pasan a la línea siguiente solo cuando no entran.
   Recuadro igual al de los inputs */
/* Columnas parejas que ocupan todo el ancho del recuadro.
   auto-fill pone tantas columnas de al menos 100px como entren (con el ancho actual, 5 → 2 filas)
   y 1fr reparte el espacio sobrante en partes iguales */
#provincia-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px 8px;
    padding: 8px 12px;
    border: 1px solid #999999;
    border-radius: 5px;
}

.provincia-opcion {
    display: flex;
    align-items: center;
    margin: 0;
    color: #6c757d;
    font-size: 13px;
    line-height: 1.3; /* el line-height heredado del sitio separaba mucho las filas */
    white-space: nowrap; /* "Buenos Aires" / "Santa Cruz" no se parten en dos líneas */
    font-weight: normal;
    cursor: pointer;
}

    /* Evita que la casilla tome el estilo de input del form (.pg-contact-form input) */
    .provincia-opcion input[type="checkbox"] {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        padding: 0;
        margin: 0 8px 0 0;
        accent-color: #00AABB; /* tilde en el turquesa del sitio */
        cursor: pointer;
    }

    /* La opción tildada se resalta */
    .provincia-opcion input[type="checkbox"]:checked + span {
        color: #00AABB;
    }

/* En web (LinkedIn y Provincia lado a lado), el input de LinkedIn se estira
   hasta la altura del bloque de Provincia para que terminen alineados abajo.
   La columna ya mide lo mismo que la de Provincia (filas flex de Bootstrap);
   el contenedor ocupa esa altura (menos su margin-top de 14px) y el input toma el espacio que sobra */
@media (min-width: 768px) {
    #contact-form #linkedin-container {
        display: flex;
        flex-direction: column;
        height: calc(100% - 14px);
    }

        #linkedin-container #linkedin {
            flex: 1;
        }
}

@media (max-width: 767px) {
    #contact-form .single-input {
        margin-bottom: 20px;
    }
}