/* HyperForge · Decidir y Ops (Grupo 2 del diseño v2): Órdenes, Tickets, Ticket, /firmar/<id> y /conectores/aprobar/<id>.
   Solo tokens de tokens.css (--hf-*). Filas de lista con esquinas 4/18 que se invierten al pasar (handoff §4, `.orw`), estados con
   forma + palabra (HFUI.chip) y la decisión aparte. Sin scroll horizontal en ningún ancho: lo largo se parte o se envuelve. */

/* ───────── filtros en cápsula (solo en estas pantallas) ───────── */
.hf-filtros .campo{min-width:0;max-width:100%}
.hf-filtros .segmentos{flex-wrap:nowrap;gap:4px;padding:4px;border:1px solid var(--hf-linea);border-radius:var(--hf-r-pildora);background:var(--hf-panel);
  max-width:100%;overflow-x:auto;scrollbar-width:thin}
.hf-filtros .segmentos li{flex:none}
.hf-filtros .segmentos a{min-height:34px;padding:0 14px;border:0;border-radius:var(--hf-r-pildora);color:var(--hf-tenue);
  font:500 13px var(--hf-f-display);transition:color var(--hf-dur),background var(--hf-dur)}
.hf-filtros .segmentos a:hover{color:var(--hf-texto);background:var(--hf-panel-2)}
.hf-filtros .segmentos a[aria-current="true"]{color:var(--hf-fondo);background:var(--hf-texto)}
.hf-filtros .segmentos a:focus-visible{outline:2px solid var(--hf-foco);outline-offset:2px}

/* ───────── lista + detalle (Órdenes) ───────── */
.hf-ordenes{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:var(--s5)}
.hf-lista,.hf-detalle{min-width:0}
.hf-detalle{position:sticky;top:16px;display:grid;gap:14px}
.hf-detalle-vacio p{color:var(--hf-tenue)}
.hf-cuenta{font:600 11px var(--hf-f-mono);background:var(--hf-panel-2);color:var(--hf-texto);border-radius:var(--hf-r-pildora);padding:2px 9px}
.hf-lista + .hf-lista,#contenido > .hf-lista{margin-top:var(--s5)}
.hf-filas{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hf-fila{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) auto;gap:3px 12px;align-items:center;padding:10px 12px;
  color:var(--hf-texto);text-decoration:none;background:var(--hf-panel-2);border:1px solid var(--hf-linea);border-radius:4px 18px 4px 18px;
  transition:border-color var(--hf-dur),border-radius var(--hf-dur-lenta) var(--hf-facil),transform var(--hf-dur) var(--hf-facil)}
.hf-fila:hover,.hf-fila[aria-current="page"]{border-color:var(--hf-texto);border-radius:18px 4px 18px 4px}
.hf-fila:hover{transform:translateY(-1px)}
.hf-fila:focus-visible{outline:2px solid var(--hf-foco);outline-offset:3px}
.hf-fila-id{font:500 11px var(--hf-f-mono);color:var(--hf-brasa-texto);overflow-wrap:anywhere}
.hf-fila-titulo{font:600 15px/1.25 var(--hf-f-display);word-spacing:var(--hf-ws-display);overflow-wrap:anywhere}
.hf-fila-meta{grid-column:2;display:flex;flex-wrap:wrap;gap:2px 10px;font:400 11.5px var(--hf-f-mono);color:var(--hf-tenue);min-width:0}
.hf-fila-meta span{overflow-wrap:anywhere}
.hf-fila-meta .urgente{color:var(--hf-brasa-texto);font-weight:600}
.hf-fila-estado{grid-column:3;grid-row:1 / 3;justify-self:end}

/* ───────── detalle de una orden ───────── */
.hf-datos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;margin:0;font-size:14px}
.hf-datos dt{font:400 11px/1.9 var(--hf-f-mono);letter-spacing:var(--hf-track-label);text-transform:uppercase;color:var(--hf-tenue)}
.hf-datos dd{margin:0;overflow-wrap:anywhere}
.hf-bloque{border-top:1px solid var(--hf-linea);padding-top:12px;display:grid;gap:8px}
.hf-bloque h3{font:600 13px var(--hf-f-display);letter-spacing:.02em;margin:0}
.hf-nota{color:var(--hf-tenue);font-size:13px}
.hf-dato-ajeno{margin:0;padding:8px 12px;border-left:2px solid var(--hf-linea-2);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:240px;overflow:auto}
.hf-estados{list-style:none;margin:0;padding:0;display:grid}
.hf-estados li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:7px 0;border-top:1px solid var(--hf-linea);
  font-size:13px}
.hf-estados li:first-child{border-top:0}
.hf-estados li > span:nth-child(2){overflow-wrap:anywhere}
.hf-estados time{font:400 11px var(--hf-f-mono);color:var(--hf-tenue)}
.hf-estados-punto{width:10px;height:10px;margin-left:6px;border-radius:50%;border:1.5px dotted var(--hf-tenue)}
.hf-acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* «No puedes firmar esto porque lo pediste tú»: el motivo en palabras, con su glifo; nunca solo color */
.hf-veto{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;border:1px solid var(--hf-alerta-texto);
  border-radius:var(--hf-r-control);background:color-mix(in srgb,var(--hf-alerta) 8%,var(--hf-panel))}
.hf-veto > .hf-icono{width:20px;height:20px;color:var(--hf-alerta-texto)}
.hf-veto b{display:block;font:600 15px var(--hf-f-display)}
.hf-veto p{margin:4px 0 0;color:var(--hf-texto);font-weight:400}

/* ───────── decisión de un ticket (firma.js) y de una solicitud del harness ───────── */
.hf-decision{display:grid;gap:14px}
.hf-decision > * + *{margin-top:0}
.hf-abc{border:0;margin:0;padding:0;display:grid;gap:8px}
.hf-abc legend{font:400 11px var(--hf-f-mono);letter-spacing:var(--hf-track-label);text-transform:uppercase;color:var(--hf-tenue);margin-bottom:6px}
.opcion.hf-abc-opcion{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--hf-linea);border-radius:4px 18px 4px 18px;
  background:var(--hf-panel-2);box-shadow:none;transition:border-color var(--hf-dur),border-radius var(--hf-dur-lenta) var(--hf-facil)}
.opcion.hf-abc-opcion:last-of-type{border-bottom:1px solid var(--hf-linea)}
.opcion.hf-abc-opcion:hover{border-color:var(--hf-linea-2)}
.opcion.hf-abc-opcion:has(input:checked){border-color:var(--hf-texto);border-radius:18px 4px 18px 4px}
.opcion.hf-abc-opcion:focus-within{outline:2px solid var(--hf-foco);outline-offset:2px}
.opcion.hf-abc-opcion label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;overflow-wrap:anywhere;min-width:0}
.hf-abc-opcion input{accent-color:var(--hf-brasa)}
.hf-letra{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;font:700 13px var(--hf-f-display);
  background:var(--hf-texto);color:var(--hf-fondo)}
.hf-decision-estado{margin:0}
.hf-decision-sello{display:grid;gap:8px}

/* ───────── ticket ───────── */
.hf-ticket-cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:14px}
.hf-ticket-estado{display:grid;gap:6px;min-width:0;flex:1 1 220px;justify-items:start}
.hf-ticket-estado .bajada{margin:0;overflow-wrap:anywhere}
.hf-limite{display:grid;gap:2px;padding:10px 16px;border:1px solid var(--hf-linea);border-radius:var(--hf-r-tarjeta);background:var(--hf-panel)}
.hf-limite b{font:600 34px/1 var(--hf-f-display);letter-spacing:-.01em}
.hf-limite > span:last-child{font:400 12px var(--hf-f-mono);color:var(--hf-tenue)}
.hf-limite.urgente,.hf-limite.vencido{border-color:var(--hf-brasa-texto)}
.hf-limite.urgente b,.hf-limite.vencido b{color:var(--hf-brasa-texto)}
.hf-ticket-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 20px}
.hf-ticket-datos .bloque{overflow-wrap:anywhere}

/* ───────── /firmar/<id> y /conectores/aprobar/<id> ───────── */
.firmar.hf-firmar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start;max-width:none}
.hf-firmar-izq{display:grid;gap:14px;min-width:0}
.hf-firmar .firmar-formulario,.hf-firmar .hf-decision-conector{position:sticky;top:16px;display:grid;gap:14px}
.hf-firmar .firmar-formulario > * + *{margin-top:0}
.hf-firmar .firmar-formulario h2{font:600 18px var(--hf-f-display);margin:0}
.hf-firmar .firmar-objeto{max-height:none;border-color:var(--hf-linea)}
.hf-firmar .firmar-objeto h2{font:600 15px var(--hf-f-display)}
.hf-firmar .firmar-objeto pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px;margin:0}
.hf-firmar .mono,.hf-firmar pre{text-transform:none;letter-spacing:.01em}   /* los datos se ven tal cual: sin mayúsculas forzadas */
.hf-reloj-firma{font:500 12px var(--hf-f-mono);color:var(--hf-brasa-texto);margin-top:10px}
.firmar-sello.hf-tarjeta{display:grid;gap:10px;max-width:640px;border-width:1px}
.firmar-sello.hf-tarjeta h2{font:700 clamp(22px,2.4vw,30px)/1 var(--hf-f-display);text-transform:uppercase;margin:0}

/* ───────── «Por decidir»: los demás tipos reales que se suman a la cola del Panel ───────── */
.hf-cola-item-fijo:hover{transform:none;border-radius:var(--hf-r-tarjeta-inv);border-color:var(--hf-linea)}
.hf-cola-nota{font-size:12.5px;color:var(--hf-tenue);margin-top:6px;max-width:60ch}

/* ───────── anchos: 821–1280 sin desborde; una columna desde 1100; móvil ≤ 820 ───────── */
@media (max-width:1100px){
  .hf-ordenes,.firmar.hf-firmar{grid-template-columns:minmax(0,1fr)}
  .hf-ordenes.con-detalle .hf-detalle{order:-1}
  .hf-detalle,.hf-firmar .firmar-formulario,.hf-firmar .hf-decision-conector{position:static}
}
@media (max-width:560px){
  .hf-fila{grid-template-columns:minmax(0,1fr)}
  .hf-fila-meta,.hf-fila-estado{grid-column:1;grid-row:auto;justify-self:start}
  .hf-datos{grid-template-columns:minmax(0,1fr)}
  .hf-datos dd{margin-bottom:6px}
  .hf-limite{width:100%}
  .hf-estados li{grid-template-columns:minmax(0,1fr)}
}
/* 13-nov: «Uso del mes» en el Panel, la barra del plan en grande (el saldo del admin va aparte, en brasa) */
.hf-uso-mes-cuerpo{display:grid;gap:var(--hf-e2)}
.hf-uso-pct{margin:0;display:flex;align-items:baseline;gap:6px;color:var(--hf-tenue)}
.hf-uso-pct strong{font:600 var(--hf-t-xl)/1 var(--hf-f-display);color:var(--hf-texto)}
.hf-uso.hf-uso-grande{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;width:100%}
.hf-uso-grande > .hf-uso-rotulo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* el título de la tarjeta ya lo dice */
.hf-uso-grande .hf-uso-saldo .hf-uso-rotulo{grid-column:1/-1}
.hf-uso-grande .hf-uso-barra{width:100%;height:12px}
.hf-uso-grande .hf-uso-saldo{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;padding:var(--hf-e2) 0 0;border-left:0;border-top:1px solid var(--hf-linea-2)}
.hf-uso-nota{margin:0;color:var(--hf-tenue);font-size:var(--hf-t-sm)}
@media (max-width:1100px){.hf-panel-izq .hf-uso-mes{order:3}}   /* en una columna: después de la cola, antes de las cifras */