/* ============================================================
   HK Registration · Trade Hub — Ferias (sistema v2)
   Fase 3 · 2026-07-05. Consume site/shared/tokens.css +
   site/shared/chrome.css DIRECTO. Solo estilos PROPIOS del
   módulo: lo compartido (header, hub-ribbon, neo-*, data-*)
   vive en chrome.css. Hermano gemelo de site/marcas/estilo.css.
   ------------------------------------------------------------
   Register: product (directorio de datos). Header "datos" (slim),
   igual criterio que Aranceles y Marcas. La portada/hero es zona
   de marca (data-world="dark" + data-surface="deep"): ahí SÍ va
   relieve de chrome (kicker, stats en neo-chip), nunca en las
   cards de datos del grid (D4: la ficha de feria es dato →
   superficie plana).
   ------------------------------------------------------------
   Eliminado del estilo viejo del módulo fuente (mapa de sustitución):
   --teal-accent #018075/#016b63, --gold #e8a200, emojis como icono
   (📅 📍 🌐 🗺️ ★ ✕ ×), lucide vía unpkg CDN (→ ../shared/sprite.svg),
   Poppins auto-declarada (→ tokens), gradientes fuera de manual.
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box }
body{ font-size:14px }

.i{ display:inline-block; vertical-align:middle }

/* ─────────────────────────  HUB-RIBBON  ─────────────────────────
   La receta vive en chrome.css: columna central del grid de .fr-header. */

/* ─────────────────────────  HEADER — densidad "datos" (slim)  ─────────────────────────
   La receta base (.hkr-header--slim) vive en chrome.css. Acá: marca propia + buscador. */
.fr-header{ height:auto; min-height:58px; gap:10px 16px; padding:10px var(--pad) }
.fr-header__brand{ display:flex; align-items:center; gap:10px; flex:none; min-width:0 }
.fr-header__brand img{ height:30px; width:30px; object-fit:contain; flex:none }
.fr-header__titles{ min-width:0 }
.fr-header__main{ font-size:13.5px; font-weight:700; color:var(--hkr-off-white); letter-spacing:-.005em; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fr-header__sub{ font-size:11px; font-weight:400; color:var(--mist-soft); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.fr-header__search{ position:relative; flex:1 1 220px; min-width:160px; max-width:340px; margin-left:auto }
.fr-header__search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--mist-soft); pointer-events:none }
.fr-header__search input{
  width:100%; font-family:inherit; font-size:12.5px; color:var(--hkr-off-white);
  padding:8px 12px 8px 34px; border:0; border-radius:var(--r-pill);
  background:rgba(255,255,255,.10); transition:background var(--t-fast), box-shadow var(--t-fast);
}
.fr-header__search input::placeholder{ color:var(--mist-soft) }
.fr-header__search input:focus-visible{ outline:none; background:rgba(255,255,255,.16); box-shadow:var(--focus-shadow) }

@media (max-width:720px){
  .fr-header{ padding:8px var(--pad) }
  .fr-header__sub{ display:none }
  .fr-header__search{ flex-basis:140px; min-width:120px }
}

main{ display:flex; flex-direction:column }

/* ─────────────────────────  PORTADA (cover, chrome — marca)  ─────────────────────────
   Zona de marca: superficie navy→deep con relieve permitido (es chrome, no dato). */
#portada{ padding:clamp(36px,5vw,56px) var(--pad) clamp(28px,4vw,40px) }
.fr-cover{ max-width:var(--container); margin:0 auto }
.fr-cover__tag{
  display:inline-flex; align-items:center; gap:6px; background:var(--red); color:var(--hkr-off-white); padding:5px 16px;
  border-radius:var(--r-pill); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px;
}
.fr-cover h1{ font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--hkr-off-white); max-width:26ch }
.fr-cover p{ font-size:14px; color:var(--mist-soft); margin-top:10px; max-width:58ch; line-height:1.55 }
.fr-cover__stats{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px }

/* ─────────────────────────  BARRA DE RUBROS  ───────────────────────── */
.fr-catbar{ max-width:var(--container); margin:0 auto; padding:var(--s-3) var(--pad) 0 }
.fr-catbar__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap }
.fr-catgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px }

.cat-tile{
  cursor:pointer; font-family:inherit; font-size:inherit; text-align:left; background:var(--surface);
  border:0; border-radius:var(--r-md); padding:12px 14px; display:flex; align-items:center; gap:12px;
  box-shadow:var(--shadow-sm); transition:box-shadow var(--t), transform var(--t);
}
.cat-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card) }
.cat-tile:focus-visible{ outline:none; box-shadow:var(--shadow-sm), var(--focus-shadow) }
.cat-tile.active{ box-shadow:var(--shadow-pressed) }
.ct-icon{ flex:none }
.cat-tile.active .ct-icon{ color:var(--red) }
.ct-text{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.ct-name{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.25 }
.ct-count{ font-size:10.5px; color:var(--ink-soft) }
.cat-tile.active .ct-count{ color:var(--red); font-weight:600 }

@media (max-width:640px){
  .fr-catgrid{ grid-template-columns:1fr }
  .fr-catgrid.is-open{ grid-template-columns:1fr }
}

/* ─────────────────────────  RESULTADOS  ───────────────────────── */
.results{ max-width:var(--container); margin:0 auto; width:100%; padding:var(--s-4) var(--pad) var(--s-5) }
.results-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:18px; flex-wrap:wrap }
.results-head h2{ font-size:21px; font-weight:700; color:var(--ink) }
.result-count{ font-size:13px; color:var(--ink-soft); margin-top:2px }
.result-count strong{ color:var(--ink) }
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.fr-select{ box-shadow:var(--shadow-inset); font-size:12.5px; padding:9px 12px; width:auto; cursor:pointer }
.clear-cat{ font-size:12.5px; padding:9px 16px }

/* ─────────────────────────  GRID + CARDS — superficie de DATOS (D4: plana)  ─────────────────────────
   La ficha de feria es dato: fondo plano + borde fino derivado, sin relieve doble. */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  cursor:pointer; display:flex; flex-direction:column; transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card) }
.card:active{ transform:scale(.99) }
.card:focus-visible{ outline:none; box-shadow:var(--focus-shadow) }
.card-top{ padding:15px 16px 12px; flex:1 }
.card-badges{ display:flex; align-items:center; gap:6px; margin-bottom:10px; flex-wrap:wrap }
.card-rank{ display:inline-flex; align-items:center; background:var(--navy); color:var(--hkr-off-white); font-size:11px; font-weight:700; border-radius:var(--r-xs); padding:2px 8px }
.card-rank.top3{ background:var(--red) }
.card-rank.norank{ background:var(--muted) }
/* píldora de fecha: próxima edición vigente (ok) / edición pasada (neutra) */
.card-when{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:var(--r-xs); border:1px solid var(--line); background:var(--bg); color:var(--ink-soft) }
.card-when svg{ width:11px; height:11px }
.card-when.upcoming{ background:var(--ok-bg); color:var(--ok); border-color:rgba(47,111,78,.25) }
.card h3{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; margin-bottom:8px }
.card .meta{ font-size:12px; color:var(--ink-soft); display:flex; flex-direction:column; gap:3px }
.card .meta svg{ width:12px; height:12px; margin-right:4px; vertical-align:-1px; color:var(--ink-soft) }
.card-tags{ padding:0 16px 12px; display:flex; gap:6px; flex-wrap:wrap }
.card-tags .tag{ font-size:10.5px; font-weight:600; padding:3px 10px; background:var(--bg); color:var(--ink-soft); border:1px solid var(--line) }
.card-foot{ border-top:1px solid var(--line); padding:9px 16px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-soft) }
.card-foot .loc{ display:inline-flex; align-items:center; gap:5px }
.card-foot .loc svg{ width:12px; height:12px }
.card-foot .rating{ display:inline-flex; align-items:center; gap:4px; color:var(--warn); font-weight:600; font-size:11.5px }
.card-foot .rating svg{ width:12px; height:12px }

/* ─────────────────────────  MODAL (ficha de feria) — superficie de DATOS  ───────────────────────── */
.modal-overlay{ position:fixed; inset:0; background:rgba(5,10,18,.55); backdrop-filter:blur(3px); z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto }
.modal-overlay[hidden]{ display:none }
.modal{ background:var(--surface); border-radius:var(--r-lg); max-width:760px; width:100%; position:relative; box-shadow:var(--sh-3); animation:fr-pop .18s var(--ease) }
@keyframes fr-pop{ from{ transform:scale(.96); opacity:0 } to{ transform:scale(1); opacity:1 } }
.modal-close{
  position:absolute; top:12px; right:14px; z-index:5; border:0; background:rgba(5,10,18,.42); width:34px; height:34px;
  border-radius:50%; cursor:pointer; color:#fff; display:grid; place-items:center; transition:background var(--t-fast);
}
.modal-close:hover{ background:rgba(5,10,18,.6) }
.modal-close:focus-visible{ outline:none; box-shadow:var(--focus-shadow) }

.m-hero{
  position:relative; background:radial-gradient(120% 150% at 82% 0%, var(--navy-glow), var(--hkr-navy) 55%, var(--hkr-deep-blue));
  color:var(--hkr-off-white); border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden;
}
.m-hero-text{ position:relative; z-index:1; padding:24px 28px }
.m-rank{ display:inline-flex; align-items:center; gap:6px; background:var(--red); color:var(--hkr-off-white); font-size:11px; font-weight:700; padding:3px 12px; border-radius:var(--r-pill); margin-bottom:14px }
.m-hero h2{ font-size:23px; font-weight:700; line-height:1.22 }
.m-hero .m-sub{ font-size:13px; color:var(--mist-soft); margin-top:8px; display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.m-hero .m-sub span{ display:inline-flex; align-items:center; gap:5px }
.m-hero .m-sub svg{ width:13px; height:13px; color:var(--red-on) }

.m-body{ padding:24px 28px 28px }
.m-section{ margin-bottom:22px }
.m-section:last-child{ margin-bottom:0 }
.m-section h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--red); margin-bottom:10px; font-weight:600 }
.m-desc{ font-size:13.5px; color:var(--ink); line-height:1.7 }

/* Fila de métricas (visitantes/expositores/valoración): superficie plana de datos */
.m-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px }
.m-stat{ flex:1 1 130px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px }
.m-stat .v{ font-size:20px; font-weight:700; color:var(--ink); line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums }
.m-stat .l{ font-size:11px; color:var(--ink-soft); margin-top:6px; text-transform:uppercase; letter-spacing:.05em }

.m-info{ display:grid; grid-template-columns:1fr; gap:0; font-size:13px }
.m-info .row{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--line-soft) }
.m-info .row:last-child{ border-bottom:0 }
.m-info .k{ color:var(--ink-soft); white-space:nowrap; display:inline-flex; align-items:center; gap:6px }
.m-info .k svg{ width:13px; height:13px; flex:none }
.m-info .v{ font-weight:500; text-align:right; color:var(--ink); word-break:break-word }

/* Chips de rubro / producto */
.chip-row{ display:flex; gap:7px; flex-wrap:wrap }
.chip-row .tag{ font-size:11.5px; font-weight:600; padding:5px 12px; background:var(--bg); color:var(--ink-soft); border:1px solid var(--line) }
.chip-row .tag-prod{ background:var(--surface); color:var(--ink-soft) }

/* Cross-links del ecosistema (feria → clústers / arancel) */
.m-links{ display:flex; flex-direction:column; gap:8px }
.m-link{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--bg); border:1px solid var(--line); color:var(--ink); text-decoration:none;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.m-link:hover{ border-color:var(--red); background:var(--surface) }
.m-link__ic{ flex:none; width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--navy) }
.m-link:hover .m-link__ic{ color:var(--red) }
.m-link__tx{ flex:1; min-width:0 }
.m-link__t{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.3 }
.m-link__d{ font-size:11.5px; color:var(--ink-soft); margin-top:1px }
.m-link__go{ flex:none; color:var(--ink-soft); transition:transform var(--t-fast), color var(--t-fast) }
.m-link:hover .m-link__go{ color:var(--red); transform:translateX(2px) }

.m-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px }

/* FAQs — usa neo-details del sistema, pero declaradas planas (superficie de datos) */
.faq{ border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:8px; overflow:hidden; background:var(--surface) }
.faq summary{ cursor:pointer; list-style:none; padding:12px 14px; font-size:13px; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:10px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--red); font-weight:700; font-size:16px; flex:none }
.faq[open] summary::after{ content:"–" }
.faq summary:focus-visible{ outline:none; box-shadow:var(--focus-shadow) }
.faq p{ padding:0 14px 13px; font-size:12.5px; color:var(--ink-soft); line-height:1.6 }

/* botones del modal */
.btn{ font-family:inherit; font-size:13px; font-weight:700; padding:12px 20px; border-radius:var(--r-md); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .18s var(--ease), background var(--t), box-shadow var(--t) }
.btn svg{ width:15px; height:15px; flex:none }
.btn:active{ transform:scale(.97) }
.btn-primary{ background:var(--red); color:var(--hkr-off-white); box-shadow:var(--shadow-cta); border:0 } .btn-primary:hover{ background:var(--red-hover) }
.btn-ghost{ background:var(--bg); color:var(--ink); border:0; box-shadow:var(--shadow-sm) } .btn-ghost:hover{ box-shadow:var(--shadow-card) }

/* ─────────────────────────  FOOTER (sobrio, del sistema)  ───────────────────────── */
.site-footer{
  text-align:center; font-size:11.5px; color:var(--ink-soft); padding:26px 24px; border-top:1px solid var(--line);
  background:var(--surface); margin-top:4px; line-height:1.6;
}
.site-footer img{ height:22px; vertical-align:middle; margin-right:6px; opacity:.75 }
.site-footer .gen{ font-size:11px; opacity:.75; margin-top:6px }
.fr-method{ margin-top:8px; font-size:11.5px; color:var(--muted); line-height:1.55; max-width:680px; margin-left:auto; margin-right:auto }
.empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); font-size:15px }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
  .card:hover,.cat-tile:hover{ transform:none }
}

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-width:640px){
  .results-head{ flex-direction:column; align-items:stretch }
  .filters{ width:100% }
  .filters select{ flex:1 1 100% }
  .grid{ grid-template-columns:1fr }
  .m-actions .btn{ flex:1 1 100%; justify-content:center }
  .modal-overlay{ padding:0 }
  .modal{ border-radius:0; min-height:100vh }
}