/* ¿Qué Hay? — mobile-first styles. Loads after shared/ir.css. */
body.qh {
  /* Infinity Rising palette: black, electric blue, cyan */
  --qh-black: #05070D;
  --qh-green: #0420C2;        /* primary (Infinity blue) — name kept so older rules still work */
  --qh-green-dark: #02158A;
  --qh-gold: #00C8F8;         /* accent (Rising cyan) */
  --qh-cyan-ink: #04394A;
  --qh-bg: #F3F5FA;
  --qh-surface: #FFFFFF;
  --qh-ink: #0D111C;
  --qh-muted: #566074;
  --qh-line: #DFE3EC;
  --qh-line-2: #C9D0DE;
  --qh-track: #E4E8F1;
  --qh-open: #16A34A;
  --qh-open-ink: #157F3D;
  --qh-closed: #8A90A0;
  --qh-badge-bg: #DDF6FE;
  --qh-badge-ink: #035A73;
  --qh-blue: #0420C2;
  --qh-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --ir-brand: var(--qh-green);
  --ir-bg: var(--qh-bg);
  --ir-surface: var(--qh-surface);
  --ir-ink: var(--qh-ink);
  --ir-muted: var(--qh-muted);
  --ir-line: var(--qh-line);
  color-scheme: light;
  background: var(--qh-bg);
  color: var(--qh-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.qh svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.qh a { color: var(--qh-green); }
.qh :focus-visible { outline: 3px solid var(--qh-gold); outline-offset: 2px; }
[hidden] { display: none !important; }

.qh-app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--qh-bg); }
@media (min-width: 600px) { .qh-app { box-shadow: 0 0 0 1px var(--qh-line); } }

/* Header */
.qh-head { background: var(--qh-black); background-image: radial-gradient(120% 140% at 100% 0%, rgba(0,200,248,.22), transparent 55%), radial-gradient(120% 140% at 0% 100%, rgba(4,32,194,.45), transparent 60%); color: #fff; padding: calc(18px + env(safe-area-inset-top)) 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.qh-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.qh-logo { font-family: var(--qh-display); font-weight: 800; font-size: 26px; letter-spacing: -.5px; color: #fff !important; text-decoration: none; line-height: 1; white-space: nowrap; }
.qh-logo span { color: var(--qh-gold); }
.qh-top-r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.qh-hood { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; background: rgba(255,255,255,.14); padding: 6px 10px; border-radius: 999px; min-width: 0; }
.qh-hood span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qh-hood svg { width: 14px; height: 14px; }
.qh-lang { font: 600 13px/1 "Inter", system-ui, sans-serif; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; min-height: 44px; padding: 0 12px; cursor: pointer; flex: 0 0 auto; }
.qh-h1 { margin: 0; font-family: var(--qh-display); font-weight: 600; font-size: 28px; line-height: 1.1; }
.qh-search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 0 8px 0 14px; height: 52px; color: var(--qh-ink); }
.qh-search > svg { width: 20px; height: 20px; color: var(--qh-muted); }
.qh-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; font: 500 16px/1.2 "Inter", system-ui, sans-serif; color: var(--qh-ink); background: transparent; height: 100%; -webkit-appearance: none; appearance: none; }
.qh-search input::-webkit-search-cancel-button { display: none; }
.qh-search input::placeholder { color: #767672; }
.qh-search:focus-within { box-shadow: 0 0 0 3px var(--qh-gold); }
.qh-search input:focus-visible { outline: none; }
.qh-clear { border: 0; background: transparent; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--qh-ink); border-radius: 50%; }
.qh-clear svg { width: 28px; height: 28px; padding: 7px; background: #EDEDEA; border-radius: 50%; stroke-width: 2.5; }

/* Category chips */
.qh-chips { display: flex; gap: 8px; padding: 14px 16px 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.qh-chips::-webkit-scrollbar { display: none; }
.qh-chip { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--qh-line-2); background: #fff; font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--qh-ink); cursor: pointer; white-space: nowrap; }
.qh-chip[aria-pressed="true"] { background: var(--qh-black); border-color: var(--qh-black); color: #fff; box-shadow: inset 0 -3px 0 var(--qh-gold); }

/* Results bar and view toggle */
.qh-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px; }
.qh-count { margin: 0; font-size: 13px; color: var(--qh-muted); min-width: 0; }
.qh-count strong { color: var(--qh-ink); }
.qh-toggle { display: flex; background: var(--qh-track); border-radius: 10px; padding: 3px; flex: 0 0 auto; }
.qh-toggle button { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: 600 13px/1 "Inter", system-ui, sans-serif; color: #3D3D3D; cursor: pointer; }
.qh-toggle button svg { width: 14px; height: 14px; }
.qh-toggle button[aria-pressed="true"] { background: #fff; color: var(--qh-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Location note */
.qh-geo { margin: 0 16px 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--qh-line); border-radius: 12px; font-size: 13px; color: var(--qh-muted); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qh-geo p { margin: 0; display: flex; gap: 8px; align-items: flex-start; flex: 1 1 220px; }
.qh-geo p svg { margin-top: 2px; color: var(--qh-blue); }
.qh-geo-btn { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--qh-green); color: #fff; font: 600 14px/1 "Inter", system-ui, sans-serif; cursor: pointer; }

/* Cards */
.qh-list { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; flex: 1 0 auto; }
.qh-card { background: var(--qh-surface); border: 1px solid var(--qh-line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.qh-card-top { display: flex; gap: 12px; }
.qh-photo { width: 68px; height: 68px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; background: #E9E6DD; }
.qh-ph { display: grid; place-items: center; font-family: var(--qh-display); font-weight: 800; font-size: 28px; color: var(--qh-green); background: #E6EAFB; }
.qh-ph-comida { background: #FCE9C2; color: #7A4E00; }
.qh-ph-abarrotes { background: #DDEBD8; color: #24572A; }
.qh-ph-farmacia { background: #DCE8F7; color: #1D4C8F; }
.qh-ph-belleza { background: #F6DDE6; color: #8A2450; }
.qh-ph-servicios { background: #E4E1F2; color: #43308C; }
.qh-card-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.qh-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qh-name a { color: var(--qh-ink); text-decoration: none; }
.qh-name a:hover, .qh-name a:focus-visible { text-decoration: underline; }
.qh-num { width: 24px; height: 24px; border-radius: 50%; background: var(--qh-green); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; flex: 0 0 auto; }
.qh-demo { font-size: 11px; font-weight: 600; color: var(--qh-muted); border: 1px dashed var(--qh-line-2); border-radius: 6px; padding: 1px 6px; }
.qh-offers { margin: 0; font-size: 13px; color: var(--qh-muted); }
.qh-st { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.qh-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.qh-st-open { color: var(--qh-open-ink); }
.qh-st-open .qh-dot { background: var(--qh-open); }
.qh-st-closed { color: var(--qh-muted); }
.qh-st-closed .qh-dot { background: var(--qh-closed); }
.qh-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; min-height: 24px; }
.qh-dist { font-weight: 600; }
.qh-badge { background: var(--qh-badge-bg); color: var(--qh-badge-ink); font-weight: 600; font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.qh-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qh-acts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qh-acts-1 { grid-template-columns: minmax(0, 1fr); }
.qh-act { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 6px; border-radius: 12px; border: 1px solid var(--qh-line-2); font-size: 13px; font-weight: 600; color: var(--qh-ink) !important; text-decoration: none; background: #fff; white-space: nowrap; overflow: hidden; }
.qh-act:active { background: #F0F0EC; }
.qh-act-main { background: var(--qh-green); border-color: var(--qh-green); color: #fff !important; }
.qh-act-main:active { background: var(--qh-green-dark); }
.qh-card.is-closed .qh-photo { filter: grayscale(1); opacity: .7; }
.qh-card.is-closed .qh-name a, .qh-card.is-closed .qh-name { color: #4A4A47; }
.qh-card.is-closed .qh-act-main { background: #fff; color: var(--qh-ink) !important; border-color: var(--qh-line-2); }

.qh-empty { text-align: center; color: var(--qh-muted); padding: 32px 8px; }
.qh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--qh-green); color: #fff !important; font: 600 15px/1 "Inter", system-ui, sans-serif; text-decoration: none; cursor: pointer; }

/* Business detail (?id=) */
.qh-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 14px; text-decoration: none; align-self: flex-start; }
.qh-back svg { width: 18px; height: 18px; }
.qh-detail .qh-photo { width: 88px; height: 88px; }
.qh-more { border-top: 1px solid var(--qh-line); padding-top: 4px; font-size: 14px; }
.qh-more h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--qh-muted); margin: 12px 0 4px; }
.qh-more p { margin: 0; }
.qh-more a { display: inline-block; padding: 8px 0; }
.qh-hours { border-collapse: collapse; width: 100%; }
.qh-hours th { text-align: left; font-weight: 500; width: 56px; padding: 3px 0; text-transform: capitalize; }
.qh-hours td { padding: 3px 0; }
.qh-hours tr.is-today { font-weight: 700; }
.qh-report { margin-top: 12px !important; font-size: 13px; }
.qh-report a { color: var(--qh-muted) !important; }

/* Map view */
body.is-map .qh-app { height: 100vh; height: 100dvh; min-height: 0; }
body.is-map .qh-h1, body.is-map .qh-foot, body.is-map .qh-geo, body.is-map .qh-addcta { display: none !important; }
body.is-map .qh-head { padding-top: calc(14px + env(safe-area-inset-top)); gap: 12px; }
body.is-map .qh-search { height: 48px; }
body.is-map .qh-chips { padding-top: 10px; }
.qh-mapwrap { position: relative; flex: 1 1 auto; min-height: 340px; background: #ECEAE3; overflow: hidden; }
.qh-map { position: absolute; inset: 0; z-index: 0; }
.qh-map-err { padding: 24px; text-align: center; color: var(--qh-muted); }
.qh-recenter { position: absolute; right: 12px; top: 92px; z-index: 600; width: 48px; height: 48px; border-radius: 14px; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); display: grid; place-items: center; cursor: pointer; color: var(--qh-ink); }
.qh-recenter svg { width: 22px; height: 22px; }
.qh-mapwrap .leaflet-top.leaflet-right { margin-top: 0; }
.qh-mapwrap .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; }
.qh-pin-wrap { background: none; border: 0; }
.qh-pin { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--qh-gold); color: var(--qh-black); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); font: 700 14px/1 "Inter", sans-serif; box-sizing: border-box; }
.qh-pin.is-closed { background: #C9C9C3; color: #3D3D3D; }
.qh-pin.is-sel { background: var(--qh-green); color: #fff; border-width: 3px; font-size: 16px; position: relative; }
.qh-pin.is-sel::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--qh-green); }
.qh-me-wrap { background: none; border: 0; }
.qh-me { position: absolute; inset: 0; border-radius: 50%; background: rgba(37,99,235,.18); }
.qh-me::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--qh-blue); border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.qh-me-l { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); font: 700 11px/1 "Inter", sans-serif; color: #1D4ED8; background: #fff; padding: 3px 6px; border-radius: 6px; white-space: nowrap; }
.qh-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 700; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,.12); padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); max-height: 70%; overflow: auto; }
.qh-sheet .qh-card { border: 0; padding: 4px 0 0; }
.qh-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--qh-line-2); margin: 0 auto 6px; }
.qh-sheet-x { position: absolute; right: 6px; top: 4px; width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--qh-muted); }
.qh-sheet-x svg { width: 20px; height: 20px; }
.qh-sheet .qh-name { padding-right: 36px; }
.qh-hint { text-align: center; font-size: 12px; color: var(--qh-muted); margin: 10px 0 0; }

/* Footer and error */
.qh-foot { padding: 8px 16px calc(32px + env(safe-area-inset-bottom)); font-size: 13px; color: var(--qh-muted); }
.qh-foot p { margin: 8px 0; }
.qh-foot a { display: inline-block; padding: 6px 0; }
.qh-error { max-width: 480px; margin: 0 auto; padding: 64px 24px; text-align: center; }
.qh-error h1 { font-family: var(--qh-display); font-size: 26px; }

@media (prefers-reduced-motion: reduce) { .qh-chips { scroll-behavior: auto; } }

/* Premium: featured listings */
.qh-card.is-featured { border-color: var(--qh-gold); box-shadow: 0 0 0 1px var(--qh-gold), 0 6px 18px rgba(0,200,248,.18); }
.qh-feat { font-size: 11px; font-weight: 700; color: var(--qh-black); background: var(--qh-gold); border-radius: 6px; padding: 2px 7px; letter-spacing: .02em; }
.qh-promo { margin: 0; font-size: 13px; font-weight: 600; color: var(--qh-green-dark); background: #E8ECFF; border-radius: 8px; padding: 6px 10px; }
.qh-col { color: var(--qh-muted); font-weight: 500; }
.qh .qh-addcta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 12px; padding: 12px 14px; border-radius: 14px; background: var(--qh-black); color: #fff; text-decoration: none; }
.qh-addcta span { font-size: 14px; line-height: 1.3; color: #DCE3F5; }
.qh-addcta b { color: var(--qh-gold); }
.qh-addcta i { font-style: normal; flex: 0 0 auto; background: var(--qh-gold); color: var(--qh-black); font-weight: 700; font-size: 13px; padding: 9px 12px; border-radius: 10px; }
.qh-empty-first { text-align: center; padding: 28px 12px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.qh-empty-first h2 { font-family: var(--qh-display); font-size: 22px; margin: 0; }
.qh-empty-first p { margin: 0; color: var(--qh-muted); max-width: 32ch; }