/* ==========================================================================
   HK Registration · Trade Hub — CHROME v2 (recetas de componentes)
   Fase 0 · 2026-07-05 · consume site/shared/tokens.css. NO declara colores
   nuevos: todo aquí referencia variables de tokens.css.
   --------------------------------------------------------------------------
   Alcance de esta fase: estas recetas NACEN acá. Los módulos existentes
   (home, aranceles, marcas, herramientas) las adoptan en sus fases propias
   (Fase 1 en adelante); nada de lo que sigue se referencia todavía desde
   páginas en producción. Ver especimen.html para verlas todas en vivo.
   --------------------------------------------------------------------------
   REGLA D4 (dosificación del soft-UI): las recetas .neo-* (relieve
   neumórfico) son para CHROME — header, footer, tiles de navegación,
   botones, chips, inputs, FAQ. Las recetas .data-* (planas) son para
   TABLAS, MAPA, LISTADOS DENSOS y cualquier superficie con fotografía:
   ahí el relieve queda prohibido porque compite con el dato.
   ========================================================================== */

/* ==========================================================================
   KICKER NUMERADO (secciones editoriales, patrón "02 · Nosotros")
   ========================================================================== */
.hkr-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:600; line-height:1;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-on);
}
[data-world="light"] .hkr-kicker,
:root:not([data-world]) .hkr-kicker{ color:var(--red) }
.hkr-kicker__n{
  font-family:var(--font-mono); font-weight:600; color:var(--ink-soft);
  opacity:.7;
}
.deep-zone .hkr-kicker{ color:var(--gold) }

/* ==========================================================================
   HUB-RIBBON (cinta de retorno) — vive DENTRO de .hkr-header--slim (columna
   central del grid de 3 columnas), centrado real en el header.
   --------------------------------------------------------------------------
   Portal v4 (08-jul-2026): cápsula neumórfica con ícono en anillo-gradiente,
   a pedido de Diego (spec exacta provista). --th-accent/--th-accent-deep son
   una EXCEPCIÓN deliberada a la política de derivados del manual (§DESIGN.md
   "Política de derivados"): no derivan de los 8 colores oficiales, es un
   acento nuevo aceptado a propósito para este componente. --th-shadow-d/-l
   sí son el par neumórfico estándar del sistema, derivado de HKR Deep Blue
   (mismo fondo que .hkr-header--slim) igual que --sh-d/--sh-l derivan de
   Navy en el mundo oscuro. Tipografía: Poppins (var(--font-ui)), no Inter,
   para no sumar una segunda familia al sitio. Easing: var(--ease) del
   sistema, no uno nuevo. */
.hub-ribbon{
  --th-shadow-d: #030f15;
  --th-shadow-l: #0d3b53;
  --th-accent: #2bd9d9;
  --th-accent-deep: #0f5566;

  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-ui); font-size:14px; font-weight:600; color:var(--mist-soft);
  padding:11px 22px; border-radius:var(--r-pill);
  background:var(--hkr-deep-blue); white-space:nowrap;
  box-shadow:9px 9px 18px var(--th-shadow-d), -9px -9px 18px var(--th-shadow-l);
  transition:box-shadow .35s var(--ease), color .35s var(--ease);
}
.hub-ribbon:hover{ color:var(--th-accent) }
.hub-ribbon:active{
  box-shadow:inset 6px 6px 12px var(--th-shadow-d), inset -6px -6px 12px var(--th-shadow-l);
}
.hub-ribbon:focus-visible{ outline:none; box-shadow:var(--focus-shadow) }
.hub-ribbon strong{ font-weight:800; color:#fff }

/* Cápsula del ícono: anillo-gradiente teal (truco de doble background,
   clip a border-box/padding-box) + resplandor de esquina en el pseudo. */
.hub-ribbon__ico{
  display:grid; place-items:center;
  width:44px; height:26px; flex:none;
  background:var(--hkr-deep-blue);
  border-radius:13px; border:1px solid transparent;
  background-image:
    linear-gradient(var(--hkr-deep-blue),var(--hkr-deep-blue)),
    linear-gradient(135deg,var(--th-accent-deep),var(--th-accent));
  background-origin:border-box;
  background-clip:padding-box,border-box;
  box-shadow:4px 4px 9px var(--th-shadow-d), -4px -4px 9px var(--th-shadow-l);
  position:relative; overflow:hidden;
  transition:box-shadow .35s var(--ease);
}
.hub-ribbon__ico::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,transparent 60%,rgba(43,217,217,.22) 100%);
  opacity:.4; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.hub-ribbon__ico svg{
  width:26px; height:10px; flex:none;
  color:var(--th-accent); position:relative; z-index:1;
  transition:transform .35s var(--ease), filter .35s var(--ease);
}
.hub-ribbon:hover .hub-ribbon__ico{
  box-shadow:4px 4px 9px var(--th-shadow-d), -4px -4px 9px var(--th-shadow-l),
             0 0 20px -3px rgba(43,217,217,.6);
}
.hub-ribbon:hover .hub-ribbon__ico::before{ opacity:1 }
.hub-ribbon:hover .hub-ribbon__ico svg{
  transform:translateX(-1.5px) scale(1.04);
  filter:drop-shadow(0 0 5px rgba(43,217,217,.7));
}
.hub-ribbon:active .hub-ribbon__ico svg{ transform:translateX(-3px) }
.hub-ribbon:active .hub-ribbon__ico{
  box-shadow:inset 3px 3px 6px var(--th-shadow-d), inset -3px -3px 6px var(--th-shadow-l);
}

/* Bajo 900px la barra ya está justa (buscador/tag + marca): la cinta colapsa
   a solo la cápsula del ícono. El nombre accesible lo lleva el aria-label
   del <a>. */
@media (max-width:900px){
  .hub-ribbon__label{ display:none }
  .hub-ribbon{ padding:8px; gap:0 }
}

/* ==========================================================================
   HEADER — dos densidades, mismo ADN
   ========================================================================== */

/* Densidad "hub" (home, portadas de módulo): pill dock flotante que
   muta de mundo con transición .4s. */
.hkr-header-dock{
  position:sticky; top:16px; z-index:60;
  display:flex; justify-content:center;
  padding:0 16px;
}
.hkr-header{
  display:flex; align-items:center; gap:14px;
  width:min(var(--container), 100%);
  padding:12px 14px; border-radius:var(--r-pill);
  background:var(--surface); box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-world), background var(--t-world), color var(--t-world);
}
.hkr-header__logo{ height:32px; width:auto; display:block; padding-left:6px }
.hkr-header__nav{ display:flex; gap:6px; margin-left:auto }
.hkr-nav-link{
  padding:11px 18px; border-radius:var(--r-md); white-space:nowrap;
  font-size:14px; font-weight:500; color:var(--ink-soft);
  transition:box-shadow var(--t), color var(--t);
}
.hkr-nav-link:hover{ color:var(--ink); box-shadow:var(--shadow-sm) }
.hkr-nav-link.is-active{ color:var(--red); box-shadow:var(--shadow-pressed) }
.hkr-nav-link:focus-visible{ outline:none; color:var(--ink); box-shadow:var(--shadow-pressed), var(--focus-shadow) }
.hkr-header__actions{ display:flex; align-items:center; gap:10px }

/* Densidad "datos" (páginas de capítulo, herramientas largas): barra slim
   sticky, mismos radios/tintas/easing, pero sin el dock flotante: las
   tablas necesitan el viewport completo. */
.hkr-header--slim{
  position:sticky; top:0; z-index:60;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:12px;
  padding:0 var(--pad); height:58px;
  background:var(--hkr-deep-blue); color:var(--hkr-off-white);
  border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0; box-shadow:none; /* superficie plana: es chrome sobre franja fija, no card */
}
.hkr-header--slim .hkr-nav-link{ color:var(--mist-soft) }
.hkr-header--slim .hkr-nav-link:hover{ color:#fff; box-shadow:none; background:rgba(255,255,255,.08) }
.hkr-header--slim .hkr-nav-link.is-active{ color:var(--red-on); box-shadow:none; background:rgba(255,255,255,.08) }

.hkr-burger{
  display:none; width:44px; height:44px; border:0; border-radius:var(--r-md);
  background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hkr-burger span{ width:18px; height:2px; border-radius:2px; background:var(--ink-soft) }
.hkr-burger:focus-visible{ outline:none; box-shadow:var(--shadow-sm), var(--focus-shadow) }
@media (max-width:1060px){
  .hkr-header__nav{ display:none }
  .hkr-burger{ display:flex }
}

/* ==========================================================================
   DRAWER MÓVIL (accesible: scrim + panel + focus management por ui.js)
   ========================================================================== */
.hkr-drawer{ position:fixed; inset:0; z-index:150; display:none }
.hkr-drawer.is-open{ display:block }
.hkr-drawer__scrim{
  position:absolute; inset:0; background:rgba(5,10,18,.55);
  opacity:0; transition:opacity var(--t);
}
.hkr-drawer.is-open .hkr-drawer__scrim{ opacity:1 }
.hkr-drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw, 360px);
  background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-card-hover);
  padding:20px; display:flex; flex-direction:column; gap:20px;
  transform:translateX(12px); opacity:0;
  transition:transform var(--t) var(--ease), opacity var(--t);
}
.hkr-drawer.is-open .hkr-drawer__panel{ transform:none; opacity:1 }
.hkr-drawer__top{ display:flex; align-items:center; justify-content:space-between }
.hkr-drawer__close{
  width:38px; height:38px; border:0; border-radius:var(--r-md);
  background:var(--bg); box-shadow:var(--shadow-sm); cursor:pointer; font-size:20px; color:var(--ink-soft);
}
.hkr-drawer__nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px }
.hkr-drawer__nav a{
  display:block; padding:13px 14px; border-radius:var(--r-md); font-size:15px; font-weight:500;
  color:var(--ink); transition:background var(--t-fast);
}
.hkr-drawer__nav a:hover{ background:var(--bg) }

/* ==========================================================================
   NEO-CARD (chrome extruido) + NEO-SQUIRCLE (ícono, la "firma": inset que
   se extruye al hover de la card)
   ========================================================================== */
.neo-card{
  background:var(--surface);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:clamp(22px, 2.4vw, 28px);
  transition:box-shadow var(--t), transform var(--t);
}
.neo-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-hover) }
.neo-card__title{ margin:16px 0 6px; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink) }
.neo-card__line{ margin:0; font-size:14px; line-height:1.5; color:var(--ink-soft); max-width:46ch }

.neo-squircle{
  --size:64px;
  width:var(--size); height:var(--size);
  border-radius:var(--r-squircle);
  display:grid; place-items:center;
  background:var(--bg);
  box-shadow:var(--shadow-inset);
  color:var(--navy);
  transition:box-shadow var(--t), color var(--t);
}
.neo-squircle svg{ width:26px; height:26px }
.neo-squircle--red{ color:var(--red) }
.neo-squircle--sm{ --size:44px }
.neo-squircle--sm svg{ width:22px; height:22px }
.neo-card:hover .neo-squircle{ box-shadow:var(--shadow-sm) }

/* ==========================================================================
   NEO-CHIP (stat hundido) / NEO-CHIP-INLINE
   ========================================================================== */
.neo-chip{
  display:inline-flex; flex-direction:column; gap:4px;
  padding:14px 20px; border-radius:var(--r-md);
  background:var(--bg); box-shadow:var(--shadow-inset);
}
.neo-chip__num{ font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--ink) }
.neo-chip__num--red{ color:var(--red) }
.neo-chip__label{ font-size:12.5px; font-weight:500; line-height:1.2; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft) }
.neo-chip-inline{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:var(--r-md);
  background:var(--bg); box-shadow:var(--shadow-inset);
  font-size:14px; font-weight:600; color:var(--ink);
}
.neo-chip-inline b{ color:var(--red); font-weight:700; font-variant-numeric:tabular-nums }

/* ==========================================================================
   NEO-BTN (primario / secundario / ghost)
   ========================================================================== */
.neo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:14px; font-weight:700; line-height:1;
  border:0; cursor:pointer; white-space:nowrap;
  padding:13px 24px; border-radius:var(--r-md);
  transition:transform .18s var(--ease), box-shadow var(--t), color var(--t), background var(--t);
}
.neo-btn:focus-visible{ outline:none }
.neo-btn svg{ width:18px; height:18px; flex:none }

.neo-btn--primary{ background:var(--red); color:var(--hkr-off-white); box-shadow:var(--shadow-cta) }
.neo-btn--primary:hover{ background:var(--red-hover); transform:translateY(-1px) }
.neo-btn--primary:active{ transform:translateY(0); box-shadow:inset 3px 3px 8px rgba(0,0,0,.34) }
.neo-btn--primary:focus-visible{ box-shadow:var(--shadow-cta), var(--focus-shadow) }

.neo-btn--secondary{ background:transparent; color:var(--red); border:1.5px solid var(--red) }
.neo-btn--secondary:hover{ background:rgba(202,17,24,.06) }
.neo-btn--secondary:focus-visible{ box-shadow:var(--focus-shadow) }

.neo-btn--surface{ background:var(--bg); color:var(--ink); box-shadow:var(--shadow-sm) }
.neo-btn--surface:hover{ transform:translateY(-1px); box-shadow:var(--shadow-card) }
.neo-btn--surface:active{ transform:translateY(0); box-shadow:var(--shadow-pressed) }
.neo-btn--surface:focus-visible{ box-shadow:var(--shadow-sm), var(--focus-shadow) }

.neo-btn--ghost{ background:transparent; color:var(--ink); box-shadow:none; padding:10px 6px; font-weight:600 }
.neo-btn--ghost:hover{ color:var(--red); gap:12px }
.neo-btn--ghost:focus-visible{ border-radius:var(--r-md); box-shadow:var(--focus-shadow) }
.neo-btn--ghost .arw{ transition:transform var(--t) }
.neo-btn--ghost:hover .arw{ transform:translateX(3px) }

/* ==========================================================================
   NEO-INPUT / NEO-TEXTAREA (inset)
   ========================================================================== */
.neo-input, .neo-textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--bg); border:0; border-radius:var(--r-sm);
  padding:12px 14px; box-shadow:var(--shadow-inset);
  transition:box-shadow var(--t);
}
.neo-input::placeholder, .neo-textarea::placeholder{ color:var(--ink-soft) }
.neo-textarea{ resize:vertical; min-height:104px; line-height:1.55 }
.neo-input:focus-visible, .neo-textarea:focus-visible{ outline:none; box-shadow:var(--shadow-inset), var(--focus-shadow) }
.neo-field{ display:flex; flex-direction:column; gap:8px }
.neo-field label{ font-size:13px; font-weight:600; color:var(--ink-soft) }

/* ==========================================================================
   NEO-DETAILS (FAQ / disclosure): extruida, abierta = inset
   ========================================================================== */
.neo-details{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-card); transition:box-shadow var(--t) }
.neo-details[open]{ box-shadow:var(--shadow-inset) }
.neo-details summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; font-size:16px; font-weight:600; color:var(--ink);
  border-radius:var(--r-lg);
}
.neo-details summary::-webkit-details-marker{ display:none }
.neo-details summary:focus-visible{ outline:none; box-shadow:var(--focus-shadow) }
.neo-details summary svg{ width:20px; height:20px; flex:none; color:var(--ink-soft); transition:transform var(--t) }
.neo-details[open] summary svg{ transform:rotate(180deg) }
.neo-details__body{ padding:0 22px 20px; margin:0; color:var(--ink-soft); font-size:15px; line-height:1.65; max-width:62ch }

/* ==========================================================================
   NEO-DISC (stepper: disco extruido + anillo interior hundido + número)
   ========================================================================== */
.neo-disc{
  --size:96px; position:relative; width:var(--size); height:var(--size);
  border-radius:50%; display:grid; place-items:center; background:var(--surface); box-shadow:var(--shadow-card);
}
.neo-disc::before{ content:""; position:absolute; inset:11px; border-radius:50%; box-shadow:var(--shadow-pressed) }
.neo-disc span{ position:relative; font-size:28px; font-weight:700; letter-spacing:-.02em; color:var(--ink) }
.neo-disc--red span{ color:var(--red) }

/* ==========================================================================
   SEAMS (transición entre mundos, difuminado en lugar de corte duro)
   ========================================================================== */
.seam{ height:clamp(64px, 9vw, 116px); border:0 }
.seam--dark-to-light{ background:linear-gradient(180deg, var(--hkr-navy), var(--hkr-light-gray)) }
.seam--light-to-dark{ background:linear-gradient(180deg, var(--hkr-light-gray), var(--hkr-navy)) }
.seam--deep-to-dark{ background:linear-gradient(180deg, var(--deep), var(--hkr-navy)) }

/* ==========================================================================
   FOOTER EXTRUIDO (un solo contenedor, bookend con el hero)
   ========================================================================== */
.neo-footer{
  width:min(var(--container), 100%);
  background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:clamp(32px, 4vw, 52px);
}

/* ==========================================================================
   DATA-* — superficies PLANAS para tablas, mapa, listados densos.
   Regla D4: nunca box-shadow doble aquí. Borde fino derivado + fondo plano.
   ========================================================================== */
.data-surface{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.data-table{ width:100%; border-collapse:collapse; font-size:14px }
.data-table th{
  text-align:left; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); padding:12px 14px; border-bottom:1px solid var(--line); background:var(--bg);
}
.data-table td{ padding:12px 14px; border-bottom:1px solid var(--line-soft); color:var(--ink) }
.data-table .hs{ font-family:var(--font-mono); font-weight:600; color:var(--navy) }

/* Badges de tabla (país, estado): fondo tintado + borde completo, NUNCA
   border-left de acento (ban vigente). */
.data-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:var(--r-xs);
  border:1px solid var(--line);
  background:var(--bg); color:var(--ink-soft);
}
.data-badge--latam{ background:var(--bad-bg); color:var(--hkr-dark-red); border-color:rgba(201,45,48,.25) }
.data-badge--ok{ background:var(--ok-bg); color:var(--ok); border-color:rgba(47,111,78,.25) }
.data-badge--warn{ background:var(--warn-bg); color:var(--warn); border-color:rgba(146,96,14,.25) }

/* Callout/nota de datos: fondo tintado + borde COMPLETO (nunca border-left) */
.data-note{
  display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-md);
  background:var(--warn-bg); border:1px solid rgba(146,96,14,.25); color:var(--warn);
  font-size:13.5px; line-height:1.55;
}
.data-note svg{ width:18px; height:18px; flex:none; margin-top:1px }

/* Tags/pills (manual: pill 9999px) */
.tag{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:600 }
.tag--red{ background:var(--red); color:var(--hkr-off-white) }
.tag--navy{ background:var(--navy); color:var(--hkr-off-white) }
.tag--gold{ background:var(--gold); color:var(--hkr-deep-blue) }

/* ==========================================================================
   TOOLTIP GLASS (excepción documentada A.5.2: glassmorphism puntual y con
   propósito, solo para el tooltip del mapa de clústers)
   ========================================================================== */
.tooltip-glass{
  background:rgba(8,37,52,.82);
  backdrop-filter:blur(8px) saturate(1.3);
  -webkit-backdrop-filter:blur(8px) saturate(1.3);
  color:var(--hkr-off-white);
  border-radius:var(--r-md);
  padding:10px 14px;
  font-size:13px;
  box-shadow:var(--sh-3);
}

/* ==========================================================================
   GRILLA RADIAL (patrón A.3: módulos alrededor del emblema, hereda del
   dashboard Documentos Entregables/SISTEMA/index.html)
   ========================================================================== */
.radial-grid{
  display:grid; width:100%; max-width:1040px; margin:0 auto; gap:var(--gap);
  grid-template-columns:repeat(3,1fr);
  grid-template-areas:"c1 c2 c3" "c4 logo c5" "c6 c7 c8";
  align-items:stretch;
}
.radial-grid__core{
  grid-area:logo; display:flex; align-items:center; justify-content:center;
}
.radial-grid__disc{
  --size:230px; position:relative; width:var(--size); height:var(--size); border-radius:50%;
  display:grid; place-items:center; background:var(--surface); box-shadow:var(--shadow-card-hover);
}
.radial-grid__disc::before{ content:""; position:absolute; inset:22px; border-radius:50%; box-shadow:var(--shadow-pressed) }
.radial-grid__disc img{ position:relative; width:56%; height:auto }
@media (max-width:820px){
  .radial-grid{ grid-template-columns:1fr 1fr; grid-template-areas:"logo logo" "c1 c2" "c3 c4" "c5 c6" "c7 c8" }
}
@media (max-width:520px){
  .radial-grid{ grid-template-columns:1fr; grid-template-areas:"logo" "c1" "c2" "c3" "c4" "c5" "c6" "c7" "c8" }
  .radial-grid__disc{ --size:180px }
}

/* ==========================================================================
   SCROLL-REVEAL (IntersectionObserver, gestionado por ui.js)
   ========================================================================== */
html.js [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
html.js [data-reveal].in{ opacity:1; transform:none }