:root{
  /* Colors and tokens - tweak to taste */
  --nav-bg: rgba(255,255,255,0.98);
  --nav-border: rgba(16,24,40,0.06);
  --nav-shadow: 0 8px 28px rgba(8,18,34,0.08);
  --nav-accent: #4F8FEA;
  --nav-text: #0b1320;
  --nav-muted: #6b7280;
  --nav-radius: 999px;

  /* COMPACTO (ajustado) */
  --nav-gap: 6px;
  --nav-padding-vertical: 4px;
  --nav-padding-horizontal: 8px;

  --nav-transition: 180ms cubic-bezier(.2,.9,.3,1);
}

/* =========================================================
   TOP PAGE GRADIENT (behaves as background visual behind
   logo and cards)
   - fixed, pointer-events:none, low z-index so content sits above
   ========================================================= */
body::before{
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 120px; /* ajustar si querés más/menos degradado */
  background: linear-gradient(to bottom,
                              rgba(255,255,255,1) 0%,
                              rgba(255,255,255,0.9) 30%,
                              rgba(255,255,255,0.7) 60%,
                              rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 8000; /* queda detrás de logo y tarjetas que tienen z>8000 */
}

/* ==========================================================================
   CENTER NAV (desktop first)
   ========================================================================== */

#centerNav{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 14px;
  z-index: 10002;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Barra: transparente para dejar ver el degradado por debajo
   (sin borde ni sombra prominente; look sutil y "flotante") */
#centerNav .center-bar{
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: var(--nav-padding-vertical) var(--nav-padding-horizontal);
  border-radius: var(--nav-radius);
  background: transparent; /* transparente: fondo viene del gradient global */
  border: none;
  box-shadow: none;
  transition: box-shadow var(--nav-transition), transform var(--nav-transition), background var(--nav-transition);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  will-change: transform;
  font-family: 'Roboto Condensed', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 0.95rem;

  /* no-bold global */
  font-weight: 400;
}

/* Quitar “lift”/efecto en hover de la barra (mantener estable) */
@media (hover:hover){
  #centerNav .center-bar:hover{
    transform: none;
    box-shadow: none;
  }
}

/* Individual nav items: estilo de texto "flotante" sin caja.
   Color negro por defecto; hover con color de acento uniforme. */
#centerNav .nav-item{
  color: var(--nav-text);
  padding: 4px 8px;
  line-height: 1.1;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* solo transición de color para hover limpio */
  transition: color var(--nav-transition), transform 120ms ease;
  font-weight: 400;
  white-space: nowrap;

  /* sin background ni border por defecto (flotante) */
  background: transparent !important;
  border: none !important;
}

/* Button-like appearance for toggle elements (pero visualmente igual que títulos) */
#centerNav .nav-toggle{
  outline: none;
  font-weight: 400 !important;
  padding: 4px 8px;
  line-height: 1.1;
  background: transparent !important;
  border: none !important;
  color: var(--nav-text) !important;
}

/* Hover: mismo estilo para todos los títulos (tono acento, sutil) */
@media (hover:hover){
  #centerNav .nav-item:hover,
  #centerNav .nav-toggle:hover{
    color: var(--nav-accent) !important;
    text-decoration: none;
    transform: translateY(-1px);
  }
}

/* Mantener focus visible accesible */
#centerNav .nav-item:focus-visible,
#centerNav .nav-toggle:focus-visible{
  box-shadow: 0 0 0 3px rgba(79,143,234,0.16);
  border-radius: 8px;
  outline: none;
}

/* Quitar background en estados activos (click/tap) */
#centerNav .nav-item:active,
#centerNav .nav-toggle:active{
  background: transparent !important;
  color: var(--nav-accent) !important;
}

/* Caret indicator for toggles (puede permanecer) */
#centerNav .nav-toggle::after{
  content: "▾";
  margin-left: 6px;
  font-size: 0.75em;
  color: var(--nav-muted);
}

/* Dropdown menu: blanca y legible, con sombra suave */
#centerNav .dropdown .dropdown-menu{
  border-radius: 10px;
  border: 1px solid rgba(16,24,40,0.06);
  box-shadow: 0 10px 30px rgba(8,18,34,0.12);
  background: #fff;
  padding: 4px 0;
  min-width: 260px;
  margin-top: 6px; /* separación desde el título */
}

/* Dropdown items: mantener tipografía consistente */
#centerNav .dropdown-item,
#centerNav .dropdown-item-text,
#centerNav .create-new-btn{
  padding: 6px 10px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--nav-text);
  background: transparent !important;
}

/* Hover neutro en dropdown (sin fondo fuerte) */
#centerNav .dropdown-item:hover,
#centerNav .dropdown-item:focus,
#centerNav .dropdown-item:active{
  background: rgba(79,143,234,0.06) !important; /* sutil acento */
  color: var(--nav-text) !important;
}

/* Small create button styling */
#centerNav .create-new-btn{
  display: inline-block;
  margin: 8px;
  border-radius: 8px;
  border: 1px solid rgba(16,24,40,0.06);
  background: #fff;
}

/* Delete button inside menu */
#centerNav .btn-eliminar{
  font-size: 0.78rem;
  padding: 3px 6px;
  line-height: 1;
}

/* Share button: neutralize hover from styles.css */
#shareMapBtn:hover,
#shareMapBtn:focus,
#shareMapBtn:active{
  font-weight: 400 !important;
  background-color: transparent !important;
}

/* Specific fix: Organizador titles non-bold */
#openOrganizadorBtn:hover,
#openOrganizadorBtn:active,
#openOrganizadorBtn:focus,
#openOrganizadorBtn:focus-visible,
#openOrganizadorBtn[aria-expanded="true"],
#organizerDropdown:hover > #openOrganizadorBtn,
#organizerDropdown .dropdown-toggle.show,
#organizerDropdown .dropdown-toggle[aria-expanded="true"]{
  font-weight: 400 !important;
  color: var(--nav-accent) !important;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  #centerNav .center-bar,
  #centerNav .nav-item{
    transition: none;
  }
}

/* Prevent dropdowns from overflowing very small screens */
@media (max-width: 420px){
  #centerNav .dropdown .dropdown-menu{
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* ==========================================================================
   TRANSPORTE STATS: 2 columnas + accesibilidad del label
   (sin cambios funcionales, mantienen estilos previos)
   ========================================================================== */

#transporteStatsList{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

#transporteStatsList .stat-line{
  width: 100%;
  margin: 0 !important;
  padding: 4px 6px;
  border-radius: 10px;
  justify-content: space-between;
}

/* Nunca permitir texto “inyectado” para el label de transporte */
#transporteStatsList .transporte-label::before,
#transporteStatsList .transporte-label::after{
  content: none !important;
}
#transporteStatsList .transporte-label *::before,
#transporteStatsList .transporte-label *::after{
  content: none !important;
}

/* Solo lectores de pantalla */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Muy chico: 1 columna */
@media (max-width: 360px){
  #transporteStatsList{ grid-template-columns: 1fr; }
}

/* Mobile: ocultar texto del label y dejar sólo icono + número */
@media (max-width: 768px){
  #transporteStatsList{ gap: 6px 8px; }

  #transporteStatsList .transporte-label{
    font-size: 0;
    line-height: 0;
  }
  #transporteStatsList .transport-stat-icon{
    width: 16px;
    height: 16px;
  }
  #transporteStatsList .stat-value{
    font-size: 0.95rem;
    line-height: 1;
  }
}

/* ==========================================================================
   MOBILE NAV (cuando JS mueve #centerNav dentro del panel)
   ========================================================================== */

#centerNav.moved-to-mobile{
  left: 0;
  transform: none;
  top: 0;
  width: 100%;
  padding: 12px;
  display: block;
  box-sizing: border-box;
}

/* Stack the center-bar vertically on mobile panel */
#centerNav.moved-to-mobile .center-bar{
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  background: transparent;
  box-shadow: none;
  border: none;
}

#centerNav.moved-to-mobile .nav-item,
#centerNav.moved-to-mobile .nav-toggle{
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  justify-content: flex-start;
}

/* En pantallas chicas: ocultar nav “desktop” si todavía no fue movido por JS */
@media (max-width: 768px){
  #centerNav:not(.moved-to-mobile){ display: none; }
}

/* ==========================================================================
   MOBILE MENU PANEL: drawer + dropdowns en modo "flow" (static)
   ========================================================================== */

@media (max-width: 768px){
  /* Panel slide-in */
  #mobileMenuPanel{
    display: none;
    left: 10px;
    top: 140px;
    right: auto;
    width: calc(94vw);
    max-width: 360px;

    transform: translateX(-14px);
    opacity: 0;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  #mobileMenuPanel.open{
    display: block !important; /* garantizar visible */
    transform: translateX(0);
    opacity: 1;
  }

  /* Alinear todo a la izquierda */
  #mobileMenuPanel,
  #mobileMenuPanel *{
    text-align: left !important;
  }

  /* centerNav dentro del panel: stretch */
  #mobileMenuPanel #centerNav{ align-items: stretch !important; }
  #mobileMenuPanel #centerNav .center-bar{ align-items: stretch !important; }

  /* Ítems full-width */
  #mobileMenuPanel #centerNav .nav-item,
  #mobileMenuPanel #centerNav .nav-toggle{
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* Dropdown container full width */
  #mobileMenuPanel #centerNav .dropdown{
    width: 100%;
    display: block !important;
  }

  /* Toggle como “título” con caret a la derecha */
  #mobileMenuPanel #centerNav .dropdown > .nav-toggle,
  #mobileMenuPanel #centerNav .dropdown > .dropdown-toggle{
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Dropdown menu fluye debajo del título (no overlay de Popper) */
  #mobileMenuPanel #centerNav .dropdown-menu{
    position: static !important;
    float: none !important;
    transform: none !important;
    inset: auto !important;
    margin: 6px 0 0 0 !important;
    width: 100% !important;

    border-radius: 10px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(16,24,40,0.06);
    padding: 6px 6px;
  }

  #mobileMenuPanel #centerNav .dropdown-item,
  #mobileMenuPanel #centerNav .dropdown-item-text{
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 10px 10px !important;
  }

  #mobileMenuPanel #centerNav .dropdown-item:hover,
  #mobileMenuPanel #centerNav .dropdown-item:focus,
  #mobileMenuPanel #centerNav .dropdown-item:active{
    background: transparent !important;
  }
}

/* ==========================================================================
   USER INFO (Cerrar sesión) en mobile: dentro del menú hamburguesa
   - Se oculta el widget fijo del bottom
   - Se muestra cuando #userInfo está dentro de #mobileMenuPanel
   ========================================================================== */

@media (max-width: 768px){
  /* fuera del panel: oculto (evita bottom fijo) */
  #userInfo{
    display: none !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
  }

  /* dentro del panel: visible y estático */
  #mobileMenuPanel #userInfo{
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin-top: 10px;
    z-index: auto !important;
  }

  #mobileMenuPanel #userInfo .card{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  #mobileMenuPanel #userInfo .card-body{
    padding: 8px 10px !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 6px !important;
  }

  #mobileMenuPanel #userInfo .card-title{
    font-size: 0.85rem !important;
    margin: 0 0 4px 0 !important;
    text-align: left !important;
    word-break: break-word;
  }

  #mobileMenuPanel #userInfo #logoutButton{
    padding: 4px 8px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
    width: auto !important;
    margin: 0 !important;
    align-self: flex-start !important;
  }
}

/* ==========================================================================
   LEAFLET layer control: visible por encima del mapa y sin taparse en mobile
   ========================================================================== */

.leaflet-control-container .leaflet-control{
  z-index: 9001; /* > leaflet default, < centerNav(10002) */
}

@media (max-width: 768px){
  .leaflet-bottom.leaflet-right{
    margin-bottom: 90px;
    margin-right: 10px;
  }
  .leaflet-control-layers{ max-width: 70vw; }
}

/* ==========================================================================
   MOBILE: rightControls - todos los cards mismo ancho
   ========================================================================== */
@media (max-width: 768px){
  #rightControls{
    width: calc(100vw - 24px);
    max-width: 150px;
    right: 12px !important;
    left: auto !important;
    box-sizing: border-box;
  }

  #rightControls .control-card,
  #rightControls #estadisticas,
  #rightControls #transporteStats,
  #rightControls #selectorAnioContainer,
  #rightControls #selectorEventoContainer{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #rightControls .control-card{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   TOP SEARCH (resultados buscador): sin scroll horizontal
   + tipografía más chica
   ========================================================= */

/* Contenedor del dropdown */
#placeSearchResults{
  overflow-x: hidden;     /* evita scroll horizontal */
  overflow-y: auto;       /* mantiene scroll vertical si hace falta */
  max-width: min(520px, 92vw);
}

/* Cada item: permitir wrap */
#placeSearchResults .place-result-item{
  width: 100%;
  text-align: left;
  white-space: normal;    /* permite salto de línea */
}

/* Tipografía "small" */
#placeSearchResults .place-result-title{
  display: block;
  font-size: 0.85rem;     /* small */
  line-height: 1.15;
}

#placeSearchResults .place-result-sub{
  display: block;
  font-size: 0.75rem;     /* aún más chico */
  line-height: 1.15;
  opacity: 0.85;
}

/* Evitar que strings largos rompan el layout */
#placeSearchResults,
#placeSearchResults *{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   CIUDADES STATS: convertir líneas a botones btn-sm con color por categoría
   ========================================================================== */

:root{
  --stat-visitadas: var(--primary);
  --stat-porvisitar: var(--secondary);
  --stat-algundia: #0b6623;
}

/* Contenedor */
#estadisticasList{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Botón base */
#estadisticasList .stat-btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  border: 0 !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;

  color: #fff !important;            /* texto blanco */
  font-weight: 400 !important;
  line-height: 1.05;
  text-align: left;

  box-shadow: 0 10px 22px rgba(15,23,42,0.08);
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

/* Label y número dentro del botón, ambos blancos */
#estadisticasList .stat-btn .stat-label,
#estadisticasList .stat-btn .stat-value{
  color: #fff !important;
  font-weight: 400 !important;
}

/* Colores por categoría */
#estadisticasList .stat-btn[data-cat="visitadas"]{ background: var(--stat-visitadas) !important; }
#estadisticasList .stat-btn[data-cat="porVisitar"]{ background: var(--stat-porvisitar) !important; }
#estadisticasList .stat-btn[data-cat="algunDia"]{ background: var(--stat-algundia) !important; }

/* Hover sutil */
#estadisticasList .stat-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* Estado seleccionado (activo) */
#estadisticasList .stat-btn.active{
  filter: brightness(0.92) saturate(1.06);
  box-shadow: 0 14px 30px rgba(15,23,42,0.14), inset 0 0 0 2px rgba(255,255,255,0.35);
}

/* Focus accesible (teclado) */
#estadisticasList .stat-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(79,143,234,0.22), 0 14px 30px rgba(15,23,42,0.14);
}

.leaflet-tooltip-city{
  border: none !important;
  box-shadow: 0 10px 26px rgba(44,62,80,0.18) !important;
}

/* =========================================================
   NAV: Unificar tipografía/tamaño (títulos) y dropdowns
   Objetivo: que TODOS los dropdowns se vean como "Cotizaciones"
   ========================================================= */

/* 1) Tipografía y tamaño consistentes en todo el menú */
#centerNav .center-bar,
#centerNav .nav-item,
#centerNav .nav-toggle{
  font-family: 'Roboto Condensed', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 0.95rem !important;   /* mismo tamaño para títulos */
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Asegurar que los "títulos" (toggles) tengan exactamente el mismo alto/espaciado */
#centerNav .nav-item,
#centerNav .nav-toggle{
  padding: 4px 8px !important;
  line-height: 1.1 !important;
  border-radius: 8px !important;
}

/* 2) Dropdown menus: misma tipografía y tamaño que Cotizaciones */
#centerNav .dropdown-menu{
  font-family: 'Roboto Condensed', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;

  /* look consistente */
  border-radius: 12px !important;
  border: 1px solid rgba(16,24,40,0.06) !important;
  box-shadow: 0 10px 30px rgba(8,18,34,0.12) !important;
  padding: 6px 0 !important;
}

/* Items dentro del dropdown (links, textos, botones) */
#centerNav .dropdown-item,
#centerNav .dropdown-item-text,
#centerNav .dropdown-header{
  font-family: inherit !important;
  font-size: 0.90rem !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

/* Evitar que algunos dropdowns se vean "más grandes" por padding distinto */
#centerNav .dropdown-item,
#centerNav .dropdown-item-text{
  padding: 8px 12px !important;
}

/* Divider consistente */
#centerNav .dropdown-divider{
  margin: 6px 0 !important;
}

/* 3) Quitar estilos particulares que hacen que Organizador sea distinto */
#organizerDropdownMenu{
  min-width: 260px !important;  /* igual que cotizaciones (base) */
  max-width: 360px !important;
  padding: 6px 0 !important;
}
#organizerDropdownMenu li{
  padding: 0 !important; /* el padding lo define .dropdown-item/.dropdown-item-text */
}

/* Tipos internos del organizador (título/fecha) alineados con el resto */
#organizerDropdownMenu .trip-title{
  font-size: 0.90rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}
#organizerDropdownMenu .trip-date{
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  opacity: 0.85;
}

/* 4) Viajes dropdown (si existe) con el mismo ancho que cotizaciones */
#viajesDropdownMenu{
  min-width: 260px !important;
  max-width: 360px !important;
}

/* 5) Mantener hover neutro (como venís usando) */
#centerNav .dropdown-item:hover,
#centerNav .dropdown-item:focus,
#centerNav .dropdown-item:active{
  background: rgba(79,143,234,0.06) !important;
  color: inherit !important;
}

/* Ajustes: rightControls por encima del degradado y con más separación desde el top */
#rightControls{
  position: fixed;
  top: 140px;            /* más distancia desde el top en escritorio */
  right: 18px;           /* separación derecha (ajustable) */
  z-index: 10005;        /* por encima del gradient (z-index:8000) y otras capas */
  box-sizing: border-box;
  pointer-events: auto;  /* asegurar interactividad */
  transition: top 180ms ease, right 180ms ease;
}

/* Mantener comportamiento responsivo: en pantallas chicas aumentar top por si el menú ocupa más altura */
@media (max-width: 768px){
  #rightControls{
    top: 160px;          /* más separación en móvil (ajustable) */
    right: 12px !important;
    width: calc(100vw - 24px);
    max-width: 150px;
  }
}

/* Quitar el "reborde" azul claro en los toggles Viajes / Cotizaciones para que el comportamiento
   en :hover sea igual al de "Compartir Mapa" (sin anillo azul). */
#openViajesBtn,
#openCurrenciesBtn,
#openOrganizadorBtn {
  /* evitar cualquier sombra/outline por defecto */
  box-shadow: none !important;
  outline: none !important;
}

/* Hover / focus / active: mantener el mismo look que #shareMapBtn (sin fondo ni borde) */
#openViajesBtn:hover,
#openCurrenciesBtn:hover,
#openOrganizadorBtn:hover,
#openViajesBtn:active,
#openCurrenciesBtn:active,
#openOrganizadorBtn:active,
#openViajesBtn:focus,
#openCurrenciesBtn:focus,
#openOrganizadorBtn:focus {
  background: transparent !important;
  color: var(--nav-accent) !important;
  transform: translateY(-1px);
  box-shadow: none !important;
  outline: none !important;
}

/* También sobreescribimos focus-visible (para navegadores que muestren anillo por teclado) */
/* Nota: eliminar completamente el indicador de foco reduce la visibilidad para usuarios de teclado.
   Si preferís mantener accesibilidad, comentar la regla siguiente y usar una variante más sutil. */
#openViajesBtn:focus-visible,
#openCurrenciesBtn:focus-visible,
#openOrganizadorBtn:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================
   MODAL DATOS: HORIZONTAL
   ========================== */
.dados-modal-content { max-width: 980px; width: 100%; }
.dados-modal-body { padding: 18px 20px; }
.modal-horizontal-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-sizing: border-box;
}

/* Left column: fixed width (image + title) */
.modal-left {
  flex: 0 0 320px;
  max-width: 320px;
}

/* Right column: fill remaining space */
.modal-right {
  flex: 1 1 auto;
}

/* City info */
.city-info-left h4 { font-size:1.15rem; margin-bottom:6px; color: #0f172a; }
.country-row { color: #475569; font-size:0.95rem; }

/* Foto dropzone (mismo look pero adaptado al left column) */
.foto-dropzone {
  border: 1px dashed rgba(15,23,42,0.06);
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  text-align: center;
}
.foto-preview img { max-width:100%; border-radius:8px; }

/* Smaller screens: stack vertically */
@media (max-width: 900px) {
  .modal-horizontal-body {
    flex-direction: column;
  }
  .modal-left { flex: 0 0 auto; max-width: 100%; }
}

/* Keep existing classes safe for view-only styles */
.view-only-field[readonly], .view-only-field[disabled] {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
}

/* Minor visual adjustment for flag image */
.country-row img { width: 28px; height: 18px; object-fit: cover; border-radius: 3px; }

/* Left column: fixed width (image + title) */
.modal-left {
  flex: 0 0 320px;
  max-width: 320px;
}

/* Right column: fill remaining space */
.modal-right {
  flex: 1 1 auto;
}

/* City info */
.city-info-left h4 { font-size:1.15rem; margin-bottom:6px; color: #0f172a; }
.country-row { color: #475569; font-size:0.95rem; }

/* Foto dropzone (mismo look pero adaptado al left column) */
.foto-dropzone {
  border: 1px dashed rgba(15,23,42,0.06);
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  text-align: center;
}
.foto-preview img { max-width:100%; border-radius:8px; }

/* Smaller screens: stack vertically */
@media (max-width: 900px) {
  .modal-horizontal-body {
    flex-direction: column;
  }
  .modal-left { flex: 0 0 auto; max-width: 100%; }
}

/* Keep existing classes safe for view-only styles */
.view-only-field[readonly], .view-only-field[disabled] {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
}

/* Minor visual adjustment for flag image */
.country-row img { width: 28px; height: 18px; object-fit: cover; border-radius: 3px; }

/* Ensure modal header occupies full width and content aligned */
.modal-header.full-top { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }

/* left input visual styling */
.left-input-plain { font-size:1.05rem; font-weight:700; color: #0f172a; }
.left-input-small { font-size:0.95rem; color:#475569; }