/**
 * MyAnnita · BUSCADOR DE CIUDAD DEL CREADOR — estados de la lista del controlador compartido
 * (js/mya-ciudad-creador.js), iguales en el alta y en «Editar mis datos».
 * Corrida `ciudades-cierre-8874` · frente A2 · ronda 2.
 *
 * Las FILAS, el AVISO de error y la CONFIRMACIÓN grande son del componente de E2
 * (css/mya-lugar-ui.css: .mya-lugar-fila, .mya-lugar-error, .mya-lugar-confirm-*); acá sólo van los
 * estados que el componente no tiene. Brand Book v1.4: texto mínimo 13 px; sobre la hoja oscura
 * (#191919 / #262626) el texto secundario va en cream al 72 % (≥ 7:1).
 */

/* Separación vertical entre filas y avisos dentro de la lista. */
.mya-cc-lista { display: flex; flex-direction: column; gap: 4px; }
/* con-A2 R2-02 / aud r2-3: la lista es flex en columna con alto máximo; sin esto, en una lista larga las
   filas se COMPRIMEN (54 px de contenido en 44) y la primera (CABA) queda recortada bajo el buscador. */
.mya-cc-lista > * { flex-shrink: 0; }
.mya-cc-lista > .mya-lugar-error,
.mya-cc-lista > .mya-cc-sugerencia > .mya-lugar-error { margin: 6px 0; }
.mya-cc-sugerencia { display: block; }

/* «Empezá a escribir…» y «No encontramos…» (sobre la hoja oscura). buscador-tipeo-8881: el cartel
   «Buscando “…”…» ya no se dibuja en la lista (sólo va a la región aria-live), así que su regla salió. */
.mya-cc-vacio {
  padding: 14px 12px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(254, 247, 231, 0.72);
  text-align: center;
}

/* buscador-tipeo-8881 (F2.2) · señal de carga EN EL CAMPO mientras se espera a Google: un spinner de
   fondo a la derecha del input, lima #DAFF02 como el spinner de la fila (css/mya-lugar-ui.css
   .mya-lugar-ic). Sólo imagen de fondo: no cambia padding, borde ni alto, así que no mueve ni un
   píxel. `!important` porque el perfil pinta el input con el atajo `background:` desde un selector
   con id (#mya-ep-v9 input[type=text]), que si no le borraría la imagen. Sin animación para quien
   pidió menos movimiento. Lo usan el alta (#city-search) y «Editar mis datos» (#ep-city-search); el
   candado tiene la misma regla en su <style> propio. */
input.mya-cc-cargando {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DAFF02' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
}
@media (prefers-reduced-motion: reduce) {
  input.mya-cc-cargando {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DAFF02' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'/%3E%3C/svg%3E") !important;
  }
}
/* buscador-tipeo-8881 (F4 · diseño): en «Editar mis datos» el campo es CREMA (#FEF7E7, medido con
   getComputedStyle en el banco) y el lima casi no se ve: ahí el spinner va en VIOLETA #7138FF (el color
   de la marca en el DS). El alta (#1A1A1A, medido) y el candado (--mya-near-black) siguen en lima. */
#ep-city-search.mya-cc-cargando {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237138FF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
}
@media (prefers-reduced-motion: reduce) {
  #ep-city-search.mya-cc-cargando {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237138FF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'/%3E%3C/svg%3E") !important;
  }
}

/* buscador-en-linea-8882 (DL-495): el ALTA ahora busca en un campo BLANCO del DS (.mya-input, sobre la
   tarjeta crema del paso), así que su spinner de carga va en VIOLETA como el del perfil. */
#city-search.mya-cc-cargando {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237138FF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
}
@media (prefers-reduced-motion: reduce) {
  #city-search.mya-cc-cargando {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237138FF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'/%3E%3C/svg%3E") !important;
  }
}

/* ===== buscador-en-linea-8882 (DL-495 + ADENDA 1) · EL CAMPO EN LÍNEA (alta + «Editar mis datos»;
   el candado repite estas reglas en su <style> propio porque no carga esta hoja) =====
   · el campo: input de texto con LUPA a la izquierda (SVG real, no imagen de fondo: el fondo lo usa
     el spinner de carga a la derecha) y sin flechita;
   · el PANEL negro debajo, dentro de la tarjeta, en el flujo (empuja lo de abajo, no flota ni se
     recorta): #111111, borde #2E2E2E, radio 12; su alto máximo (con dvh) lo pone cada pantalla;
   · la ELEGIDA: estado completo del DS (borde #86C994, fondo #F2FAF3), tilde verde y «Cambiar». */
.mya-cc-campo { position: relative; }
.mya-cc-campo[hidden] { display: none !important; }
.mya-cc-lupa {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  pointer-events: none;
  color: rgba(25, 25, 25, 0.45);
}
.mya-cc-campo .mya-cc-input { padding-left: 40px; padding-right: 40px; }
.mya-cc-panel {
  margin-top: 8px;
  padding: 6px;
  background: #111111;
  border: 1px solid #2E2E2E;
  border-radius: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mya-cc-panel[hidden] { display: none !important; }
.mya-cc-panel .mya-cc-lista { gap: 2px; }
.mya-cc-panel .mya-lugar-fila { border-radius: 10px; }
.mya-cc-panel .mya-lugar-nombre { color: #FFFFFF; }
.mya-cc-panel .mya-lugar-camino { color: rgba(255, 255, 255, 0.64); }
.mya-cc-panel .mya-lugar-ic { background: #1E1E1E; color: #DAFF02; border-radius: 8px; }
/* Fila activa con el teclado, elegida o verificándose: el MISMO borde lima (ADENDA 1.2 / DL-495 3). */
.mya-cc-panel .mya-lugar-fila.is-activa,
.mya-cc-panel .mya-lugar-fila.is-selected,
.mya-cc-panel .mya-lugar-fila.is-pending {
  border-color: #DAFF02;
  background: rgba(218, 255, 2, 0.06);
}
.mya-cc-panel .mya-lugar-fila.is-pending { opacity: 1; }
/* Mientras una fila se verifica, las otras se atenúan (siguen tocables: la última acción manda). */
.mya-cc-panel .mya-cc-lista:has(.is-pending) .mya-lugar-fila:not(.is-pending) { opacity: 0.45; }
.mya-cc-panel .mya-cc-vacio { color: rgba(255, 255, 255, 0.72); }
.mya-cc-noesta { display: flex; flex-direction: column; gap: 4px; }
.mya-cc-noesta-q { color: #FFFFFF; font-weight: 600; font-size: 15px; }
.mya-cc-pie {
  margin: 6px 6px 4px;
  padding-top: 8px;
  border-top: 1px solid #2E2E2E;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.mya-cc-pie[hidden] { display: none !important; }
.mya-cc-elegida {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 4px 6px 4px 13px;
  border: 1px solid #86C994;
  background: #F2FAF3;
  border-radius: 10px;
  font-family: "Inter", system-ui, sans-serif;
  color: #191919;
}
.mya-cc-elegida[hidden] { display: none !important; }
.mya-cc-elegida-ic { flex: none; display: inline-flex; color: #15803D; }
.mya-cc-elegida-ic svg { width: 18px; height: 18px; }
.mya-cc-elegida-txt { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: #191919; }
.mya-cc-elegida-cambiar {
  flex: none;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: 700 14px "Inter", system-ui, sans-serif;
  color: #5B2BD9;
  cursor: pointer;
}
.mya-cc-elegida-cambiar:focus,
.mya-cc-elegida-cambiar:focus-visible { outline: 2px solid #7138FF; outline-offset: 1px; }

/* Fila de Google mientras el servidor la resuelve (DL-493 3, buscador-creador-8878): sólo el ÍCONO
   cambia por un spinner girando; el nombre y el "Provincia, País" de la fila quedan iguales. */
.mya-lugar-fila.is-pending { cursor: progress; }
/* buscador-pulido-8892 F1: «Confirmando…» visible a la par del nombre de la fila que espera, NEUTRO
   (gris del camino, sin pastilla, nunca rojo); se va cuando el servidor contesta. */
.mya-lugar-fila .mya-cc-confirmando { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--mya-lugar-muted, rgba(25, 25, 25, 0.6)); }
.mya-cc-panel .mya-lugar-fila .mya-cc-confirmando { color: rgba(255, 255, 255, 0.64); }
.mya-cc-spinner { animation: mya-cc-girar 0.8s linear infinite; }
@keyframes mya-cc-girar { to { transform: rotate(360deg); } }

/* buscador-creador-8878 (contradictor, 23-sep): foco lima del DS, SOLO para el buscador del creador
   (alta + «Editar mis datos»; el candado tiene su propio <style> inline en candado-ciudad.php, fuera
   de este archivo, y NO se toca acá). El DS ya define esto para la marca (css/mya-lugar-ui.css:33,
   `.mya-lugar-fila:focus-visible`), pero medido en el banco (foco por click real, mismo flujo de
   scripts/capturas-f4.js) esa regla NUNCA gana: Chromium pinta su anillo NATIVO (`outline-style:auto`,
   azul #005fcc en desktop / ámbar #e59700 en móvil) igual, porque acá `:focus-visible` no llega a
   matchear ni con teclado simulado ni con click real (`el.matches(':focus-visible')` da `false` en
   los dos casos) — no es un problema de especificidad ni de orden de carga (mya-lugar-ui.css SÍ está
   encolado y la regla SÍ está en su hoja: confirmado con `document.styleSheets`). Por eso acá va
   `:focus` ADEMÁS de `:focus-visible` — no alcanza con el patrón del DS solo, y el foco tiene que
   seguir siendo VISIBLE (accesibilidad) en el color correcto. `.mya-cc-fila` (no `.mya-lugar-fila`,
   que es de la marca) y los ids propios de la hoja de ciudad del alta y de «Editar mis datos».
   buscador-creador-8878 (W3, 23-sep): `.mya-cc-fila` va con el contorno POR DENTRO (offset negativo)
   en regla PROPIA, separada de los botones — el contenedor con scroll de la lista RECORTA el contorno
   de afuera de la fila (esquinas lima sueltas y línea cortada arriba en capturas de F4); los botones
   quedan con el contorno por fuera como estaban, porque por dentro de un botón lima el contorno lima
   sería invisible. */
.mya-cc-fila:focus,
.mya-cc-fila:focus-visible {
  outline: 2px solid #DAFF02;
  outline-offset: -2px;
}

#ciudad-confirm:focus,
#ciudad-confirm:focus-visible,
#ciudad-confirm-yes:focus,
#ciudad-confirm-yes:focus-visible,
#ciudad-confirm-no:focus,
#ciudad-confirm-no:focus-visible,
#ep-city-confirm:focus,
#ep-city-confirm:focus-visible {
  outline: 2px solid #DAFF02;
  outline-offset: 2px;
}

/* Sólo para lectores de pantalla (región aria-live del buscador). */
.mya-cc-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== buscador-en-linea-8882 F7.1 (ADENDA 2 · la marca a la par) · el mismo campo en línea, reusado
   por la MARCA: el alta (page-register-marca.php, #city-search: ya le toca el spinner violeta de arriba)
   y el wizard de campaña (template-parts/wizard-campania-v18-body.php, #citySearch, campo BLANCO →
   spinner VIOLETA como el alta y el perfil). */
#citySearch.mya-cc-cargando {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237138FF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
}
@media (prefers-reduced-motion: reduce) {
  #citySearch.mya-cc-cargando {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237138FF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'/%3E%3C/svg%3E") !important;
  }
}
/* Vista 'lugar' del wizard: el ícono de E2 de cada TIPO en el mismo cuadradito oscuro; la ciudad sigue
   lima, la provincia entera va lavanda y «Todo el país» crema (los colores de css/mya-lugar-ui.css). El
   creador sólo dibuja data-tipo="ciudad": no le cambia nada. */
.mya-cc-panel .mya-lugar-ic[data-tipo="provincia"] { color: #CB93FF; }
.mya-cc-panel .mya-lugar-ic[data-tipo="pais"] { color: #FEF7E7; }