/* HyperForge · componentes base del diseño v2 (12-nov-2026). Solo tokens de tokens.css; nada de colores sueltos.
   Prefijo hf- para no chocar con las clases viejas (.campo, .btn, .tabla siguen sirviendo a las pantallas que aún no migran).
   Movimiento: solo transform y opacity, con las duraciones de los tokens (valen 0 con prefers-reduced-motion). */

.hf-icono{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hf-kicker{font:400 var(--hf-t-xs)/1.4 var(--hf-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--hf-tenue);margin:0}

/* ───────── marca: la H con su núcleo de 3 tonos (handoff §15) + «HyperForge by Riverstar» ───────── */
.hf-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--hf-texto);white-space:nowrap}
.hf-logo-marca{flex:none;width:42px;height:42px;overflow:visible;transition:transform var(--hf-dur-lenta) var(--hf-facil)}
.hf-logo-marca .b{fill:var(--hf-logo-b)}.hf-logo-marca .r0{fill:var(--hf-logo-1)}.hf-logo-marca .r1{fill:var(--hf-logo-2)}.hf-logo-marca .r2{fill:var(--hf-logo-3)}
.hf-logo:hover .hf-logo-marca{transform:rotate(-6deg)}
.hf-logo-texto{display:grid;gap:3px}
.hf-logo-nombre{font:700 17px/1 var(--hf-f-display);letter-spacing:-.01em}
.hf-logo-por{font:500 10px/1 var(--hf-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hf-tenue)}
.hf-logo-grande{gap:14px}
.hf-logo-grande .hf-logo-marca{width:64px;height:64px}
.hf-logo-grande .hf-logo-nombre{font-size:34px}
.hf-logo-grande .hf-logo-por{font-size:12px}
.riel .hf-logo{margin:0 0 10px 2px}
.riel .hf-logo-texto{opacity:0;transition:opacity var(--hf-dur)}
.riel:hover .hf-logo-texto,.riel:focus-within .hf-logo-texto{opacity:1;transition-delay:.12s}
/* ───────── botones ───────── */
.hf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border-radius:var(--hf-r-pildora);
  font:600 15px/1 var(--hf-f-display);word-spacing:var(--hf-ws-display);text-decoration:none;color:var(--hf-texto);background:transparent;border:2px dotted var(--hf-linea-2);
  cursor:pointer;transition:transform var(--hf-dur-rapida) var(--hf-facil),border-color var(--hf-dur)}
.hf-btn:hover{transform:translateY(-2px);border-color:var(--hf-texto)}
.hf-btn:active{transform:scale(.97)}
.hf-btn:focus-visible{outline:2px solid var(--hf-foco);outline-offset:3px}
.hf-btn-primario{background:var(--hf-brasa);color:var(--hf-sobre-brasa);border:0;min-height:56px;padding:0 6px 0 24px;gap:18px}
.hf-btn-primario.hf-btn-chico{padding:0 18px}
.hf-btn-circulo{width:44px;height:44px;border-radius:50%;background:var(--hf-carbon);color:var(--hf-brasa);display:grid;place-items:center}
.hf-btn-circulo .hf-icono{width:22px;height:22px;stroke-width:2.4;transition:transform var(--hf-dur) var(--hf-facil)}
.hf-btn-primario:hover .hf-btn-circulo .hf-icono{transform:translateX(3px)}
.hf-btn-fantasma{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.hf-btn-peligro{border:2px solid var(--hf-alerta);color:var(--hf-alerta-texto)}
.hf-btn-chico{min-height:40px;font-size:14px;padding:0 16px}
.hf-btn[disabled]{cursor:not-allowed;transform:none;color:var(--hf-tenue);background:transparent;border:2px dashed var(--hf-linea-2)}
.hf-btn[disabled] .hf-btn-circulo{display:none}

/* ───────── campos ───────── */
.hf-campo{display:grid;gap:6px}
.hf-campo label{font:500 var(--hf-t-sm) var(--hf-f-texto);color:var(--hf-tenue)}
.hf-entrada{width:100%;min-height:50px;padding:0 16px;font:400 15px var(--hf-f-texto);color:var(--hf-texto);background:var(--hf-panel);
  border:1px solid var(--hf-linea-fuerte);border-radius:var(--hf-r-control);transition:border-color var(--hf-dur)}
textarea.hf-entrada{padding:12px 16px;resize:vertical}
.hf-entrada:focus{border-color:var(--hf-foco);outline:2px solid var(--hf-foco);outline-offset:1px}
.hf-entrada[aria-invalid="true"]{border-color:var(--hf-alerta)}
.hf-campo-ayuda{font-size:var(--hf-t-sm);color:var(--hf-tenue)}
.hf-campo-error{font-size:var(--hf-t-sm);color:var(--hf-alerta-texto);font-weight:500}
.hf-campo-error:empty{display:none}

/* ───────── tarjetas ───────── */
.hf-tarjeta{display:block;background:var(--hf-panel);border:1px solid var(--hf-linea);border-radius:var(--hf-r-tarjeta);padding:18px 20px;
  color:var(--hf-texto);text-decoration:none}
a.hf-tarjeta{transition:border-radius var(--hf-dur-lenta) var(--hf-facil),border-color var(--hf-dur),transform var(--hf-dur) var(--hf-facil)}
a.hf-tarjeta:hover{border-radius:var(--hf-r-tarjeta-inv);border-color:var(--hf-texto);transform:translateY(-2px)}
.hf-tarjeta-inversa{border-radius:var(--hf-r-tarjeta-inv)}
.hf-tarjeta-hundida{background:var(--hf-panel-2)}
.hf-tarjeta-punteada{background:transparent;border:1px dashed var(--hf-linea-2)}
.hf-tarjeta-cabeza{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.hf-tarjeta-cabeza .hf-kicker{flex-basis:100%}
.hf-tarjeta-titulo{font:600 18px/1.2 var(--hf-f-display);word-spacing:var(--hf-ws-display);margin:0 auto 0 0;text-transform:none;letter-spacing:-.01em;color:var(--hf-texto)}
.hf-tarjeta-pie{margin-top:14px;padding-top:12px;border-top:1px solid var(--hf-linea);display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ───────── tabla ───────── */
.hf-tabla-envoltura{overflow-x:auto;border:1px solid var(--hf-linea);border-radius:18px;background:var(--hf-panel)}
.hf-tabla-envoltura:focus-visible{outline:2px solid var(--hf-foco);outline-offset:2px}
.hf-tabla{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.hf-tabla caption{text-align:left;padding:14px 16px 6px;font:400 var(--hf-t-xs) var(--hf-f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hf-tenue)}
.hf-tabla th{font:500 var(--hf-t-xs) var(--hf-f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hf-tenue);text-align:left;
  padding:10px 16px;border-bottom:1px solid var(--hf-linea);white-space:nowrap}
.hf-tabla td{padding:12px 16px;border-top:1px solid var(--hf-linea);border-bottom:0;vertical-align:top}
.hf-tabla tbody tr:hover{background:var(--hf-panel-2)}
.hf-tabla .num{text-align:right;white-space:nowrap}

/* ───────── chip de estado: forma + palabra (handoff §5); el color solo refuerza ───────── */
.hf-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:var(--hf-r-pildora);white-space:nowrap;
  font:600 10.5px/1.4 var(--hf-f-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor}
.hf-chip-glifo{position:relative;flex:none;width:14px;height:14px;display:grid;place-items:center}
.hf-chip-glifo .hf-icono{width:11px;height:11px;stroke-width:3.2}
.hf-chip-verdin{color:var(--hf-verdin-texto)}
.hf-chip-verdin .hf-chip-glifo{border-radius:50%;background:var(--hf-verdin-texto);color:var(--hf-sobre-verdin)}
.hf-chip-brasa{color:var(--hf-brasa-texto)}
.hf-chip-brasa .hf-chip-glifo{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid currentColor}
.hf-chip-alerta{color:var(--hf-alerta-texto)}
.hf-chip-alerta .hf-chip-glifo{border-radius:2px;background:var(--hf-alerta-texto);color:var(--hf-sobre-alerta)}
.hf-chip-neutro{color:var(--hf-tenue);border-style:dashed}
.hf-chip-neutro .hf-chip-glifo{border-radius:50%;border:2px dotted currentColor}
.hf-chip-curso{color:var(--hf-texto)}
.hf-chip-curso .hf-chip-glifo{border-radius:50%;border:2px solid currentColor}
.hf-chip-curso .hf-chip-glifo::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid currentColor;
  animation:hf-late-chip 1.8s var(--hf-facil) infinite}
@keyframes hf-late-chip{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
/* ───────── cifras con procedencia ───────── */
.hf-cifra{display:grid;gap:2px;align-content:start;min-width:0}
.hf-cifra b{font:600 30px/1.05 var(--hf-f-display);font-variant-numeric:tabular-nums;color:var(--hf-texto);overflow-wrap:anywhere}
.hf-cifra > span{color:var(--hf-tenue);font-size:var(--hf-t-sm)}
.hf-cifra .hf-chip{justify-self:start;margin-top:4px}
.hf-cifra-sin b{font:500 18px/1.4 var(--hf-f-mono);color:var(--hf-tenue)}

/* ───────── barra de uso y saldo (cabecera) ───────── */
.hf-uso{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 var(--hf-t-xs) var(--hf-f-mono);letter-spacing:.04em;
  color:var(--hf-tenue);padding:6px 12px;border:1px solid var(--hf-linea);border-radius:var(--hf-r-pildora);background:var(--hf-panel)}
.hf-uso-rotulo{text-transform:uppercase;letter-spacing:.1em}
.hf-uso-barra{position:relative;width:96px;height:6px;border-radius:var(--hf-r-pildora);background:var(--hf-linea-2);overflow:hidden}
.hf-uso-barra i{position:absolute;inset:0 auto 0 0;width:var(--hf-uso-pct,0%);border-radius:inherit;background:var(--hf-texto)}
.hf-uso-brasa i{background:var(--hf-brasa)}
.hf-uso-alerta i{background:var(--hf-alerta)}
.hf-uso-num{color:var(--hf-texto)}
.hf-uso-saldo{display:inline-flex;align-items:center;gap:6px 10px;padding-left:10px;border-left:1px solid var(--hf-linea-2);color:var(--hf-texto)}
.hf-uso-saldo-barra i{background:var(--hf-brasa)}   /* v10: barra aparte, relleno brasa */
.aviso-uso{border-color:var(--hf-brasa-texto);border-radius:var(--hf-r-control);margin:var(--hf-e2) var(--hf-e6) 0}
.hf-aviso-beta{display:inline-flex;align-items:center;gap:6px;font:500 var(--hf-t-xs) var(--hf-f-mono);letter-spacing:.04em;color:var(--hf-texto);
  padding:5px 12px;border:1px dashed var(--hf-linea-2);border-radius:var(--hf-r-pildora)}
.hf-aviso-beta b{font-weight:600;color:var(--hf-sobre-brasa);background:var(--hf-brasa);border-radius:var(--hf-r-pildora);padding:1px 7px;
  letter-spacing:.08em;text-transform:uppercase}

/* ───────── vacío, cargando y error ───────── */
.hf-estado{display:flex;gap:12px;align-items:flex-start;padding:22px;border:1px dashed var(--hf-linea-2);border-radius:var(--hf-r-tarjeta-inv);color:var(--hf-tenue)}
.hf-estado-vacio{flex-direction:column;align-items:flex-start}
.hf-estado-error{border:1px solid var(--hf-alerta);color:var(--hf-texto)}
.hf-estado-error > .hf-icono{color:var(--hf-alerta);width:24px;height:24px}
.hf-estado-titulo{font:600 16px var(--hf-f-display);color:var(--hf-texto)}
.hf-estado-error .hf-btn{margin-top:10px}
.hf-puntos{display:inline-flex;gap:6px;align-items:center;min-height:22px}
.hf-puntos i{width:8px;height:8px;border-radius:50%;background:var(--hf-brasa);opacity:.3;animation:hf-turno 1.2s var(--hf-facil) infinite}
.hf-puntos i:nth-child(2){animation-delay:.18s}.hf-puntos i:nth-child(3){animation-delay:.36s}
@keyframes hf-turno{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1.2)}}

/* ───────── toast ───────── */
.hf-toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:var(--hf-z-toast);display:grid;gap:8px;
  width:min(440px,calc(100% - 32px));pointer-events:none}
.hf-toast{display:flex;align-items:center;gap:10px;padding:9px 8px 9px 12px;border-radius:var(--hf-r-pildora);background:var(--hf-texto);
  color:var(--hf-fondo);font:600 13px/1.3 var(--hf-f-display);box-shadow:var(--hf-sombra-flotante);pointer-events:auto;
  animation:hf-sube var(--hf-dur-lenta) var(--hf-facil)}
.hf-toast > span:nth-child(2){flex:1}
.hf-toast-glifo{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--hf-verdin);color:var(--hf-sobre-verdin)}
.hf-toast-brasa .hf-toast-glifo{background:var(--hf-brasa);color:var(--hf-sobre-brasa)}
.hf-toast-alerta .hf-toast-glifo{background:var(--hf-alerta);color:var(--hf-sobre-alerta)}
.hf-toast-glifo .hf-icono{width:14px;height:14px;stroke-width:2.6}
.hf-toast-cerrar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:inherit}
.hf-toast-cerrar:focus-visible{outline:2px solid var(--hf-brasa);outline-offset:1px}
@keyframes hf-sube{from{opacity:0;transform:translateY(16px)}}
.hf-toast{position:relative;overflow:hidden}
.hf-toast-tiempo{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hf-brasa);transform-origin:0 50%;
  animation:hf-tiempo var(--hf-toast-dur,4200ms) linear forwards}
@keyframes hf-tiempo{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ───────── hoja de firma (step-up PIN + código) ───────── */
.hf-hoja.dialogo-acceso{width:min(440px,calc(100% - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:22px 22px 18px;color:var(--hf-texto);
  background:var(--hf-panel);border:1px solid var(--hf-linea-2);border-radius:var(--hf-r-tarjeta);box-shadow:var(--hf-sombra-flotante);
  animation:hf-sube var(--hf-dur-lenta) var(--hf-facil)}
.hf-hoja::backdrop{background:var(--hf-velo)}
.hf-hoja-cuerpo{display:grid;gap:12px}
.hf-hoja h2{font:700 22px/1.1 var(--hf-f-display);margin:0;color:var(--hf-texto);text-transform:none;letter-spacing:-.01em}
.hf-hoja-resumen{font-size:14px;color:var(--hf-texto)}
.hf-hoja-fuera{display:flex;gap:9px;align-items:flex-start;padding:9px 12px;border-radius:12px;border:1px dashed var(--hf-verdin);font-size:12.5px;line-height:1.4}
.hf-hoja-fuera .hf-icono{color:var(--hf-verdin);width:16px;height:16px;margin-top:1px}
.hf-firma-pasos{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;font:500 10px var(--hf-f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hf-tenue)}
.hf-firma-pasos li{display:grid;gap:5px}
.hf-firma-pasos i{display:block;height:4px;border-radius:var(--hf-r-pildora);background:var(--hf-linea-2)}
.hf-firma-pasos .activo{color:var(--hf-texto)}.hf-firma-pasos .activo i{background:var(--hf-brasa)}
.hf-firma-pasos .hecho i{background:var(--hf-verdin)}
.hf-hoja-pin{display:grid;gap:8px}
.hf-pin-indicador{display:flex;justify-content:center;align-items:center;gap:14px}
.hf-pin-puntos{display:flex;gap:14px}
.hf-pin-puntos i{width:15px;height:15px;border-radius:50%;border:2px solid var(--hf-linea-fuerte);transition:transform var(--hf-dur-rapida) var(--hf-facil)}
.hf-pin-puntos i.lleno{background:var(--hf-texto);border-color:var(--hf-texto);transform:scale(1.1)}
.hf-pin-puntos.mal i{border-color:var(--hf-alerta)}
.hf-pin-puntos.mal{animation:hf-sacude .42s}
.hf-pin-extra{font:500 12px var(--hf-f-mono);color:var(--hf-tenue);min-width:2ch}
@keyframes hf-sacude{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.hf-hoja-totp{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:12px;align-items:start}
.hf-entrada-codigo{font:600 22px var(--hf-f-mono);letter-spacing:.32em;text-align:center}
.hf-anillo-totp{position:relative;width:52px;height:52px;margin-top:26px;display:grid;place-items:center}
.hf-anillo-totp svg{position:absolute;inset:0;transform:rotate(-90deg)}
.hf-anillo-totp circle{fill:none;stroke-width:4}
.hf-anillo-totp .fondo{stroke:var(--hf-linea-2)}
.hf-anillo-totp .avance{stroke:var(--hf-verdin);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--hf-totp,1));
  transition:stroke-dashoffset 1s linear}
.hf-anillo-totp.poco .avance{stroke:var(--hf-brasa)}
.hf-anillo-totp b{font:600 12px var(--hf-f-mono);font-variant-numeric:tabular-nums}
.hf-teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hf-teclado button{height:46px;border-radius:var(--hf-r-boton-tecla);background:var(--hf-panel-2);border:1px solid var(--hf-linea);cursor:pointer;
  font:600 18px var(--hf-f-display);font-variant-numeric:tabular-nums;color:var(--hf-texto);transition:transform 120ms var(--hf-facil),border-color var(--hf-dur)}
.hf-teclado button:hover{border-color:var(--hf-texto)}
.hf-teclado button:active{transform:scale(.92)}
.hf-teclado .hf-tecla-texto{font:500 12px var(--hf-f-mono);color:var(--hf-tenue)}
.hf-hoja-acciones{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.hf-hoja.ocupada .hf-btn-primario{opacity:.7}
.hf-hoja-exito{display:grid;place-items:center;padding:18px 0 8px}   /* v10: el sello de la firma, 150 px */
.hf-hoja [hidden]{display:none!important}
.hf-hoja .firma-error{color:var(--hf-alerta-texto)}
@media (max-width:560px){.hf-hoja.dialogo-acceso{margin:auto auto 0;border-radius:var(--hf-r-grande) var(--hf-r-grande) var(--hf-r-chico) var(--hf-r-chico)}}

/* ───────── mascota ───────── */
.hf-mascota{width:120px;height:120px;overflow:visible}
.hf-mascota .m-forma{fill:var(--hf-verdin);transition:fill var(--hf-dur-lenta)}
.hf-mascota .m-ojo{fill:var(--hf-brasa)}
.hf-mascota .m-brillo{fill:var(--hf-marfil);opacity:.85}
.hf-mascota .m-check{fill:none;stroke:var(--hf-sobre-verdin);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hf-mascota .m-signo{font:700 44px var(--hf-f-display);fill:var(--hf-brasa);opacity:0}
.hf-mascota .m-halo,.hf-mascota .m-pulso{fill:none;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.hf-mascota .m-halo{stroke:var(--hf-verdin)}
.hf-mascota .m-pulso{stroke:var(--hf-brasa);stroke-width:4}
.hf-mascota .m-anillo{fill:none;stroke:var(--hf-brasa);stroke-width:3;stroke-dasharray:6 9;opacity:0;transform-origin:100px 102px}
.hf-mascota .m-z{font:700 20px var(--hf-f-display);fill:var(--hf-tenue);opacity:0}
.hf-mascota .m-cuerpo{transform-origin:100px 150px}
.hf-mascota[data-estado="reposo"] .m-halo{animation:hf-halo 3.4s ease-out infinite}
.hf-mascota[data-estado="reposo"] .m-cuerpo{animation:hf-respira 4s ease-in-out infinite}
.hf-mascota[data-estado="curioso"] .m-cuerpo{transform:rotate(-8deg)}
.hf-mascota[data-estado="curioso"] .m-pregunta{opacity:1}
.hf-mascota[data-estado="pensando"] .m-anillo{opacity:.9;animation:hf-gira 3.2s linear infinite}
.hf-mascota[data-estado="verificado"] .m-ojo,.hf-mascota[data-estado="verificado"] .m-brillo{opacity:0}
.hf-mascota[data-estado="verificado"] .m-check{opacity:1}
.hf-mascota[data-estado="alerta"] .m-forma{fill:var(--hf-brasa)}
.hf-mascota[data-estado="alerta"] .m-ojo{fill:var(--hf-marfil)}
.hf-mascota[data-estado="alerta"] .m-bang{opacity:1}
.hf-mascota[data-estado="alerta"] .m-pulso{animation:hf-late 1.1s ease-out infinite}
.hf-mascota[data-estado="dormido"] .m-forma{opacity:.85}
.hf-mascota[data-estado="dormido"] .m-ojo{transform:scaleY(.15);transform-box:fill-box;transform-origin:center}
.hf-mascota[data-estado="dormido"] .m-brillo{opacity:0}
.hf-mascota[data-estado="dormido"] .m-z{animation:hf-z 3s ease-in-out infinite}
.hf-mascota[data-estado="dormido"] .m-z:nth-of-type(2){animation-delay:1s}
.hf-mascota[data-estado="dormido"] .m-z:nth-of-type(3){animation-delay:2s}
@keyframes hf-halo{from{transform:scale(.85);opacity:.45}to{transform:scale(1.4);opacity:0}}
@keyframes hf-respira{50%{transform:scale(1.03,.97)}}
@keyframes hf-gira{to{transform:rotate(360deg)}}
@keyframes hf-late{from{transform:scale(.7);opacity:.8}to{transform:scale(1.7);opacity:0}}
@keyframes hf-z{0%{transform:translate(0,12px);opacity:0}30%{opacity:1}100%{transform:translate(10px,-18px);opacity:0}}
@media (prefers-reduced-motion:reduce){.hf-mascota *{animation:none!important}.hf-mascota[data-estado="dormido"] .m-z{opacity:.8}}