/*
 * "Elige tu ciudad" — dropdown (desktop) / acordeón (mobile).
 * Ver js/menu-ciudades/menu-ciudades.js — este archivo inserta el HTML.
 *
 * Reutiliza las variables --ink/--coral/--line que ya define #dtNav
 * (ver home_current.html) — sin paleta nueva. El trigger de escritorio
 * hereda .dt-nav__link (mismo padding/tamaño/hover que "Soy cliente" y
 * "Conócenos"), así que solo hace falta el estilo de lo que este módulo
 * agrega: el caret y el panel desplegable.
 */

/* ===== ESCRITORIO ===== */
.dr-ciudades-item {
  position: relative;
  display: inline-flex;
}
.dr-ciudades-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
/* hello-elementor/assets/css/reset.css impone globalmente
   "button:hover, button:focus { background-color: rgb(204,51,102); }" a
   CUALQUIER <button> sin su propio background-color en esos estados — sin
   esto, un click (que además de :hover deja el botón en :focus) pinta un
   rectángulo rosa detrás del texto. Mismo bug/mismo fix que ya se aplicó en
   la burbuja de saludo del chatbot (css/chatbot/chatbot.css). */
.dr-ciudades-trigger:hover,
.dr-ciudades-trigger:focus {
  background-color: transparent;
}
.dr-ciudades-caret {
  width: 10px;
  height: 7px;
  transition: transform .25s ease;
}
.dr-ciudades-item.is-open .dr-ciudades-caret { transform: rotate(180deg); }

.dr-ciudades-panel {
  /* top:100% + margin-top:0 (SIN separación del <li> padre) es la causa
     raíz del bug "el submenú se cierra antes de poder hacer click": un
     margin-top aquí (o cualquier hueco) crea una franja de píxeles entre
     el botón y el panel que NO pertenece a .dr-ciudades-item — al pasar el
     mouse por ahí (incluso en diagonal) el navegador dispara mouseleave en
     el contenedor antes de llegar al panel. El pequeño desplazamiento
     visual de apertura se logra solo con `transform` (que no mueve la caja
     real usada para hit-testing), nunca con margin/gap. */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line, rgba(10,20,68,.08));
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(10,20,68,.16);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 20000;
}
/* Puente invisible que rellena cualquier "tierra de nadie" residual entre
   el botón y el panel (redondeos de subpíxel, o si el panel algún día
   vuelve a llevar separación) — extiende el área "hoverable" del panel
   hacia arriba hasta tocar el <li> padre, para que .dr-ciudades-item nunca
   pierda el mouseenter/mouseleave a medio camino. */
.dr-ciudades-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.dr-ciudades-item.is-open .dr-ciudades-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.dr-ciudades-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.dr-ciudades-lista a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink, #0a1444);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.dr-ciudades-lista a:hover,
.dr-ciudades-lista a:focus-visible {
  background: rgba(44,63,205,.07);
  color: var(--coral, #2c3fcd);
  outline: none;
}

@media (max-width: 991px) {
  /* El nav de escritorio ya se oculta por completo en este breakpoint
     (#dtNav .dt-nav__menu { display:none !important }) — el ítem de
     escritorio no necesita reglas propias aquí, solo evitar que estorbe. */
  .dr-ciudades-item { display: none; }
}

/* ===== MOBILE (acordeón, dentro de #dtMobileMenu) ===== */
.dr-ciudades-mobile-item {
  width: 100%;
  opacity: 0;
  transform: translateY(18px);
}
.dt-mobile.is-open .dr-ciudades-mobile-item {
  animation: dtMobileLinkIn .55s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: calc(var(--i) * 0.055s + .15s);
}
.dr-ciudades-mobile-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
/* Mismo bug/mismo fix que .dr-ciudades-trigger arriba (reset.css del tema
   padre) — aquí es más visible todavía porque el click real en mobile dispara
   :focus siempre, no solo en pruebas automatizadas. */
.dr-ciudades-mobile-trigger:hover,
.dr-ciudades-mobile-trigger:focus {
  background-color: transparent;
}
.dr-ciudades-mobile-trigger .dr-ciudades-caret {
  margin-left: auto;
  width: 14px;
  height: 10px;
  color: #fff;
  transition: transform .25s ease;
}
.dr-ciudades-mobile-item.is-open .dr-ciudades-caret { transform: rotate(180deg); }

.dr-ciudades-mobile-panel {
  padding: 4px 4px 12px 32px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dr-ciudades-lista--mobile a {
  display: block;
  padding: 10px 4px;
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color .2s ease;
}
.dr-ciudades-lista--mobile a:hover,
.dr-ciudades-lista--mobile a:focus-visible {
  color: #7c8cff;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .dr-ciudades-panel,
  .dr-ciudades-caret,
  .dr-ciudades-mobile-item {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}