/* ============================================================
   HK Registration · Trade Hub — Marcas (sistema v2)
   Fase 2B · 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.
   ------------------------------------------------------------
   Register: product (directorio de datos). Header "datos" (slim),
   igual criterio que Aranceles. 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 marca es dato → superficie plana).
   ------------------------------------------------------------
   Eliminado en este re-skin (plan §B.3, mapa de sustitución):
   --teal-accent #018075/#016b63, --gold #e8a200, stats hero
   #ffc24d/#ff6b71/#6fc7e4, gradiente rojo→dorado del ranking top3,
   dependencia de unpkg lucide (reemplazada por ../shared/sprite.svg).
   ============================================================ */
*,*::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 .mk-header. */

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

.mk-header__search{ position:relative; flex:1 1 220px; min-width:160px; max-width:340px; margin-left:auto }
.mk-header__search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--mist-soft); pointer-events:none }
.mk-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);
}
.mk-header__search input::placeholder{ color:var(--mist-soft) }
.mk-header__search input:focus-visible{ outline:none; background:rgba(255,255,255,.16); box-shadow:var(--focus-shadow) }

@media (max-width:720px){
  .mk-header{ padding:8px var(--pad) }
  .mk-header__sub{ display:none }
  .mk-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) }
.mk-cover{ max-width:var(--container); margin:0 auto }
.mk-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;
}
.mk-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 }
.mk-cover p{ font-size:14px; color:var(--mist-soft); margin-top:10px; max-width:56ch; line-height:1.55 }
.mk-cover__stats{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px }

/* ─────────────────────────  BARRA DE CATEGORÍAS  ───────────────────────── */
.mk-catbar{ max-width:var(--container); margin:0 auto; padding:var(--s-3) var(--pad) 0 }
.mk-catbar__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap }
.mk-catgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,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){
  /* Fase 2C: con 1.258 categorías el grid ya no se oculta en mobile (dejaba la sección
     vacía); se muestran las 12 destacadas en 1 columna y "Ver todas" expande el resto. */
  .mk-catgrid{ grid-template-columns:1fr }
  .mk-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 }
.mk-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 marca es dato: fondo plano + borde fino derivado, sin relieve doble. */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,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); border-color:var(--line) }
.card:active{ transform:scale(.99) }
.card:focus-visible{ outline:none; box-shadow:var(--focus-shadow) }
.card-logo{ height:84px; background:var(--bg); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); overflow:hidden }
.card-logo img{ max-height:64px; max-width:86%; object-fit:contain; transition:transform var(--t) }
.card:hover .card-logo img{ transform:scale(1.06) }
.card-logo:empty::after{ content:attr(data-ini); font-size:30px; font-weight:700; color:var(--muted) }
.card-top{ padding:14px 16px 10px; flex:1 }
.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; margin-bottom:8px }
.card-rank.top3{ background:var(--red) }
.card-rank.norank{ background:var(--muted) }
.card h3{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; margin-bottom:6px }
.card .meta{ font-size:12px; color:var(--ink-soft); display:flex; flex-direction:column; gap:2px }
.card .meta svg{ width:12px; height:12px; margin-right:3px; vertical-align:-1px; color:var(--ink-soft) }
.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 .webdot{ color:var(--red); font-weight:500; font-size:11.5px; display:inline-flex; align-items:center; gap:4px }
.card-foot .webdot svg{ width:12px; height:12px }

/* ─────────────────────────  MODAL (ficha de marca) — 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:mk-pop .18s var(--ease) }
@keyframes mk-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; min-height:150px;
}
.m-banner{ position:absolute; inset:0; background-size:cover; background-position:center }
.m-hero-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,37,52,.55), rgba(8,37,52,.9)) }
.m-hero:not(.has-banner) .m-hero-shade{ background:transparent }
.m-hero-text{ position:relative; z-index:1; padding:22px 28px }
.m-rank{ display:inline-flex; align-items:center; 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-logo-wrap{ display:flex; align-items:center; gap:16px }
.m-logo{ height:56px; max-width:150px; object-fit:contain; background:var(--hkr-off-white); border-radius:var(--r-sm); padding:7px 11px; flex-shrink:0; box-shadow:var(--sh-2) }
.m-id{ min-width:0 }
.m-hero h2{ font-size:23px; font-weight:700; line-height:1.2 }
.m-hero .m-sub{ font-size:13px; color:var(--mist-soft); margin-top:3px }
.m-hero .m-sub2{ font-size:12.5px; color:var(--mist-soft); margin-top:4px; font-weight:300 }

.m-body{ padding:24px 28px 28px }
.m-section{ margin-bottom:22px }
.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 }
.m-desc.small{ font-size:12.5px; color:var(--ink-soft); line-height:1.6 }
.m-info{ display:grid; grid-template-columns:1fr; gap:0; font-size:13px }
.m-info.two{ grid-template-columns:1fr 1fr; gap:0 26px }
.m-info .row{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--line-soft) }
.m-info .k{ color:var(--ink-soft); white-space:nowrap; display:inline-flex; align-items:center; gap:5px }
.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 }
.m-info .v a{ color:var(--red); text-decoration:none } .m-info .v a:hover{ text-decoration:underline }
.m-info .v-pending{ color:var(--ink-soft); font-style:italic; font-weight:400 }
.m-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px }

/* botones del modal: heredan .neo-btn del sistema */
.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: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 }
.empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); font-size:15px }

/* ── Estados de carga (shard / ficha bajo demanda, Fase 2C) ── */
.grid-loading,.m-loading{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:56px 20px; color:var(--ink-soft); font-size:14px; text-align:center }
.m-loading{ min-height:220px }
.spin{ width:30px; height:30px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--red); animation:mk-spin .8s linear infinite }
@keyframes mk-spin{ to{ transform:rotate(360deg) } }
.mk-method{ margin-top:8px; font-size:11.5px; color:var(--muted); line-height:1.55; max-width:640px }

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

/* ─────────────────────────  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-info.two{ 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 }
}