/* HyperForge · Inicio, Pendientes y el estado «sin revisor» con el diseño v11 a v13 (handoff componentes §24, §25, §37 y §38).
   Solo tokens de tokens.css; archivo propio para reestilizar. Las pestañas de cada lugar viven en armazon.css (`.hubt`). */

/* ───────── Inicio (.inig): lo ganado ocupa dos filas; cómo va y los puntos a la derecha; Weby y pendientes a lo ancho ───────── */
.hf-inicio{display:grid;gap:14px;grid-template-columns:1.25fr 1fr;align-items:stretch}
.hf-inicio > *{margin:0;min-width:0}
.hf-inicio .hf-tarjeta{padding:18px 22px}
.hf-ganado{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column;justify-content:center;padding:28px 28px!important}
.hf-ganado-rotulo,.hf-lbl{margin:0 0 6px;font:500 13px/1.3 var(--hf-f-texto);color:var(--hf-tenue)}
.hf-ganado-cifra{margin:6px 0 12px;font:700 clamp(40px,5.2vw,72px)/.95 var(--hf-f-display);letter-spacing:-.02em;color:var(--hf-texto)}
.hf-ganado-cifra b{font-weight:700}
.hf-ganado-cifra b:last-child{color:var(--hf-verdin-texto)}
.hf-ganado-cuenta{margin:0;color:var(--hf-tenue);font-size:15px;max-width:60ch}
.hf-ganado-nota{margin:var(--hf-e3) 0 0;color:var(--hf-tenue);font-size:var(--hf-t-sm);display:flex;flex-wrap:wrap;gap:var(--hf-e2);align-items:center}

/* los títulos de estas tarjetas son etiquetas en texto normal (sin eyebrows en mayúsculas) */
.hf-ganado .hf-tarjeta-titulo,.hf-como .hf-tarjeta-titulo,.hf-avance .hf-tarjeta-titulo{margin:0 0 6px;font:500 13px/1.3 var(--hf-f-texto);
  word-spacing:0;color:var(--hf-tenue)}
.hf-ganado .hf-tarjeta-cabeza,.hf-como .hf-tarjeta-cabeza,.hf-avance .hf-tarjeta-cabeza{margin-bottom:0}
.hf-oportunidad .hf-tarjeta-cabeza{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* cómo va tu AI native: forma + palabra, nunca solo color */
.hf-como{display:grid;gap:2px;align-content:start}
.hf-como-estado{display:flex;align-items:center;gap:10px;margin:2px 0 6px}
.hf-como-estado .hf-icono{width:24px;height:24px;flex:none}
.hf-como-estado b{font:700 22px/1.05 var(--hf-f-display);text-transform:uppercase;letter-spacing:-.005em}
.hf-como p{margin:0 0 8px;font-size:14px}
.hf-como.ok{border-color:color-mix(in srgb,var(--hf-verdin) 45%,var(--hf-linea))}
.hf-como.ok .hf-icono{color:var(--hf-verdin-texto)}
.hf-como.at{border-color:color-mix(in srgb,var(--hf-brasa) 55%,var(--hf-linea))}
.hf-como.at .hf-icono{color:var(--hf-brasa-texto)}
.hf-enlace{justify-self:start;font:600 13px var(--hf-f-texto);color:var(--hf-texto);text-decoration:underline;text-underline-offset:3px}
.hf-enlace:focus-visible{outline:2px solid var(--hf-foco);outline-offset:3px}

/* los puntos de avance: llenos, el siguiente con borde brasa, el resto punteados */
.hf-puntos{list-style:none;margin:8px 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hf-puntos li{width:22px;height:22px;border-radius:50%;border:2px dotted var(--hf-linea-2);background:transparent;opacity:1;animation:none}
.hf-puntos li.encendido{background:var(--hf-verdin);border:0}
.hf-puntos li.siguiente{border:2px solid var(--hf-brasa);animation:hf-late-punto 1.8s var(--hf-facil) infinite}
@keyframes hf-late-punto{50%{transform:scale(1.12)}}
.hf-avance-nota{margin:0;color:var(--hf-tenue);font-size:var(--hf-t-sm)}

/* Weby con una oportunidad */
.hf-oportunidad{grid-column:1 / -1;border-color:color-mix(in srgb,var(--hf-verdin) 40%,var(--hf-linea))}
.hf-oportunidad-cuerpo{display:flex;gap:18px;align-items:center}
.hf-oportunidad-cuerpo .hf-mascota{width:64px;height:64px;flex:none}
.hf-oportunidad-cuerpo p{margin:0 0 10px;font-size:15px;max-width:70ch}
.hf-oportunidad .hf-tarjeta-pie{margin:0 0 0 82px;padding:0;border:0}
.hf-oportunidad-botones,.hf-pendientes-botones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* la franja de pendientes */
.hf-pendientes-resumen{grid-column:1 / -1;display:flex!important;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hf-pendientes-resumen:focus-visible{outline:2px solid var(--hf-foco);outline-offset:3px}
.hf-pendientes-resumen b{font:600 16px/1.2 var(--hf-f-display);word-spacing:var(--hf-ws-display)}
.hf-pendientes-resumen small{display:block;margin-top:2px;font:400 var(--hf-t-sm) var(--hf-f-texto);color:var(--hf-tenue)}
.hf-inicio > .hf-uso-mes,.hf-inicio > .hf-pulso{grid-column:1 / -1}

/* valor neto (v13): ahorro revisado − costo de IA − costo de revisión = neto; cada pastilla explica su término */
.hf-vn{margin-top:14px;padding-top:12px;border-top:1px solid var(--hf-linea)}
.hf-vn > p{margin:0 0 8px;font:500 13px var(--hf-f-texto);color:var(--hf-tenue)}
.hf-vn-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hf-vn-fila > i{font:600 16px var(--hf-f-mono);color:var(--hf-tenue);font-style:normal}
.hf-vn-p{position:relative;display:grid;padding:6px 10px;border:1px dotted var(--hf-linea-2);border-radius:12px;cursor:help;outline:0}
.hf-vn-p b{font:600 16px var(--hf-f-mono);font-feature-settings:'tnum'}
.hf-vn-p small{font-size:11.5px;color:var(--hf-tenue)}
.hf-vn-p::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 8px);width:220px;padding:8px 10px;border-radius:10px;
  background:var(--hf-texto);color:var(--hf-fondo);font:500 12.5px/1.35 var(--hf-f-texto);opacity:0;pointer-events:none;transform:translateY(4px);
  transition:opacity var(--hf-dur),transform var(--hf-dur);z-index:5}
.hf-vn-p:hover::after,.hf-vn-p:focus-visible::after{opacity:1;transform:none}
.hf-vn-p:focus-visible{outline:2px solid var(--hf-foco);outline-offset:2px}
.hf-vn-nota{margin:8px 0 0!important;font:400 var(--hf-t-sm) var(--hf-f-texto)!important}

/* ───────── Pendientes (.peng, .pgrp, .pi): grupos en tarjeta, cada fila con su chip de reglas ───────── */
.hf-peng{display:grid;gap:14px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);max-width:1100px}
.hf-peng > .hf-pgrp:first-child,.hf-peng > .hf-pemp{grid-column:1 / -1}
.hf-pgrp{padding:16px 18px!important}
.hf-pgrp.fx{border-color:color-mix(in srgb,var(--hf-alerta) 35%,var(--hf-linea))}
.hf-pgh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.hf-pgh h2{font:600 16px var(--hf-f-display);word-spacing:var(--hf-ws-display);text-transform:none;letter-spacing:0;margin:0;color:var(--hf-texto)}
.hf-pgh p{margin:0;color:var(--hf-tenue);font-size:12.5px}
.hf-pl{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hf-pi{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 14px;color:var(--hf-texto);
  text-decoration:none;border-radius:var(--hf-r-fila);border:1px solid var(--hf-linea);background:var(--hf-panel-2);
  transition:border-color var(--hf-dur),transform var(--hf-dur) var(--hf-facil)}
a.hf-pi:hover{border-color:var(--hf-linea-2);transform:translateX(2px)}
a.hf-pi:focus-visible{outline:2px solid var(--hf-foco);outline-offset:3px}
.hf-pi b{font:600 14px var(--hf-f-texto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.hf-pi small{display:block;font-size:12.5px;color:var(--hf-tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-pi .quien{font-size:12.5px;color:var(--hf-tenue);white-space:nowrap}
.hf-pi .ir{font:600 12.5px var(--hf-f-texto);color:var(--hf-brasa-texto);white-space:nowrap}
.hf-pi .urgente{color:var(--hf-brasa-texto);font-weight:600}
.hf-pi.sin-quien{grid-template-columns:auto minmax(0,1fr) auto}
.hf-pen-nota{grid-column:1 / -1;margin:0;color:var(--hf-tenue);font-size:12.5px;max-width:70ch}
.hf-pemp{display:flex;gap:10px;align-items:center;color:var(--hf-tenue)}
.hf-pemp .hf-icono{color:var(--hf-verdin-texto)}
.hf-pen-sub{margin:0 0 14px;color:var(--hf-tenue);font-size:15px;max-width:none}

/* ───────── resultado sin revisor (v13 §37): un rombo de contorno marfil con su anillo punteado; nunca verde, no está verificado ───────── */
.hf-nr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:12px 14px;border:1px dashed var(--hf-linea-2);
  border-radius:var(--hf-r-fila);background:var(--hf-panel-2)}
.hf-nr-sello{grid-row:span 2;width:44px;height:44px;color:var(--hf-texto)}
.hf-nr-sello circle{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:1 3;stroke-linecap:round}
.hf-nr-sello rect{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round}
.hf-nr b{font:600 15px var(--hf-f-display)}
.hf-nr p{margin:0;font-size:var(--hf-t-sm);color:var(--hf-tenue)}

@media (max-width:1100px){.hf-peng{grid-template-columns:minmax(0,1fr)}}
@media (min-width:821px) and (max-width:1100px){
  .hf-inicio{gap:10px}.hf-ganado{padding:20px!important}.hf-ganado-cifra{font-size:44px;margin:4px 0 8px}
  .hf-inicio .hf-tarjeta{padding:14px 16px}.hf-ganado-cuenta{display:none}
}
@media (max-width:820px){
  .hf-inicio{grid-template-columns:minmax(0,1fr)}
  .hf-ganado{grid-row:auto;padding:20px!important}
  .hf-oportunidad .hf-tarjeta-pie{margin-left:0}
  .hf-oportunidad-cuerpo{flex-direction:column;align-items:flex-start;gap:10px}
  .hf-pi{grid-template-columns:auto minmax(0,1fr)}
  .hf-pi .quien,.hf-pi .ir{grid-column:2}
  .hf-vn-p::after{width:180px}
}
@media (prefers-reduced-motion:reduce){.hf-puntos li.siguiente{animation:none}a.hf-pi{transition:none}a.hf-pi:hover{transform:none}}