/* ============================================================
   SECCIÓN: CONTACTO MAPA INTERACTIVO
   Prefijo:  .contacto_mapa_interactivo
   Uso:      .contacto_mapa_interactivo .nombre_clase
   ============================================================ */

:root {
    --color_primario:        #0047bb;
    --color_primario_hover:  #0055d4;
    --color_secundario:      #b1c8ea;
    --color_fondo:           #020617;
    --color_fondo_panel:     #0d1424;
    --color_fondo_campo:     #0d1a2e;
    --color_borde:           rgba(255, 255, 255, 0.10);
    --color_borde_activo:    rgba(0, 71, 185, 0.50);
    --color_borde_foco:      #0047bb;
    --color_texto_principal: #ffffff;
    --color_texto_secundario:#94a3b8;
    --color_texto_tenue:     #334155;
    --color_etiqueta:        #0653ce;
    --transicion:            0.2s ease;
}

/* ── Sección ── */
.contacto_mapa_interactivo {
    position: relative;
    background-color: var(--color_fondo);
   
}

/* Línea decorativa superior */
.contacto_mapa_interactivo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color_primario) 40%, var(--color_secundario) 60%, transparent);
}
.mapa{ 
  filter: grayscale(100%);
  opacity: 0.2;
}




/* ── Tarjeta contenedora (fila Bootstrap g-0) ── */
.contacto_mapa_interactivo .tarjeta {
    border: 1px solid var(--color_borde);
    border-radius: 1.5rem;
    overflow: hidden;
    min-height: 680px;
    background-color: rgba(15, 23, 42, 0.50);
   -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);  
  box-shadow: 0 20px 50px -12px rgba(0, 71, 185, 0.5);



}

/* ============================================================
   COLUMNA MAPA (izquierda)
   ============================================================ */
.contacto_mapa_interactivo .columna_mapa {
    position: relative;
    background-color: #050a14;
    min-height: 480px;
}

.contacto_mapa_interactivo .mapa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Aviso flotante sobre el mapa */
.contacto_mapa_interactivo .aviso_ubicacion {
    position: absolute;
    top: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background-color: rgba(6, 12, 26, 0.90);
    border: 1px solid var(--color_borde_activo);
    border-radius: 2rem;
    padding: 0.45rem 1rem;
    white-space: nowrap;
    pointer-events: none;
}

.contacto_mapa_interactivo .aviso_ubicacion svg {
    color: var(--color_secundario);
    flex-shrink: 0;
}

.contacto_mapa_interactivo .aviso_ubicacion span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color_texto_secundario);
    font-family: 'Courier New', monospace;
}

/* ============================================================
   COLUMNA FORMULARIO (derecha)
   ============================================================ */
.contacto_mapa_interactivo .columna_formulario {
    background: linear-gradient(160deg, var(--color_fondo_panel) 0%, var(--color_fondo) 100%);
    border-left: 1px solid var(--color_borde);
}

.contacto_mapa_interactivo .cuerpo_formulario {
    padding: 3rem 2.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}



.contacto_mapa_interactivo .titulo {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color_texto_principal);    
    margin: 0 0 0.6rem;
}

.contacto_mapa_interactivo .descripcion {
    font-size: 0.95rem;
    color: var(--color_texto_secundario);
    line-height: 1.7;
}

/* ── Formulario ── */
.contacto_mapa_interactivo .formulario {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contacto_mapa_interactivo .grupo_campo {
    margin-bottom: 1.1rem;
}

/* ── Etiqueta ── */
.contacto_mapa_interactivo .etiqueta {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color_etiqueta);
    margin-bottom: 0.4rem;
   
}

/* ── Reset Bootstrap forms dentro del componente ── */
.contacto_mapa_interactivo input.form-control,
.contacto_mapa_interactivo textarea.form-control,
.contacto_mapa_interactivo input.form-control:focus,
.contacto_mapa_interactivo textarea.form-control:focus {
    background-color: #0d1a2e;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.contacto_mapa_interactivo input.form-check-input,
.contacto_mapa_interactivo input.form-check-input:focus {
    background-color: #0d1a2e;
    border-color: rgba(0, 71, 185, 0.50);
    box-shadow: none;
}

.contacto_mapa_interactivo input.form-check-input:checked {
    background-color: var(--color_primario);
    border-color: var(--color_primario);
}

/* ── Campo input / textarea ── */
.contacto_mapa_interactivo .campo {
    background-color: #0d1a2e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    color: #ffffff;
    font-size: 0.88rem;
    padding: 0.85rem 1rem;
    transition: border-color var(--transicion), box-shadow var(--transicion), background-color var(--transicion);
    width: 100%;
}

.contacto_mapa_interactivo .campo::placeholder {
    color: #334155;
    opacity: 1;
}

.contacto_mapa_interactivo .campo:focus {
    outline: none;
    border-color: var(--color_borde_foco);
    box-shadow: 0 0 0 3px rgba(0, 71, 185, 0.20);
    background-color: #0f2040;
    color: #ffffff;
}

.contacto_mapa_interactivo .textarea {
    resize: vertical;
    min-height: 120px;
}

/* ── Política de privacidad ── */
.contacto_mapa_interactivo .politica_bloque {
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.contacto_mapa_interactivo .checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
    background-color: #0d1a2e;
    border: 1px solid rgba(0, 71, 185, 0.50);
    border-radius: 4px;
    cursor: pointer;
}

.contacto_mapa_interactivo .checkbox:checked {
    background-color: var(--color_primario);
    border-color: var(--color_primario);
}

.contacto_mapa_interactivo .politica_texto {
    font-size: 0.82rem;
    color: var(--color_texto_secundario);
    line-height: 1.5;
    cursor: pointer;
    margin-left: 0 !important;
}

.contacto_mapa_interactivo .politica_enlace {
    color: var(--color_secundario);
    text-decoration: none;
    transition: color var(--transicion);
}

.contacto_mapa_interactivo .politica_enlace:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ── Botón enviar ── */
.contacto_mapa_interactivo .zona_boton {
    margin-top: 1.5rem;
}

.contacto_mapa_interactivo .boton_enviar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 1rem 2rem;
    background-color: var(--color_primario);
    border: none;
    border-radius: 0.875rem;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
    font-family: 'Courier New', monospace;
}

.contacto_mapa_interactivo .boton_enviar:hover {
    background-color: var(--color_primario_hover);
    box-shadow: 0 0 24px rgba(0, 71, 185, 0.50);
    transform: translateY(-1px);
}

.contacto_mapa_interactivo .boton_enviar:active {
    transform: translateY(0);
}

/* ============================================================
   MEDIA QUERIES
   ============================================================ */

/* Extra small devices (portrait phones, less than 576px) */
@media (width <= 575.98px) {
    .contacto_mapa_interactivo {
        padding-top: 0;
        padding-bottom: 0;
    }
    .contacto_mapa_interactivo .tarjeta {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .contacto_mapa_interactivo .cuerpo_formulario {
        padding: 2rem 1.25rem;
    }
    .contacto_mapa_interactivo .titulo {
        font-size: 1.6rem;
    }
    .contacto_mapa_interactivo .columna_mapa {
        min-height: 320px;
    }
    .contacto_mapa_interactivo .aviso_ubicacion span {
        font-size: 0.6rem;
    }
}

/* Small devices (landscape phones, 576px – 767px) */
@media (width >= 576px) and (width <= 767.98px) {
    .contacto_mapa_interactivo .cuerpo_formulario {
        padding: 2.5rem 2rem;
    }
    .contacto_mapa_interactivo .titulo {
        font-size: 1.8rem;
    }
    .contacto_mapa_interactivo .columna_mapa {
        min-height: 380px;
    }
}

/* Medium devices (tablets, 768px – 991px) */
@media (width >= 768px) and (width <= 991.98px) {
    .contacto_mapa_interactivo .cuerpo_formulario {
        padding: 2.5rem 2rem;
    }
    .contacto_mapa_interactivo .titulo {
        font-size: 1.9rem;
    }
}

/* Large devices (desktops, 992px – 1199px) */
@media (width >= 992px) and (width <= 1199.98px) {
    .contacto_mapa_interactivo .cuerpo_formulario {
        padding: 2.75rem 2.25rem;
    }
}