/*! © 2026 Tickets Visit · Trip Planner — Capa de diseño compartida.
   Se enlaza DESPUÉS del <style> inline de cada pantalla del marketplace, así unifica el
   AZUL DE MARCA y los colores semánticos en las 6 pantallas SIN tocar el fondo propio de
   cada contexto (los dashboards mantienen su gris frío; el planner, su beige cálido).
   Fuente única de verdad de la identidad: cambia el color aquí y cambia en todas.
   NOTA: no se enlaza en las páginas de ciudad (usan seo.css, ya consistentes). */

:root{
  /* Azul de marca — el mismo en toda la red (antes los dashboards usaban #0a4a73) */
  --accent:#0E5163;
  --accent2:#0E5163;
  /* Colores semánticos unificados */
  --ok:#086b45;
  --neg:#c0472c;
  --warn:#8a6d12;
  --gold:#b6850f;      /* dorado de adorno (iconos, tintes) */
  --gold-ink:#8a6a00;  /* dorado para TEXTO de precio — cumple WCAG AA (5:1 sobre blanco) */
  --vio:#7c5cc4;
--terra:#C4452A;--terra2:#E2603F;--terra-ink:#A9381F;--warm:var(--terra);--warm2:var(--terra-ink);}

/* ── Primitivas compartidas ── */

/* Foco de teclado visible, coherente en todas las pantallas */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:2px;
  border-radius:4px;
}

/* Skip-link (saltar al contenido) — accesibilidad WCAG 2.4.1 */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}

/* Spinner de carga reutilizable */
@keyframes ui-spin{to{transform:rotate(360deg)}}
.ui-spin{
  width:38px;height:38px;
  border:3px solid var(--border,#dcdce0);
  border-top-color:var(--accent2);
  border-radius:50%;
  animation:ui-spin .8s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .ui-spin{animation-duration:2.4s}
}

/* Anti-zoom de iOS: Safari hace zoom al enfocar un campo con font-size <16px.
   Regla de seguridad que cubre de raíz todo el marketplace en móvil (incluye
   estilos inline). El aspecto en desktop no cambia (solo aplica ≤600px). */
@media (max-width:600px){
  input,select,textarea{font-size:16px !important}
}