/* HyperForge · componente RECIBO (diseño v2): tarjeta compacta, papel del detalle y vista imprimible. Tokens de tokens.css. */

/* ───────── tarjeta compacta ───────── */
.hf-recibo-tarjeta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:14px 16px;
  background:var(--hf-panel);border:1px solid var(--hf-linea);border-radius:var(--hf-r-tarjeta-inv);color:var(--hf-texto);text-decoration:none;
  transition:border-radius var(--hf-dur-lenta) var(--hf-facil),border-color var(--hf-dur),transform var(--hf-dur) var(--hf-facil)}
.hf-recibo-tarjeta:hover{border-radius:var(--hf-r-tarjeta);border-color:var(--hf-texto);transform:translateY(-2px)}
.hf-recibo-tarjeta:focus-visible{outline:2px solid var(--hf-foco);outline-offset:3px}
.hf-recibo-folio{font:500 12px var(--hf-f-mono);letter-spacing:.06em;color:var(--hf-brasa-texto);white-space:nowrap}
.hf-recibo-ref{font:600 15px/1.3 var(--hf-f-display);word-spacing:var(--hf-ws-display);overflow-wrap:anywhere}
.hf-recibo-meta{grid-column:2;font:400 12px var(--hf-f-mono);color:var(--hf-tenue);overflow-wrap:anywhere}
.hf-recibo-estado{grid-column:3;grid-row:1 / span 2;align-self:center}
.hf-recibos{list-style:none;display:grid;gap:10px}
@media (max-width:560px){
  .hf-recibo-tarjeta{grid-template-columns:minmax(0,1fr)}
  .hf-recibo-meta,.hf-recibo-estado{grid-column:1;grid-row:auto}
}

/* ───────── detalle: el papel ───────── */
.hf-recibo{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0;padding:24px;background:var(--hf-panel);border:1px solid var(--hf-linea);
  border-radius:24px 24px 24px 6px;color:var(--hf-texto);margin-bottom:9px;isolation:isolate}
.hf-recibo::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-9px;height:9px;border:1px solid var(--hf-linea);border-top:0;
  border-radius:0 0 18px 18px;background:var(--hf-panel-2);z-index:-1}
.hf-recibo-cabeza{display:grid;gap:6px}
.hf-recibo h2{font:600 clamp(22px,1rem + 1.2vw,28px)/1.1 var(--hf-f-display);word-spacing:var(--hf-ws-display);margin:0;color:var(--hf-texto);text-transform:none;letter-spacing:-.01em;overflow-wrap:anywhere}
.hf-recibo-fila{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font:400 12px var(--hf-f-mono);color:var(--hf-tenue)}
.hf-recibo-cadena{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:4px}
.hf-recibo-cadena li{display:grid;gap:6px;align-content:start;padding-top:12px;border-top:2px solid var(--hf-linea-2)}
.hf-recibo-cadena li.hecho{border-top-color:var(--hf-verdin)}
.hf-voz{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;margin-right:8px}
.hf-voz i{width:10px;height:10px;flex:none;border-radius:50%;border:2px solid var(--hf-tenue)}
.hf-voz-ia i{background:var(--hf-brasa);border-color:var(--hf-brasa)}
.hf-voz-regla i{border-radius:1px;transform:rotate(45deg);background:var(--hf-tenue)}
.hf-voz-persona i{border-color:var(--hf-texto)}
.hf-voz-pendiente{color:var(--hf-tenue)}
.hf-voz-pendiente i{border-style:dashed}
.hf-recibo-verifs{list-style:none;display:grid}
.hf-recibo-verifs li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 10px;padding:11px 0;border-top:1px solid var(--hf-linea)}
.hf-recibo-verifs li:first-child{border-top:0;padding-top:0}
.hf-recibo-glifo{grid-row:span 3;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--hf-verdin);color:var(--hf-verdin)}
.no-paso .hf-recibo-glifo{border-color:var(--hf-alerta);color:var(--hf-alerta)}
.hf-recibo-glifo .hf-icono{width:13px;height:13px;stroke-width:3}
.hf-recibo-crit{font-weight:500;overflow-wrap:anywhere}
.hf-recibo-porque{color:var(--hf-tenue);font-size:14px;overflow-wrap:anywhere}
.hf-recibo-cita{font:400 12.5px/1.5 var(--hf-f-mono);color:var(--hf-tenue);white-space:pre-wrap;overflow-wrap:anywhere}
.hf-recibo-cita::before,.hf-recibo-cita::after{content:none}
.hf-recibo-fallos{margin:8px 0 0;padding-left:18px;color:var(--hf-brasa-texto);font-size:14px}
.hf-recibo-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;padding-top:14px;border-top:1px solid var(--hf-linea)}
.hf-recibo-integridad{display:grid;gap:6px;justify-items:start;padding-top:14px;border-top:1px solid var(--hf-linea);font-size:14px;color:var(--hf-tenue)}
.hf-recibo-huella{font:400 12px var(--hf-f-mono);color:var(--hf-texto);overflow-wrap:anywhere}
.hf-recibo-nota{color:var(--hf-tenue);font-size:14px}
.hf-recibo-acciones{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:560px){.hf-recibo{padding:18px}.hf-recibo-cadena{grid-template-columns:minmax(0,1fr)}}

.hf-recibo-cabeza .hf-recibo-folio{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;white-space:normal;overflow-wrap:anywhere}
.hf-recibo-cabeza .hf-logo-marca{width:24px;height:24px}
.hf-recibo-cabeza .hf-logo-texto{display:none}
.hf-recibo-huella{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hf-recibo-huella .hf-btn{min-height:32px;padding:0 10px;font-size:13px}

/* ───────── sello de firma (handoff v10 §16): un color por estado, rotado −6°, se estampa al abrir ───────── */
.hf-sello-caja{position:relative;display:inline-block;flex:none;width:92px;height:92px}
.hf-sello-lg{width:150px;height:150px}.hf-sello-imp{width:120px;height:120px}
.hf-sello{--ec:var(--hf-verdin-texto);display:block;width:100%;height:100%;overflow:visible;transform:rotate(-6deg)}
.hf-sello.ob{--ec:var(--hf-brasa-texto)}.hf-sello.no{--ec:var(--hf-alerta-texto)}.hf-sello.pe{--ec:var(--hf-tenue)}
.hf-sello circle{fill:none;stroke:var(--ec)}
.hf-sello .s-dent{stroke-width:4;stroke-dasharray:1.1 1.75}
.hf-sello .s-o{stroke-width:1.6}.hf-sello .s-i{stroke-width:1.1}
.hf-sello.pe .s-o,.hf-sello.pe .s-i{stroke-dasharray:3 3}.hf-sello.pe .s-dent{opacity:.45}
.hf-sello text{fill:var(--ec);font-family:var(--hf-f-mono);font-variant-numeric:tabular-nums}
.hf-sello .s-r{font-size:7.4px;font-weight:600;letter-spacing:.4px}
.hf-sello .s-d{font-size:7px;font-weight:500}.hf-sello .s-h{font-size:8px;font-weight:600;letter-spacing:.8px}
.hf-sello .s-lg polygon{fill:var(--ec)}
.hf-sello-caja.estampa .hf-sello{animation:hf-sello-entra 750ms cubic-bezier(.2,1.5,.35,1) both}
.hf-sello-caja.estampa::after{content:"";position:absolute;inset:6%;border-radius:50%;border:2px solid var(--hf-verdin);opacity:0;
  pointer-events:none;animation:hf-sello-onda .7s .32s ease-out}
@keyframes hf-sello-entra{0%{transform:rotate(-18deg) scale(1.75);opacity:0}55%{transform:rotate(-4deg) scale(.93);opacity:1}100%{transform:rotate(-6deg) scale(1)}}
@keyframes hf-sello-onda{from{transform:scale(.8);opacity:.7}to{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.hf-sello-caja .hf-sello,.hf-sello-caja::after{animation:none!important}}
.hf-sello-mini{--ec:var(--hf-verdin-texto);width:30px;height:30px;flex:none;overflow:visible}
.hf-sello-mini.ob{--ec:var(--hf-brasa-texto)}.hf-sello-mini.no{--ec:var(--hf-alerta-texto)}.hf-sello-mini.pe{--ec:var(--hf-tenue)}
.hf-sello-mini circle{fill:none;stroke:var(--ec)}.hf-sello-mini .s-dent{stroke-width:3;stroke-dasharray:1 1.6}.hf-sello-mini .s-o{stroke-width:1.2}
.hf-sello-mini.pe .s-o{stroke-dasharray:2 2}
.hf-sello-mini path{fill:none;stroke:var(--ec);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hf-recibo-tarjeta{grid-template-columns:auto auto minmax(0,1fr) auto}
.hf-recibo-tarjeta .hf-sello-mini{grid-row:1 / span 2;align-self:center}
.hf-recibo-tarjeta .hf-recibo-meta{grid-column:3}
.hf-recibo-tarjeta .hf-recibo-folio{grid-column:2}.hf-recibo-tarjeta .hf-recibo-ref{grid-column:3}
.hf-recibo-tarjeta .hf-recibo-estado{grid-column:4}
.hf-recibo-cabeza{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
.hf-recibo-cabeza > :not(.hf-sello-caja){grid-column:1}
.hf-recibo-cabeza > .hf-sello-caja{grid-column:2;grid-row:1 / span 3;margin:-6px -6px 0 0}
@media (max-width:560px){
  .hf-recibo-tarjeta{grid-template-columns:auto minmax(0,1fr)}
  .hf-recibo-tarjeta .hf-recibo-folio,.hf-recibo-tarjeta .hf-recibo-ref,.hf-recibo-tarjeta .hf-recibo-meta,.hf-recibo-tarjeta .hf-recibo-estado{grid-column:2;grid-row:auto}
  .hf-recibo-tarjeta .hf-sello-mini{grid-row:1 / span 4}
  .hf-recibo-cabeza > .hf-sello-caja{width:72px;height:72px}
}
/* ───────── vista imprimible (handoff §8): papel claro aunque el tema sea oscuro, carta con márgenes de 14 mm ───────── */
.hf-recibo-imprimible{display:none}
@media print{
  @page{size:letter;margin:14mm}
  body{background:#fff;color:#1a1008}
  body *{visibility:hidden}
  .hf-recibo-imprimible,.hf-recibo-imprimible *{visibility:visible}
  .hf-recibo-imprimible{display:block;position:absolute;inset:0 auto auto 0;width:100%;color:#1a1008;font:11pt/1.45 var(--hf-f-texto)}
  .hf-recibo-imprimible header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1a1008;padding-bottom:8pt}
  .hf-recibo-imprimible .hf-logo{color:#1a1008}
  .hf-recibo-imprimible .hf-logo-marca .b,.hf-recibo-imprimible .hf-logo-marca .r1{fill:#17806c}
  .hf-recibo-imprimible .hf-logo-marca .r0{fill:#4fd1b5}.hf-recibo-imprimible .hf-logo-marca .r2{fill:#0e4a3f}
  .hf-imp-id{font:500 10pt var(--hf-f-mono);letter-spacing:.08em;text-transform:uppercase}
  .hf-recibo-imprimible h1{font:700 22pt/1.05 var(--hf-f-display);text-transform:uppercase;margin:12pt 0 8pt;animation:none}
  .hf-imp-sello{display:inline-grid;place-items:center;text-align:center;width:120pt;height:120pt;border:3px solid #17806c;border-radius:50%;
    color:#11705f;font:700 13pt/1.1 var(--hf-f-display);text-transform:uppercase;transform:rotate(-6deg);float:right;margin:0 0 8pt 12pt;padding:10pt}
  .hf-imp-sello small{display:block;font:500 7.5pt var(--hf-f-mono);text-transform:none;margin-top:4pt}
  .hf-recibo-imprimible dl{display:grid;grid-template-columns:max-content 1fr;gap:4pt 14pt;margin:8pt 0}
  .hf-recibo-imprimible dt{font:500 8.5pt var(--hf-f-mono);text-transform:uppercase;letter-spacing:.08em;color:#6a6054}
  .hf-recibo-imprimible dd{overflow-wrap:anywhere}
  .hf-recibo-imprimible .hf-sello-caja{float:right;margin:0 0 8pt 12pt}
  .hf-recibo-imprimible .hf-sello{--ec:#11705f;animation:none}.hf-recibo-imprimible .hf-sello.ob{--ec:#a83a05}
  .hf-recibo-imprimible .hf-sello.no{--ec:#b52a30}.hf-recibo-imprimible .hf-sello.pe{--ec:#6a6054}
  .hf-recibo-imprimible pre{clear:both;white-space:pre-wrap;overflow-wrap:anywhere;font:8.5pt/1.45 var(--hf-f-mono);margin-top:10pt;border-top:1px solid #1a1008;padding-top:8pt}
}