/* ============================================================
   HK Registration · Trade Hub — tool.css v2 (herramientas)
   Fase 4 · 2026-07-05. Consume site/shared/tokens.css +
   site/shared/chrome.css DIRECTO. Solo estilos PROPIOS del
   register "herramientas": header slim de datos, lead, card de
   herramienta, wizard, result-box, campos, tabla comparativa,
   disclaimer (nota de datos) y footer. Lo compartido (hub-ribbon,
   header slim base, neo-*, data-*, tag, tooltip-glass) vive en
   chrome.css; acá no se re-declara.
   ------------------------------------------------------------
   Muere del tool.css viejo (mapa de sustitución del plan §B.5.1):
   - Paleta hex local (--red #ca1118, --navy, --teal, --bg, --border,
     --text, --muted, --ok/--warn/--bad, pasteles tailwind) → tokens v2.
   - Courier New de códigos → var(--font-mono).
   - .disclaimer con border-left:3px de acento → nota de datos
     (fondo tintado + borde COMPLETO, receta .data-note del sistema).
   - .result.ok/warn/bad con pasteles #ecfdf5/#fffbeb/#fef2f2 →
     fondos tintados derivados de las anclas (--ok-bg/--warn-bg/--bad-bg).
   - emojis-icono (⚠️ etc.) → sprite compartido.
   ------------------------------------------------------------
   REGISTER (D4): las herramientas son superficie de DATOS. El
   relieve neumórfico solo aparece en el chrome (header dock del hub,
   botón primario con glow). Las cards de resultado, tablas, wizard y
   campos son PLANOS: fondo de superficie + borde fino derivado.
   La portada/keybox de marca (navy→deep) es la única zona de marca.
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box }
body{ font-size:14px }

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

/* ─────────────────────────  HUB-RIBBON  ─────────────────────────
   Receta en chrome.css: columna central del grid de .tool-head. */

/* ─────────────────────────  HEADER — densidad "datos" (slim)  ─────────────────────────
   La receta base (.hkr-header--slim) vive en chrome.css: franja Deep
   Blue plana, sin dock flotante. Acá: ícono de herramienta + títulos + tag.
   .tool-head__brand agrupa ícono+títulos en una sola columna del grid
   (misma función que .ar-header__brand/.mk-header__brand/.fr-header__brand),
   para que hub-ribbon quede libre en la columna central. */
.tool-head{ height:auto; min-height:58px; gap:12px 16px; padding:14px var(--pad) }
.tool-head__brand{ display:flex; align-items:center; gap:12px; min-width:0 }
.tool-head .ico{
  width:42px; height:42px; border-radius:var(--r-md); flex:none;
  background:rgba(255,255,255,.10); display:grid; place-items:center; color:var(--hkr-off-white);
}
.tool-head .ico svg{ width:24px; height:24px }
.tool-head .htx{ min-width:0; flex:1 1 auto }
.tool-head h1{
  font-size:clamp(16px,2.1vw,20px); font-weight:700; letter-spacing:-.01em; line-height:1.2; color:var(--hkr-off-white);
  /* tope duro de 2 líneas: la columna de marca comparte ancho con la cinta
     centrada y con .tag: nunca debe derivar en 3+ líneas de título. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
.tool-head p{ font-size:12.5px; font-weight:400; color:var(--mist-soft); margin-top:3px; line-height:1.4 }
.tool-head .tag{
  margin-left:auto; flex:none; align-self:flex-start;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(202,17,24,.28); border:1px solid rgba(240,134,139,.45); color:var(--red-on);
  padding:5px 12px; border-radius:var(--r-pill);
}
@media (max-width:900px){
  .tool-head{ padding:12px var(--pad) }
  .tool-head .tag{ display:none }
  /* .tag ya no está en el flujo del grid: quedan 2 columnas reales
     (marca flexible + cinta). Sin esto, la cinta seguiría centrada
     matemáticamente sobre una 3ª columna vacía y le robaría la mitad
     del ancho al título, partiéndolo en varias líneas. */
  .tool-head{ grid-template-columns:minmax(0,1fr) auto }
}

/* ─────────────────────────  MAIN + LEAD  ───────────────────────── */
main{ max-width:var(--container); margin:0 auto; padding:clamp(26px,3.5vw,36px) var(--pad) 80px }
.lead{ font-size:14.5px; color:var(--ink-soft); margin-bottom:24px; line-height:1.7; max-width:72ch }
.lead b{ color:var(--ink); font-weight:600 }

/* ─────────────────────────  CARD (superficie de datos, plana)  ───────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); margin-bottom:22px; overflow:hidden;
}
.card-h{
  background:var(--hkr-navy); color:var(--hkr-off-white); padding:14px 22px;
  font-size:14px; font-weight:600; display:flex; align-items:center; gap:10px;
}
.card-h .step{
  background:var(--red); border-radius:var(--r-xs); min-width:22px; height:22px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--hkr-off-white);
}
.card-h svg{ width:18px; height:18px; flex:none }
.card-b{ padding:22px }

/* ─────────────────────────  WIZARD  ───────────────────────── */
.q-block{ margin-bottom:22px }
.q-block:last-child{ margin-bottom:0 }
.q-block .q{ font-size:14px; font-weight:600; color:var(--ink); margin-bottom:11px; display:flex; align-items:baseline; gap:8px }
.q-block .q .qn{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--red); flex:none }
.choices{ display:flex; flex-wrap:wrap; gap:9px }
.choices button{
  font-family:inherit; cursor:pointer; font-size:13px; font-weight:500; text-align:left;
  border:1.5px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:var(--r-md); padding:11px 16px; transition:border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.choices button:hover{ border-color:var(--muted); background:var(--surface) }
.choices button.on{ background:var(--navy); border-color:var(--navy); color:var(--hkr-off-white) }
.choices button:focus-visible{ outline:none; box-shadow:var(--focus-shadow) }

/* Estado del wizard: qué falta responder (fix del bug de veredicto incompleto) */
.wz-status{
  display:flex; align-items:flex-start; gap:12px; margin-top:6px;
  padding:14px 16px; border-radius:var(--r-md);
  background:var(--bg); border:1px solid var(--line); color:var(--ink-soft);
  font-size:13px; line-height:1.55;
}
.wz-status svg{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--ink-soft) }
.wz-status.pending{ background:var(--warn-bg); border-color:rgba(146,96,14,.25); color:var(--warn) }
.wz-status.pending svg{ color:var(--warn) }
.wz-status b{ font-weight:700 }

/* ─────────────────────────  RESULT BOX — fondo tintado + borde COMPLETO (sin border-left)  ───────────────────────── */
.result{ border-radius:var(--r-lg); padding:20px 22px; margin-top:6px; border:1.5px solid }
.result.ok{   background:var(--ok-bg);   border-color:rgba(47,111,78,.30) }
.result.warn{ background:var(--warn-bg); border-color:rgba(146,96,14,.30) }
.result.bad{  background:var(--bad-bg);  border-color:rgba(201,45,48,.30) }
.result .r-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 11px; border-radius:var(--r-pill); margin-bottom:10px; color:var(--hkr-off-white);
}
.result .r-tag svg{ width:13px; height:13px }
.result.ok .r-tag{   background:var(--ok) }
.result.warn .r-tag{ background:var(--warn) }
.result.bad .r-tag{  background:var(--bad) }
.result h3{ font-size:18px; font-weight:700; color:var(--ink); margin-bottom:6px; letter-spacing:-.01em }
.result p{ font-size:13.5px; color:var(--ink); line-height:1.65; margin-bottom:8px }
.result ul{ margin:6px 0 0 18px }
.result li{ font-size:13.5px; color:var(--ink); margin-bottom:5px; line-height:1.55 }
.result code, .result .mono{ font-family:var(--font-mono) }

/* ─────────────────────────  CAMPOS  ───────────────────────── */
.field{ margin-bottom:16px }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px }
.field input, .field select{
  width:100%; font-family:inherit; font-size:14px; color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; background:var(--surface);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus-visible, .field select:focus-visible{ outline:none; border-color:transparent; box-shadow:var(--focus-shadow) }
.field .hint{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; line-height:1.5 }
.field .hint a{ color:var(--red); font-weight:600 }
.field .hint a:hover{ color:var(--red-hover) }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }

/* ─────────────────────────  BOTÓN (primario de marca, con glow del sistema)  ───────────────────────── */
.btn{
  font-family:inherit; cursor:pointer; border:0; border-radius:var(--r-md); padding:12px 24px;
  font-size:14px; font-weight:700; background:var(--red); color:var(--hkr-off-white);
  box-shadow:var(--shadow-cta); display:inline-flex; align-items:center; gap:8px;
  transition:background var(--t), transform .18s var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none }
.btn:hover{ background:var(--red-hover); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn:focus-visible{ outline:none; box-shadow:var(--shadow-cta), var(--focus-shadow) }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none }

/* ─────────────────────────  TABLA COMPARATIVA (superficie de datos, plana)  ───────────────────────── */
.cmp{ width:100%; border-collapse:collapse; font-size:12.5px }
.cmp th, .cmp td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top }
.cmp thead th{
  background:var(--hkr-deep-blue); color:var(--hkr-off-white); font-weight:600; font-size:12px;
  position:sticky; top:0; z-index:1; letter-spacing:.02em;
}
.cmp tbody tr:nth-child(even){ background:var(--bg) }
.cmp .code{ font-family:var(--font-mono); font-weight:700; color:var(--navy) }
.cmp .yes{ color:var(--ok); font-weight:600 }
.cmp .no{ color:var(--bad); font-weight:600 }
.cmp .mid{ color:var(--warn); font-weight:600 }
.table-wrap{ overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--line) }

/* ─────────────────────────  DISCLAIMER / NOTA DE DATOS — fondo tintado + borde COMPLETO  ───────────────────────── */
.disclaimer{
  display:flex; gap:12px; align-items:flex-start;
  font-size:12px; color:var(--warn); line-height:1.6;
  background:var(--warn-bg); border:1px solid rgba(146,96,14,.25); border-radius:var(--r-md);
  padding:13px 16px; margin-top:18px;
}
.disclaimer svg{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--warn) }
.disclaimer b{ color:var(--warn); font-weight:700 }
.disclaimer a{ color:var(--warn); font-weight:600; text-decoration:underline; text-underline-offset:2px }

/* ─────────────────────────  FOOTER (sobrio, del sistema)  ───────────────────────── */
.tool-foot{
  text-align:center; font-size:11.5px; color:var(--ink-soft); padding:26px 24px;
  border-top:1px solid var(--line); background:var(--surface); line-height:1.6;
}
.tool-foot a{ color:var(--navy); font-weight:600 }
.tool-foot a:hover{ color:var(--red) }

/* ─────────────────────────  REDUCED MOTION  ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important }
}

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-width:680px){
  .row2{ grid-template-columns:1fr }
}