/* ============================================================
   HK Registration · Trade Hub — Aranceles (sistema v2)
   Fase 2A · 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 (datos de trabajo). Header "datos" (slim),
   sin dock flotante — la tabla necesita el viewport completo.
   Regla D4: la tabla arancelaria es SUPERFICIE DE DATOS: fondo
   plano + borde fino, relieve neumórfico PROHIBIDO. El chrome
   (header, portada, tabs) sí puede usar recetas .neo-*.
   ============================================================ */
*,*::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 .ar-header. */

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

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

.ar-tabs{
  display:flex; gap:2px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
  background:var(--hkr-deep-blue); border-top:1px solid rgba(255,255,255,.08);
  position:sticky; top:58px; z-index:59; padding:0 calc(var(--pad) - 6px);
}
.ar-tabs::-webkit-scrollbar{ display:none }
.ar-tabs a{
  color:var(--mist-soft); font-size:12px; font-weight:500; white-space:nowrap;
  padding:10px 14px; border-bottom:2px solid transparent; transition:color var(--t-fast), border-color var(--t-fast);
}
.ar-tabs a:hover{ color:var(--hkr-off-white) }
.ar-tabs a.active{ color:var(--hkr-off-white); border-bottom-color:var(--red) }
.ar-tabs a:focus-visible{ outline:none; box-shadow:var(--focus-shadow) }

/* búsqueda del header cuando el capítulo ya tiene poco espacio: colapsa a icono */
@media (max-width:720px){
  .ar-header{ padding:8px var(--pad) }
  .ar-header__sub{ display:none }
  .ar-header__search{ flex-basis:140px; min-width:120px }
}

/* ─────────────────────────  MAIN + BREADCRUMB  ───────────────────────── */
main{ max-width:var(--container); margin:0 auto; padding:var(--s-3) var(--pad) var(--s-5); display:flex; flex-direction:column; gap:var(--s-3) }
.breadcrumb{ font-size:12px; color:var(--ink-soft) }
.breadcrumb a{ color:var(--navy); font-weight:500 }
.breadcrumb a:hover{ text-decoration:underline }

/* ─────────────────────────  PORTADA (cover, chrome — marca)  ─────────────────────────
   Zona de marca: superficie navy→deep con relieve permitido (es chrome, no dato). */
.cover-box{
  text-align:center; padding:clamp(40px,6vw,64px) 28px; border-radius:var(--r-lg); position:relative; overflow:hidden;
  background:radial-gradient(120% 150% at 82% 0%, var(--navy-glow), var(--hkr-navy) 55%, var(--hkr-deep-blue));
  color:var(--hkr-off-white); box-shadow:var(--sh-3);
}
.cover-box .bauhinia-bg{ position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:280px; opacity:.05 }
.cover-box>*{ position:relative }
.cover-box .annex-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:18px;
}
.cover-box h2{ font-size:clamp(15px,1.8vw,17px); font-weight:400; color:var(--mist-soft); margin-bottom:4px }
.cover-box h1{ font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.02em; margin-bottom:10px; line-height:1.2 }
.cover-box p{ font-size:13px; color:var(--mist-soft); margin-top:0 }
.cover-box .cover-meta{ margin-top:18px; font-size:12px; color:var(--mist-soft); line-height:1.7 }
.cover-box .cover-meta b{ color:var(--hkr-off-white); font-weight:700 }

/* ─────────────────────────  CARD DE AYUDA (buscador)  ───────────────────────── */
.help-card{
  display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:18px 22px;
}
.help-card .neo-squircle{ flex:none }
.help-card__title{ font-size:14px; font-weight:600; color:var(--ink); margin:0 0 3px }
.help-card__line{ font-size:12.5px; color:var(--ink-soft); margin:0 }
.help-card__line code{ font-family:var(--font-mono); background:var(--bg); padding:1px 6px; border-radius:var(--r-xs); font-size:11.5px }

/* ─────────────────────────  ÍNDICE DE SECCIONES/CAPÍTULOS (home del módulo)  ───────────────────────── */
.section-grid{ display:flex; flex-direction:column; gap:14px }
.section-block{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden }
.section-block .sec-title{
  background:var(--navy); color:var(--hkr-off-white); padding:12px 20px; font-size:13px; font-weight:600;
  display:flex; align-items:baseline; gap:10px;
}
.section-block .sec-title .sec-rn{ background:var(--red); border-radius:var(--r-xs); padding:2px 10px; font-size:11px; font-weight:700; flex:none }
.chapter-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1px; background:var(--line) }
.chapter-list a{
  background:var(--surface); padding:11px 18px; color:var(--ink); display:flex; align-items:baseline; gap:10px;
  font-size:12.5px; transition:background var(--t-fast);
}
.chapter-list a:hover{ background:var(--bg) }
.chapter-list a:focus-visible{ outline:none; box-shadow:var(--focus-shadow) }
.chapter-list a .ch-rn{ font-family:var(--font-mono); font-weight:700; color:var(--red); flex:none; min-width:24px }
.chapter-list a .ch-tt{ color:var(--ink); line-height:1.4 }
.chapter-list a .ch-ct{ margin-left:auto; color:var(--ink-soft); font-size:10.5px; flex:none; display:inline-flex; align-items:center; gap:4px }

/* punto de estado de traducción (reemplaza el inline style repetido) */
.tdot{ display:inline-block; width:7px; height:7px; border-radius:50%; flex:none }
.tdot--done{ background:var(--ok) }
.tdot--partial{ background:var(--warn) }
.tdot--pending{ background:var(--bad) }

/* ─────────────────────────  TLC / TABLA DE PAÍSES (portada)  ───────────────────────── */
.fta-card{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden }
.fta-card__head{ display:flex; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; color:var(--ink) }
.fta-card__body{ padding:18px 22px }
.fta-card__note{ font-size:12px; color:var(--ink-soft); margin-bottom:14px; line-height:1.6 }
.fta-legend{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:6px }
.fta-legend__item{
  display:flex; align-items:center; gap:8px; font-size:11.5px; padding:6px 10px; border-radius:var(--r-xs);
  border:1px solid var(--line); background:var(--bg); color:var(--ink-soft);
}
.fta-legend__item .data-badge{ margin:0 }
.fta-card__more{ margin-top:14px; font-size:12.5px }
.fta-card__more a{ color:var(--red); font-weight:600 }
.fta-card__more a:hover{ text-decoration:underline }

/* ─────────────────────────  PROSE (reglas.html)  ───────────────────────── */
.prose{ line-height:1.75; font-size:14px }
.prose h3{
  color:var(--red); font-size:15px; font-weight:700; margin:28px 0 10px; padding-bottom:5px;
  border-bottom:2px solid var(--red); display:inline-block;
}
.prose h4{ color:var(--navy); font-size:13.5px; font-weight:700; margin:20px 0 8px }
.prose p{ margin-bottom:11px; color:var(--ink) }
.prose ol, .prose ul{ margin:8px 0 12px 22px }
.prose li{ margin-bottom:5px; color:var(--ink) }
.prose .indent-1{ padding-left:20px }
.prose .indent-2{ padding-left:40px }

/* callout de notas: fondo tintado + borde COMPLETO (ban: nunca border-left) */
.prose .nota{
  display:flex; gap:10px; background:var(--warn-bg); border:1px solid rgba(146,96,14,.25); color:var(--warn);
  padding:12px 16px; margin:14px 0; border-radius:var(--r-md); font-size:12.5px; line-height:1.6;
}
.prose .nota svg{ flex:none; margin-top:2px; width:16px; height:16px }

/* reglas generales de clasificación */
.rule-block{ display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line) }
.rule-block:first-of-type{ border-top:0; padding-top:6px }
.rule-num{
  flex:none; width:76px; font-size:12px; font-weight:700; color:var(--hkr-off-white); background:var(--navy);
  border-radius:var(--r-sm); padding:5px 0; text-align:center; height:fit-content;
}
.rule-body p{ font-size:13.5px; margin-bottom:8px }
.rule-body p.indent-1{ padding-left:18px }

/* tabla de acuerdos TLC (reglas.html) — receta .data-table de chrome.css */
.fta-table th:nth-child(1){ width:44px }
.fta-table th:nth-child(4){ width:110px }
.fta-table th:nth-child(5){ width:70px; text-align:center }
.fta-table td:nth-child(5){ text-align:center }

/* ─────────────────────────  NOTAS DEL CAPÍTULO (collapsible)  ───────────────────────── */
.chapter-notes-box{ margin-bottom:2px }
.chapter-notes-box>summary{
  cursor:pointer; font-size:12.5px; font-weight:600; color:var(--navy); list-style:none; user-select:none;
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
  transition:background var(--t-fast);
}
.chapter-notes-box>summary:hover{ background:var(--line-soft) }
.chapter-notes-box>summary::-webkit-details-marker{ display:none }
.chapter-notes-box>summary svg{ flex:none; color:var(--ink-soft); transition:transform var(--t) }
.chapter-notes-box[open]>summary{ border-radius:var(--r-md) var(--r-md) 0 0 }
.chapter-notes-box[open]>summary svg{ transform:rotate(180deg) }
.chapter-notes-box .section-notes{ border-top:0; border-radius:0 0 var(--r-md) var(--r-md); margin-top:0 }

.section-notes{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 20px; margin-bottom:2px }
.section-notes h4{ color:var(--navy); font-size:13px; font-weight:700; margin-bottom:8px }
.section-notes p, .section-notes li{ font-size:12px; color:var(--ink-soft) }
.section-notes ul{ margin-left:18px; margin-top:4px }
.section-notes p:last-child{ margin-bottom:0 }

/* ─────────────────────────  TABLA ARANCELARIA — superficie de DATOS (D4: plana)  ─────────────────────────
   .data-surface / .data-table nacen en chrome.css (fondo plano + borde fino).
   Acá: las columnas y celdas específicas de la tabla del arancel. */
.table-wrapper{ border:1px solid var(--line); border-radius:var(--r-lg); overflow-x:auto }
table.tariff{ width:100%; border-collapse:collapse; font-size:12.5px; background:var(--surface) }
/* offset sticky derivado de variables (no píxel fijo): --ar-chrome-h la fija
   ar-sticky.js midiendo el header+tabs reales en runtime, con fallback estático. */
table.tariff thead tr{ background:var(--hkr-deep-blue); position:sticky; top:var(--ar-chrome-h, 98px); z-index:40 }
table.tariff thead th{
  padding:11px 14px; text-align:left; font-weight:600; font-size:11px; letter-spacing:.02em; color:var(--mist-soft);
  white-space:nowrap; border-right:1px solid rgba(255,255,255,.10);
}
table.tariff thead th:last-child{ border-right:none }
table.tariff thead th.rate-col{ text-align:center; min-width:64px }
table.tariff thead th.conv-col{ min-width:280px }
table.tariff thead th.desc-col{ min-width:280px }

table.tariff tbody tr{ border-bottom:1px solid var(--line-soft) }
table.tariff tbody tr:hover td{ background:var(--bg) }
table.tariff tbody td{ padding:8px 14px; vertical-align:top }

td.seq{ text-align:center; color:var(--ink-soft); font-size:11px; min-width:34px; white-space:nowrap }
td.hs-code{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--navy); white-space:nowrap }
td.desc{ color:var(--ink); line-height:1.6 }
td.desc .zh{ color:var(--muted); font-size:11px } /* chino sin traducir: visible pero atenuado, honesto */
td.rate{ text-align:center; vertical-align:middle }
td.nmf{ font-weight:600; color:var(--navy) }
td.ord{ font-weight:600; color:var(--red) }
td.pref{ font-size:11px }
td.conv{ text-align:left; vertical-align:top }

.rate-row{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:4px; margin-bottom:4px }
.rate-row:last-child{ margin-bottom:0 }
.rate-pct{
  background:var(--bg); color:var(--navy); font-weight:700; font-size:11px; font-family:var(--font-mono);
  padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap; flex:none; border:1px solid var(--line);
  order:-2; /* la tasa SIEMPRE encabeza su fila: antes que LATAM (order:-1) y el resto (0). Fix revisor F2A-1 */
}

/* filas separadoras de partida y sub-encabezado: superficie de dato, sin relieve */
tr.partida-sep td{
  background:var(--navy); color:var(--hkr-off-white); font-weight:600; font-size:12px; padding:9px 14px; letter-spacing:.01em; border-bottom:none;
}
tr.partida-sep .pcode{ background:rgba(255,255,255,.16); padding:2px 9px; border-radius:var(--r-xs); margin-right:8px; font-family:var(--font-mono) }
tr.sub-heading td{ background:var(--bg); color:var(--navy); font-weight:500; font-style:italic; padding:6px 14px; font-size:12px }
tr.sub-heading .lvl1{ padding-left:0 }
tr.sub-heading .lvl2{ padding-left:18px }
tr.sub-heading .lvl3{ padding-left:34px }
tr.sub-heading .lvl4{ padding-left:50px }

/* ─────────────────────────  BADGES DE PAÍS — LATAM-first (D9)  ─────────────────────────
   Política D9: familia roja/dorada para LATAM (destacado), resto neutral derivado.
   El .rate-row pasa a flex con order: LATAM siempre primero visualmente vía
   [data-latam] + CSS order, sin tocar el HTML generado (lo reordena app.js). */
.badge{
  display:inline-flex; align-items:center; font-size:10px; font-weight:600; line-height:1.3;
  padding:2px 7px; border-radius:var(--r-xs); border:1px solid transparent; white-space:nowrap; cursor:default;
}
/* resto de familias: neutral derivado de --line/--ink-soft, ya no 8 hex arbitrarios */
.badge.asia, .badge.east-asia, .badge.oceania, .badge.south-asia, .badge.europe, .badge.china, .badge.pmd{
  background:var(--bg); color:var(--ink-soft); border-color:var(--line);
}
/* LATAM: familia roja/dorada oficial, SIEMPRE destacada (política D9) */
.badge.latam{ background:var(--bad-bg); color:var(--hkr-dark-red); border-color:rgba(201,45,48,.28); font-weight:700 }

/* orden visual: tasa (order:-2) → LATAM (order:-1) → resto (0), sin reescribir el DOM */
.rate-row .badge.latam{ order:-1 }

/* marcadores legados dentro de las tablas, tokenizados (fix revisor F2A-2/3) */
.tariff-flag{ color:var(--warn) }           /* nota al pie ▲: rol atención, AA sobre superficie clara */
.tariff-flag--strong{ font-weight:600 }     /* variante "esp.*" (arancel específico/compuesto) */
.rate-empty{ color:var(--muted) }           /* celda vacía —: rol oficial del Medium Gray */

/* colapso "+N más": el resto de badges no-LATAM de una fila con más de
   RATE_BADGE_VISIBLE países quedan en un <details> inline (ver app.js) */
.badge-more{
  display:inline; /* <details> inline dentro del flex-wrap */
}
.badge-more summary{
  display:inline-flex; align-items:center; list-style:none; cursor:pointer;
  font-size:10px; font-weight:600; color:var(--ink-soft); background:var(--surface);
  border:1px dashed var(--line); border-radius:var(--r-xs); padding:2px 7px;
  transition:background var(--t-fast), color var(--t-fast);
}
.badge-more summary::-webkit-details-marker{ display:none }
.badge-more summary:hover{ background:var(--bg); color:var(--ink) }
.badge-more[open] summary{ background:var(--bg) }
.badge-more__panel{ display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:4px }

/* ─────────────────────────  BÚSQUEDA — overlay de resultados  ───────────────────────── */
.search-results{
  position:fixed; top:64px; right:24px; width:560px; max-width:calc(100vw - 48px); max-height:70vh;
  overflow-y:auto; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  z-index:200; display:none; border:1px solid var(--line);
}
.search-results.active{ display:block }
.search-results .sr-head{
  padding:11px 18px; background:var(--navy); color:var(--hkr-off-white); font-size:12px; font-weight:600; position:sticky; top:0;
  display:flex; justify-content:space-between; align-items:center;
}
.search-results .sr-head button{
  background:none; border:0; color:var(--mist-soft); cursor:pointer; font:inherit; display:inline-flex; align-items:center; gap:5px;
}
.search-results .sr-head button:hover{ color:var(--hkr-off-white) }
.search-results .sr-item{ padding:10px 18px; border-bottom:1px solid var(--line-soft); display:block; color:var(--ink) }
.search-results .sr-item:hover, .search-results .sr-item:focus-visible{ background:var(--bg); outline:none }
.search-results .sr-hs{ font-family:var(--font-mono); font-weight:700; color:var(--navy); font-size:12px }
.search-results .sr-name{ color:var(--ink); font-size:12.5px }
.search-results .sr-loc{ color:var(--ink-soft); font-size:10.5px }
.search-results mark{ background:rgba(242,178,51,.42); border-radius:2px; padding:0 1px }
.search-results .sr-empty{ padding:26px; text-align:center; color:var(--ink-soft); font-size:12.5px; line-height:1.6 }

/* resaltado de fila destino al llegar por deep-link #hs-XXXX */
tr.hl-target td{ animation:hlflash 2.4s ease-out }
@keyframes hlflash{ 0%,40%{ background:var(--warn-bg) } 100%{ background:transparent } }

/* ─────────────────────────  NAV DE CAPÍTULO (prev/next)  ───────────────────────── */
.chap-nav{ display:flex; justify-content:space-between; gap:12px }
.chap-nav a{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 18px;
  color:var(--navy); font-size:12.5px; font-weight:600; flex:1; transition:box-shadow var(--t), background var(--t), color var(--t);
}
.chap-nav a:hover{ box-shadow:var(--shadow-sm) }
.chap-nav a:focus-visible{ outline:none; box-shadow:var(--focus-shadow) }
.chap-nav a.next{ text-align:right }
.chap-nav a .nl{ display:block; font-size:10.5px; color:var(--ink-soft); font-weight:400 }
.chap-nav a.disabled{ opacity:.35; pointer-events:none }

/* ─────────────────────────  FOOTER (sobrio, del sistema)  ───────────────────────── */
footer.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;
}
footer.site-footer img{ height:22px; vertical-align:middle; margin-right:6px; opacity:.75 }

/* ─────────────────────────  ESTADO DE TRADUCCIÓN (chip tokenizado)  ───────────────────────── */
.tstatus{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:3px 10px; border-radius:var(--r-pill); margin-left:auto }
.tstatus.done{ background:var(--ok-bg); color:var(--ok) }
.tstatus.partial{ background:var(--warn-bg); color:var(--warn) }
.tstatus.pending{ background:var(--bad-bg); color:var(--bad) }

/* ─────────────────────────  CARD GENÉRICA (portada de capítulo)  ───────────────────────── */
.card{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden }
.card-header{
  background:var(--red); color:var(--hkr-off-white); padding:13px 22px; font-size:13.5px; font-weight:700; letter-spacing:.01em;
  display:flex; align-items:center; gap:10px;
}
.card-header .ch-num{ background:rgba(255,255,255,.20); border-radius:var(--r-xs); padding:3px 11px; font-size:12px; font-weight:700; margin-right:2px }
.card-body{ padding:22px }

@media print{
  .hkr-header--slim, .ar-tabs{ position:relative; top:auto }
  .chap-nav, .ar-header__search{ display:none }
  table.tariff thead tr{ position:relative; top:auto }
}

@media (max-width:720px){
  .chapter-list{ grid-template-columns:1fr }
  .help-card{ flex-direction:column; align-items:flex-start; text-align:left }
  .rule-block{ flex-direction:column; gap:8px }
  .rule-num{ width:auto; align-self:flex-start }
}