/* ══════════════════════════════════════════════════════════════════════════
   static/css/tw-buscador.css — BUSCADOR "MÁQUINA DE ESCRIBIR" (prefijo tw-)
   Estilo MapXplorer sobre las barras de MOVAI-X. Píldora con lupa, frase que se
   escribe sola con un emoji delante, brillo azul que recorre el borde mientras
   escribe y chips con un badge redondo de color. Todo con las variables del
   proyecto (:root y el modo día con html[data-tema="dia"] las cambian solas).
   Debe cargarse DESPUÉS de mapa.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── La píldora (la barra del inicio #home-buscar y la real .search) ── */
.tw-pill { position: relative; }
.hm-search.tw-pill, .search.tw-pill { border-radius: 999px; }
.tw-pill.tw-on { box-shadow: 0 0 24px var(--glow); }   /* halo suave mientras escribe */

/* ── Capa del texto que se escribe solo ── */
.tw-cap {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  color: var(--muted); font-family: var(--sans); line-height: 1.2;
  white-space: nowrap; overflow: hidden; pointer-events: none;
  transition: opacity .3s ease;
}
.tw-cap.tw-fade   { opacity: 0; }                       /* se desvanece antes de la frase siguiente */
.tw-cap.tw-oculto { opacity: 0; visibility: hidden; }   /* dormida (hay texto escrito, no se ve…) */
.tw-emoji {
  flex: none; font-size: 1.15em; line-height: 1; font-style: normal;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--sans);
}
.tw-emoji:empty { display: none; }
.tw-emoji svg.li { width: 17px; height: 17px; color: var(--teal); display: block; }  /* variante con iconos lineales */
.tw-cap .tw-txt {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-cursor {
  flex: none; display: block; width: 2px; height: 1.15em; margin-left: 1px; border-radius: 1px;
  background: var(--teal); box-shadow: 0 0 8px var(--glow);
}
.tw-cap.tw-espera .tw-cursor { animation: tw-parpadeo 1s steps(2, start) infinite; }  /* parpadea al terminar */
.tw-cap.tw-fijo .tw-cursor { display: none; }                                          /* parada por la API: texto fijo */
@keyframes tw-parpadeo { to { opacity: 0; } }

/* ── Brillo azul que recorre el borde (anillo con máscara: solo se ve el borde) ── */
.tw-glow {
  position: absolute; inset: -1px; border-radius: inherit; padding: 2px;
  pointer-events: none; overflow: hidden; opacity: 0; z-index: 2;
  transition: opacity .4s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.tw-glow::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 200deg,
    rgba(139, 199, 255, .18) 250deg, var(--teal) 318deg, #fff 346deg, transparent 360deg);
}
.tw-pill.tw-on .tw-glow { opacity: 1; }
.tw-pill.tw-on .tw-glow::before { animation: tw-giro 2.4s linear infinite; }
@keyframes tw-giro { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Barra REAL (#buscar): la capa va ENCIMA del input, sin tocar sus eventos ── */
.tw-wrap {
  flex: 1 1 auto; min-width: 0; position: relative;
  display: flex; align-items: center; align-self: stretch;
}
.tw-wrap input { flex: 1; width: 100%; min-width: 0; }
.tw-wrap .tw-cap { position: absolute; inset: 0; font-size: 15px; }
.tw-wrap.tw-live #buscar::placeholder { color: transparent; }   /* el placeholder nativo cede su sitio */
.tw-wrap:focus-within .tw-cursor { display: none; }             /* con el cursor real basta uno */
@media (max-width: 1024px) {
  body.buscando .tw-wrap .tw-cap { font-size: 16px; }           /* igual que #buscar al buscar */
}

/* ── Chips con badge redondo de color (inicio #hm-chips y mapa #cat-chips) ── */
.tw-chips button { gap: 9px; }
.tw-chips button > i.tw-badge {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: var(--tw-c, var(--teal));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 2px 8px var(--tw-c-glow, var(--glow));
}
.tw-chips button > i.tw-badge svg.li { width: 13px; height: 13px; margin: 0; color: var(--tw-ico, #fff); }
.tw-chips button:hover, .tw-chips button.activo { border-color: var(--tw-c, var(--teal)); }
.tw-chips button.activo { background: var(--tw-c-dim, var(--teal-dim)); color: var(--text); }
.tw-chips button.activo > i.tw-badge svg.li { color: var(--tw-ico, #fff); }
/* colores por categoría */
.tw-chips [data-cat="supermercados"] { --tw-c: #FF5C8A; --tw-c-glow: rgba(255, 92, 138, .32);  --tw-c-dim: rgba(255, 92, 138, .14); }
.tw-chips [data-cat="farmacias"]     { --tw-c: #2ECC8A; --tw-c-glow: rgba(46, 204, 138, .32);  --tw-c-dim: rgba(46, 204, 138, .14); }
.tw-chips [data-cat="gasolineras"]   { --tw-c: #FFC53D; --tw-c-glow: rgba(255, 197, 61, .32);  --tw-c-dim: rgba(255, 197, 61, .14); --tw-ico: #1A1200; }
.tw-chips [data-cat="restaurantes"]  { --tw-c: #FF8C42; --tw-c-glow: rgba(255, 140, 66, .32);  --tw-c-dim: rgba(255, 140, 66, .14); }
.tw-chips [data-cat="metro"]         { --tw-c: #4DA3FF; --tw-c-glow: rgba(77, 163, 255, .32);  --tw-c-dim: rgba(77, 163, 255, .14); }
.tw-chips [data-cat="paradas"]       { --tw-c: #A78BFA; --tw-c-glow: rgba(167, 139, 250, .32); --tw-c-dim: rgba(167, 139, 250, .14); }
.tw-chips [data-cat="hospitales"]    { --tw-c: #FF4D6D; --tw-c-glow: rgba(255, 77, 109, .32);  --tw-c-dim: rgba(255, 77, 109, .14); }
/* en el celular los chips del inicio son fichas: badge más grande arriba del texto */
@media (max-width: 1024px) {
  .hm-chips.tw-chips button > i.tw-badge { width: 40px; height: 40px; }
  .hm-chips.tw-chips button > i.tw-badge svg.li { width: 19px; height: 19px; }
}

/* ── Modo día (html[data-tema="dia"]): las variables ya cambian; solo se ajusta el blanco del brillo ── */
html[data-tema="dia"] .tw-glow::before {
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 215deg,
    rgba(31, 111, 229, .10) 260deg, var(--teal) 325deg, #8BC7FF 348deg, transparent 360deg);
}

/* ── Menos movimiento: sin tecleo ni brillo (el JS muestra la frase entera) ── */
@media (prefers-reduced-motion: reduce) {
  .tw-glow, .tw-pill.tw-on .tw-glow { display: none; }
  .tw-pill.tw-on { box-shadow: none; }
  .tw-cap .tw-cursor { display: none; }
  .tw-cap { transition: opacity .2s linear; }
}

/* El título grande del inicio sobra: la barra ya lo dice ("¿A dónde vamos hoy?") */
.hm-h1 { display: none; }
.hm-search.tw-pill { margin-top: 26px; }

/* La lista de sugerencias/categorías no debe quedar debajo de la barra de navegación */
@media (max-width: 1024px) {
  .s-sugerencias { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* chip "Más": abre el buscador con todas las categorías */
.tw-chips [data-cat="mas"] { --tw-c: #6B7280; --tw-c-glow: rgba(107, 114, 128, .3); --tw-c-dim: rgba(107, 114, 128, .14); }

/* La píldora del inicio con un poco más de presencia (cristal oscuro) */
.hm-search.tw-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-tema="dia"] .hm-search.tw-pill {
  background: #fff; border-color: rgba(15, 23, 42, .12);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
}


/* ── Ajustes de los jueces ── */
.tw-cap { gap: 0; }                                   /* cursor pegado a la letra */
.tw-emoji { margin-right: 9px; }
.tw-cap.tw-oculto { transition: none; }               /* se esconde AL INSTANTE al teclear */
.tw-glow::before { animation: tw-giro 2.4s linear infinite; animation-play-state: paused; }
.tw-pill.tw-on .tw-glow::before { animation-play-state: running; }   /* el cometa no salta a 0° */
.search.tw-pill, .hm-search.tw-pill { transition: box-shadow .45s ease, border-color .3s ease; }
@keyframes tw-parpadeo { 50% { opacity: 0; } }
.tw-cap.tw-espera .tw-cursor { animation: tw-parpadeo 1s step-end infinite; }
html[data-tema="dia"] .search.tw-pill.tw-on,
html[data-tema="dia"] .hm-search.tw-pill.tw-on { box-shadow: 0 10px 28px rgba(15, 23, 42, .12), 0 0 22px rgba(31, 111, 229, .22); }
@media (forced-colors: active) {
  .tw-cap, .tw-glow { display: none !important; }
  .tw-wrap.tw-live #buscar::placeholder { color: GrayText; }
}