/* ============================================================
   sistema.css: la capa de componentes
   ------------------------------------------------------------
   Capa ADITIVA sobre app.css: usa sus variables (--tx*, --accent,
   --surface, --border*, --shadow*, --ease, --t-micro) y no pisa
   ninguna clase existente (.btn, .badge, .card siguen siendo la
   verdad). Prefijo hm- en todo. La referencia viva está en
   /estilo.php.
   Se adopta en lo nuevo y en lo que se toca, nunca re-pintando.
   ============================================================ */

/* ── Movimiento ──────────────────────────────────────────────
   Entrada escalonada para los bloques de una página (60ms entre
   hermanos). Poner .hm-anim en el contenedor de primer nivel.
   Las animaciones de entrada del sistema no tocan opacity. Las islas (facturador .fmf, etc.) se
   ocultan con opacity:0 + pointer-events:none, y un keyframe con
   opacity + fill backwards se lo pisa: el modal aparece como fantasma
   con su overlay oscuro durante la entrada. Solo translateY. El fade
   de apertura de cada modal es asunto del modal, no de la entrada. */
@keyframes hmSlide { from { transform: translateY(8px); } to { transform: none; } }
/* Por lo mismo: la entrada anima transform, y hay elementos que se
   ocultan POR transform (toasts corridos con translateX fuera de pantalla).
   Un contenedor de toast vacío no debe pintarse nunca, lo pise quien lo pise. */
.hm-anim > * { animation: hmSlide .4s var(--ease, ease-out) backwards; }
/* link que abre en otra pestaña: el ícono de la casa (caja con flecha) en vez de la flecha suelta ↗ */
.hm-ext { display: inline-flex; align-items: center; gap: 4px; }
.hm-ext svg { flex: none; opacity: .8; }
/* El panel "instrumento" (login y pantalla de corte, instrumento_panel.php): navy de humi, un solo tema a propósito */
.hm-inst { background: linear-gradient(165deg, #12233d 0%, var(--accent, #1E3A5F) 60%, #274a78 100%); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 48px; position: relative; overflow: hidden; min-height: 0; }
.hm-inst::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; }
.hm-inst > * { position: relative; }
.hm-inst .wm { font: 800 34px 'Inter', sans-serif; letter-spacing: -.04em; line-height: 1; }
.hm-inst .wm b { color: #95A748; }
.hm-inst .fecha { font-size: 14px; color: rgba(255,255,255,.62); font-weight: 500; }
.hm-inst .hora { font: 800 76px 'JetBrains Mono', monospace; letter-spacing: -.04em; line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.hm-inst .hora .ss { font-size: 30px; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: 0; margin-left: 6px; }
.hm-inst .regla { margin-top: 34px; }
.hm-inst .regla .rl { display: flex; justify-content: space-between; font: 600 11px 'JetBrains Mono', monospace; color: rgba(255,255,255,.55); }
.hm-inst .regla .bar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); margin-top: 8px; }
.hm-inst .regla .bar .pin { position: absolute; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.22); transform: translateX(-50%); }
.hm-inst .regla .txt { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 14px; line-height: 1.5; max-width: 340px; }
.hm-inst .empresa { display: flex; align-items: center; gap: 10px; font: 600 13.5px 'Sora', 'Inter', sans-serif; color: rgba(255,255,255,.85); }
.hm-inst .empresa .chip { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #FFF8E7; flex: none; }
.hm-inst .empresa .chip img { width: 22px; height: 20px; display: block; }
.hm-inst .empresa small { display: block; font: 500 11.5px 'Inter', sans-serif; color: rgba(255,255,255,.55); margin-top: 1px; }
@media (max-width: 900px) { .hm-inst { padding: 24px; } .hm-inst .hora { font-size: 46px; } .hm-inst .regla { display: none; } .hm-inst .mid { margin: 14px 0; } }

.hm-anim > *:nth-child(1) { animation-delay: .02s; }
.hm-anim > *:nth-child(2) { animation-delay: .08s; }
.hm-anim > *:nth-child(3) { animation-delay: .14s; }
.hm-anim > *:nth-child(4) { animation-delay: .20s; }
.hm-anim > *:nth-child(5) { animation-delay: .26s; }
.hm-anim > *:nth-child(6) { animation-delay: .32s; }

/* Pulso: SOLO donde algo está pasando ahora mismo (un proceso
   vivo, una espera activa). Jamás decorativo. */
@keyframes hmPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.35); } 50% { box-shadow: 0 0 0 5px rgba(245,158,11,0); } }
.hm-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); animation: hmPulse 2s ease infinite; vertical-align: 1px; }

/* Entrada de página GLOBAL: los primeros bloques del contenido (.main del
   shell) escalonan solos en todas las páginas, sin tocar cada módulo.
   Igual que .hm-anim: hmSlide, sin opacity (ver Movimiento, arriba). */
.main > *:nth-child(-n+6):not([style*="display:none"]):not([style*="display: none"]) { animation: hmSlide .35s var(--ease, ease-out) backwards; }
.main > *:nth-child(2) { animation-delay: .05s; }
.main > *:nth-child(3) { animation-delay: .10s; }
.main > *:nth-child(4) { animation-delay: .15s; }
.main > *:nth-child(5) { animation-delay: .20s; }
.main > *:nth-child(6) { animation-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
    .hm-anim > *, .main > * { animation: none; }
    .hm-live { animation: none; }
}

/* ── El esqueleto de página ─────────────────────────────────
   Título + subtítulo a la izquierda, acciones a la derecha.
   Siempre en el mismo lugar, en todas las pantallas. */
.hm-ph { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.hm-ph h1 { font-family: 'Sora', sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--tx); margin: 0; }
.hm-ph .hm-sub { font-size: 12.5px; color: var(--tx3); margin-top: 3px; }
.hm-ph .hm-acts { margin-left: auto; display: flex; gap: 8px; }

/* ── Sub-navegación del módulo (tabs) ───────────────────────── */
.hm-subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 14px 0 20px; overflow-x: auto; }
.hm-subnav a { padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--tx3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--t-micro, .12s) ease; }
.hm-subnav a:hover { color: var(--tx); }
.hm-subnav a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Lentes (filtros de una lista, con conteo) ──────────────── */
.hm-lens { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.hm-lens button { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill, 999px); padding: 6px 14px; font: 600 12px 'Inter', sans-serif; color: var(--tx2); cursor: pointer; transition: all var(--t-micro, .12s) ease; }
.hm-lens button:hover { border-color: var(--border-strong); }
.hm-lens button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.hm-lens button i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 11px; opacity: .7; margin-left: 5px; }

/* ── KPIs (cifras que son puertas) ──────────────────────────── */
.hm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.hm-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card, 12px); padding: 14px 16px; box-shadow: var(--shadow-sm); position: relative; transition: transform .18s var(--ease, ease-out), box-shadow .18s var(--ease, ease-out); }
a.hm-kpi { display: block; text-decoration: none; cursor: pointer; }
a.hm-kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.hm-kpi .hm-l { font: 700 10px 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .07em; color: var(--tx4); }
.hm-kpi .hm-v { font: 600 22px 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; margin-top: 5px; letter-spacing: -.02em; color: var(--tx); }
.hm-kpi .hm-d { font-size: 11px; margin-top: 3px; color: var(--tx4); }
.hm-kpi .hm-d.up { color: var(--green-text); }
.hm-kpi .hm-d.down { color: var(--red-text); }
.hm-kpi .hm-spark { position: absolute; right: 14px; top: 16px; width: 76px; height: 26px; color: var(--link); opacity: .9; }

/* ── La tabla de datos única ────────────────────────────────
   th chicos en mayúsculas, números en mono a la derecha (.num),
   filas clickeables con hover. Envolver en .hm-dt-wrap si puede
   desbordar a lo ancho. */
.hm-dt-wrap { overflow-x: auto; }
table.hm-dt { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-card, 12px); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.hm-dt th { text-align: left; font: 700 10px 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .07em; color: var(--tx4); padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.hm-dt th.num, .hm-dt td.num { text-align: right; }
.hm-dt td { padding: 11px 14px; border-bottom: 1px solid var(--border-light); font-size: 13px; color: var(--tx); transition: background var(--t-micro, .12s) ease; }
.hm-dt tr:last-child td { border-bottom: none; }
.hm-dt tbody tr.link { cursor: pointer; }
.hm-dt tbody tr.link:hover td { background: var(--accent-50); }
.hm-dt td.num { font: 500 13px 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.hm-dt td .hm-who { font-weight: 600; color: var(--tx); }
.hm-dt td .hm-sub2 { font-size: 11px; color: var(--tx4); display: block; margin-top: 1px; }
/* celda sin dato: <td class="num vacio">·</td> */
.hm-dt td.vacio { color: var(--tx4); }

/* ── Estado vacío (dice qué hacer, no "no hay datos") ───────── */
.hm-empty { text-align: center; padding: 38px 20px; color: var(--tx4); font-size: 13px; }
.hm-empty b { display: block; color: var(--tx2); font-size: 14px; margin-bottom: 4px; }
.hm-empty .btn { margin-top: 12px; }
.hm-empty > svg { display: block; margin: 0 auto 10px; color: var(--tx4); }

/* ── Piezas que comparten el mostrador y el puesto de caja (ms-) ──── */
.ms-in { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font: 500 13.5px 'Inter', sans-serif; background: var(--surface); color: var(--tx); }
.ms-in::placeholder { color: var(--tx4); }
.ms-in:focus { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.ms-pill.lente { cursor: pointer; }
.ms-pill.lente.on { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }

/* ── El post-it de nota interna (mismo diseño que el del facturador) ── */
.hm-postit { position: fixed; width: 250px; background: var(--postit-bg-2); border-radius: 2px; box-shadow: 0 8px 22px rgba(15, 23, 36, .25); padding: 10px 10px 7px; z-index: var(--z-fija); }
/* la pestaña que lo cuelga del lápiz: el post-it no flota suelto */
.hm-postit::before { content: ''; position: absolute; top: -7px; right: 14px; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--postit-bg-2); }
.hm-postit::after { content: ''; position: absolute; top: -3px; right: 10px; width: 22px; height: 9px; background: var(--mark-bg); opacity: .8; }
.hm-postit textarea { width: 100%; height: 60px; background: none; border: 0; outline: none; resize: none; font: 500 12.5px 'Inter', sans-serif; color: var(--postit-ink); display: block; }
.hm-postit textarea::placeholder { color: var(--yellow-text); opacity: .55; }
.hm-postit textarea:focus, .hm-postit textarea:focus-visible { outline: none; box-shadow: none; } /* el papel no lleva anillo de foco */
.hm-postit .hint { font-size: 10.5px; color: var(--yellow-text); opacity: .8; margin-top: 3px; }
.hm-postit-l { max-height: 140px; overflow-y: auto; margin-bottom: 6px; }
.hm-postit-l .n { font-size: 12px; color: var(--postit-ink); padding: 4px 0; border-bottom: 1px dashed var(--postit-line); }
.hm-postit-l .n:last-child { border-bottom: 0; }
.hm-postit-l .n b { font-weight: 700; } .hm-postit-l .n small { color: var(--postit-ink-2); opacity: .8; margin-left: 4px; }
.hm-postit-l .v { font-size: 11px; color: var(--postit-ink-2); opacity: .75; }

/* ── Cargando: el único placeholder de espera del sistema (tres barras que respiran + texto opcional) ──
   Arriba, la marca: una línea fina por la que viaja el punto lima con una
   estela navy. Solo CSS sobre .hm-cargando (::before la línea y la estela, ::after el punto): aparece en los ~100 lugares
   sin tocar su HTML. Si tarda más de 8 s, el texto suma "sigue cargando". Reduced-motion: el punto quieto que parpadea. */
.hm-cargando { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 10px; position: relative; width: 100%; box-sizing: border-box; text-align: left; }
.hm-cargando::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(var(--accent), var(--accent)) no-repeat, var(--border-light);
    animation: hmEstela 1.6s var(--ease, ease) infinite; }
.hm-cargando::after { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
    background: var(--signal); box-shadow: 0 0 0 3px rgba(149, 167, 72, .18); animation: hmPunto 1.6s var(--ease, ease) infinite; }
@keyframes hmEstela { 0% { background-size: 0 100%, auto; background-position: 0 0, 0 0; } 50% { background-size: 70% 100%, auto; background-position: 0 0, 0 0; } 100% { background-size: 0 100%, auto; background-position: 100% 0, 0 0; } }
@keyframes hmPunto { 0% { left: 0; } 50% { left: 70%; } 100% { left: 100%; } }
.hm-cargando span::after { content: ' · sigue cargando, tarda más de lo normal'; opacity: 0; animation: hmTarda .4s 8s forwards; }
@keyframes hmTarda { to { opacity: 1; } }
.hm-cargando i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--surface-alt) 25%, var(--border-light) 50%, var(--surface-alt) 75%); background-size: 200% 100%; animation: hmShimmer 1.3s ease-in-out infinite; }
.hm-cargando i:nth-child(1) { width: 58%; } .hm-cargando i:nth-child(2) { width: 84%; } .hm-cargando i:nth-child(3) { width: 40%; }
.hm-cargando span { font: 500 11.5px 'Inter', sans-serif; color: var(--tx4); margin-top: 2px; }
@keyframes hmShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .hm-cargando i { animation: none; }
    .hm-cargando::before { animation: none; background: var(--border-light); }
    .hm-cargando::after { left: 50%; animation: hmQuieto 2.4s ease-in-out infinite; }
    .hm-riel-chico { animation: none; background: color-mix(in srgb, currentColor 22%, transparent); }
    .hm-riel-chico::after { animation: hmQuieto 2.4s ease-in-out infinite; left: 50%; }
    .hmt.proceso .hmt-ico, .fbg-chip.firmando .fbg-ico, .fm-pick-load::before, .fm-res-load::before, .fm-aut-spin,
    .fm-cta-ico.busy .fm-ico-busy::before, #fm-mobile .fmm-status.enviando::before { animation: hmRielMiniQuieto 2.4s ease-in-out infinite !important; }
}
@keyframes hmQuieto { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── el botón ocupado: hmOcupado(btn, 'Guardando') pone la línea chica y el texto; ocupado NO es apagado ── */
.hm-riel-chico { position: relative; display: inline-block; width: 30px; height: 2px; border-radius: 2px; margin-right: 9px; vertical-align: middle; flex: none;
    background: linear-gradient(currentColor, currentColor) no-repeat, color-mix(in srgb, currentColor 22%, transparent); animation: hmEstela 1.6s var(--ease, ease) infinite; }
.hm-riel-chico::after { content: ''; position: absolute; top: -2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--signal); animation: hmPunto 1.6s var(--ease, ease) infinite; }
/* solo el botón que hmOcupado puso a trabajar (con su línea): un botón apagado con aria-busy pero sin línea, como el
   Facturar de la caja mientras carga, se sigue viendo apagado */
[aria-busy="true"]:disabled:has(.hm-riel-chico) { opacity: 1 !important; cursor: progress; }
/* la misma línea con el punto en UN solo elemento (sirve en un ::before y en los íconos de toasts y chips): reemplaza a los
   circulitos que giraban. Uso: background: var(--hm-riel); animation: hmRielMini ...; 24x6 px */
:root { --hm-riel: radial-gradient(circle 3px, var(--signal) 96%, transparent) no-repeat, linear-gradient(currentColor, currentColor) no-repeat, linear-gradient(color-mix(in srgb, currentColor 22%, transparent), color-mix(in srgb, currentColor 22%, transparent)) no-repeat; }
@keyframes hmRielMini {
    0% { background-size: 6px 6px, 0 2px, 100% 2px; background-position: 0 50%, 0 50%, 0 50%; }
    50% { background-size: 6px 6px, 70% 2px, 100% 2px; background-position: 70% 50%, 0 50%, 0 50%; }
    100% { background-size: 6px 6px, 0 2px, 100% 2px; background-position: 100% 50%, 100% 50%, 0 50%; }
}
@keyframes hmRielMiniQuieto {
    0%, 100% { background-size: 6px 6px, 0 2px, 100% 2px; background-position: 50% 50%, 0 50%, 0 50%; opacity: 1; }
    50% { background-size: 6px 6px, 0 2px, 100% 2px; background-position: 50% 50%, 0 50%, 0 50%; opacity: .35; }
}

/* ── Barra de scroll de humi: fina, redonda, sin riel; aparece más oscura al pasar por encima ── */
/* Chrome ignora los ::-webkit-scrollbar si el elemento lleva scrollbar-width/color (y dibuja la nativa con flechas):
   las propiedades estándar van solo para los navegadores sin ::-webkit-scrollbar (Firefox) */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); } /* recta, pegada al borde, sin aire */
*::-webkit-scrollbar-thumb:hover { background-color: var(--tx4); }
*::-webkit-scrollbar-button, *::-webkit-scrollbar-button:start:decrement, *::-webkit-scrollbar-button:end:increment { display: none !important; width: 0 !important; height: 0 !important; } /* sin flechas ni su lugar en las puntas */
*::-webkit-scrollbar-track-piece { background: transparent; margin: 0; }

/* ── El botón del lenguaje 2026 (.ms-btn) ────────────────────
   Acá va lo común, para que lo usen también las piezas compartidas
   (humiConfirm, islas, cualquier módulo). Lo que diverge (el .sm de
   mostrador es más chico que el de la caja, y .big y .ms-kbd son solo
   del mostrador) sigue en su página y gana por orden. */
.ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font: 700 13px 'Inter', sans-serif; padding: 10px 16px; text-decoration: none; }
.ms-btn.navy { background: var(--accent); color: var(--on-accent); }
.ms-btn.navy:hover { background: var(--accent-hover); }
.ms-btn.ghost { background: var(--surface); color: var(--tx); border-color: var(--border-strong); }
.ms-btn.ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.ms-btn.green { background: var(--green); color: var(--on-accent); }
.ms-btn.red { background: var(--surface); color: var(--red-text); border-color: var(--red-line); }
.ms-btn:disabled { opacity: .5; cursor: not-allowed; }
.ms-btn:focus-visible { outline: none; box-shadow: var(--focus); }

/* ── El velo (.hm-velo, assets/velo.js) ──────────────────────
   Uno solo detrás de toda ventana. Con dos a la vista, solo oscurece el de arriba. */
.hm-velo { position: fixed; inset: 0; background: var(--velo); z-index: var(--z-ventana); }
.hm-velo-bajo { background: transparent !important; } /* le gana a la regla propia de cada velo */

/* ── El diálogo del lenguaje 2026 (.hm-dlg) ──────────────────
   El blob del manual (estilo.php, "La bandeja, la ventana y el lomo"):
   bandeja de un color con radio 28 y lomo 16, ventana blanca con radio 12
   donde vive lo que se lee, y teclas abajo. Los tokens van acá porque es
   una pieza compartida. */
.hm-dlg-ov { position: fixed; inset: 0; background: var(--velo); z-index: var(--z-dialogo);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.hm-dlg { --hm-bandeja: #e8ecf2; --hm-ventana: #fff; --hm-tecla: #eef1f6;
  background: var(--hm-bandeja); border-radius: 28px; padding: 16px; width: 100%; max-width: 420px;
  box-shadow: 0 24px 60px -18px rgba(10,17,32,.45); }
.hm-dlg .hm-dlg-v { background: var(--hm-ventana); border-radius: 12px; padding: 18px 20px;
  font-size: 13.5px; line-height: 1.55; color: var(--tx); white-space: pre-line; }
.hm-dlg .hm-dlg-t { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.hm-dlg .hm-dlg-t .ms-btn { border-radius: 12px; border-color: transparent; }
.hm-dlg .hm-dlg-t .ms-btn.ghost { background: var(--hm-tecla); color: var(--tx2); }
.hm-dlg .hm-dlg-t .ms-btn.ghost:hover { color: var(--accent-ink); border-color: transparent; }
.hm-dlg .hm-dlg-t .ms-btn.red { background: var(--hm-tecla); }
[data-theme="dark"] .hm-dlg { --hm-bandeja: #1b2432; --hm-ventana: #243044; --hm-tecla: #2b3648; }

/* ── El camino (.hm-camino) ──────────────────────────────────
   El estado no es un dato al costado sino un lugar en un camino. Cada hito lleva su
   fecha y quién lo dio; el hito actual está marcado; el próximo hito
   ES la tecla. Sirve para una solicitud, una OC o un service. */
.hm-camino { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; }
.hm-paso { display: contents; }
.hm-paso .pt { position: relative; }
.hm-paso .pt:before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--accent-light); transform: translateX(-1px); }
.hm-paso.ini .pt:before { top: 14px; }
.hm-paso.fin .pt:before { bottom: auto; height: 14px; }
.hm-paso.ini.fin .pt:before { display: none; }
.hm-paso.prox .pt:before, .hm-paso.prox ~ .hm-paso .pt:before, .hm-paso.corte .pt:before { background: var(--border-light); }
.hm-paso .pt i { position: relative; z-index: 1; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin: 10px auto 0; border: 2px solid var(--surface); box-sizing: content-box; }
.hm-paso .lb { padding: 6px 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.hm-paso .lb b { font-size: 13px; font-weight: 700; color: var(--tx2); }
.hm-paso .lb .m { font: 500 11px 'JetBrains Mono', monospace; color: var(--tx3); font-variant-numeric: tabular-nums; }
.hm-paso .lb .q { font-size: 11px; color: var(--tx3); }
.hm-paso.aqui .pt i { width: 12px; height: 12px; margin-top: 7px; box-shadow: 0 0 0 4px var(--accent-light); }
.hm-paso.aqui .lb b { color: var(--tx); font-size: 15px; }
.hm-paso.aqui .lb .hace { font-size: 11px; font-weight: 700; color: var(--yellow-text); background: var(--yellow-bg); border-radius: 999px; padding: 1px 8px; }
.hm-paso.aqui .lb .llego { font-size: 11px; font-weight: 700; color: var(--signal-ink, #4d5a1f); background: var(--signal-bg, #eef1dc); border-radius: 999px; padding: 1px 8px; }
.hm-paso .lb .d { flex-basis: 100%; font-size: 11.5px; color: var(--tx3); margin-top: -3px; }
.hm-paso.prox .pt i { background: var(--surface); border: 1.5px solid var(--border-strong); width: 8px; height: 8px; margin-top: 12px; }
.hm-paso.prox .lb { padding: 4px 0 6px; align-items: center; }
.hm-paso.prox .lb .ms-btn { border-radius: 10px; padding: 7px 14px; font-size: 12.5px; }
.hm-paso.prox .lb b { color: var(--tx4); font-weight: 600; }
.hm-paso.prox .lb .o { font-size: 11px; color: var(--tx4); }
.hm-paso.prox .lb .o a { color: var(--red-text); font-weight: 700; text-decoration: none; cursor: pointer; }
.hm-paso.corte .pt i { background: var(--red-text); }
.hm-paso.corte .lb b { color: var(--red-text); }

/* ── Editar al tocar (.hm-toca) ──────────────────────────────
   Un campo que se lee como ficha y se edita en el lugar. Se tiene que ver que se puede escribir: relleno claro
   sin borde en reposo (la regla del blob para campos), blanco con
   anillo al tocar. Solo readonly queda como texto. */
.hm-toca { display: block; width: calc(100% + 20px); margin: 0 -10px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--surface-alt); font: 500 13.5px 'Inter', sans-serif; line-height: 1.45; color: var(--tx); resize: none; transition: border-color var(--t-micro, .12s) ease, background var(--t-micro, .12s) ease; }
.hm-toca:hover { border-color: var(--border); }
.hm-toca:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-50); }
.hm-toca[readonly], .hm-toca[readonly]:hover { border-color: transparent; background: transparent; cursor: default; }
.hm-toca.mono { font-family: 'JetBrains Mono', monospace; font-weight: 600; text-align: right; }

/* ── La barra de pestañas de un módulo (clientes y la ficha del proveedor): una sola pieza. */
/* Solapas del modulo (mismo lenguaje que las cc-links de cuentas): la seccion
   activa es carpeta abierta sobre la linea base. En la ficha no van: ahi la
   navegacion es el rotulo volver, y el protagonista es el cliente. */
.clh-links { display: flex; gap: 2px; border-bottom: 1.5px solid var(--tx); margin-top: 12px;
    overflow-x: auto; scrollbar-width: none; }
.clh-links::-webkit-scrollbar { display: none; }
.clh-link { padding: 7px 13px 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
    font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3);
    text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; border-bottom: none;
    border-radius: var(--r-sm, 6px) var(--r-sm, 6px) 0 0; }
.clh-link:hover { color: var(--tx); }
.clh-link.active { color: var(--accent); background: var(--surface); border-color: var(--tx); position: relative; }
.clh-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--surface); }
.clh-badge { display: inline-block; min-width: 15px; text-align: center; background: #1D3FA3; color: #fff;
    border-radius: 9px; padding: 1px 5px; font-size: 9px; margin-left: 3px; vertical-align: 1px; }

/* ── Encabezado de módulo (clientes y proveedores): fecha, título, buscador con "/", accesos. ── */
.clh { margin-bottom: 14px; }
.clh-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.clh-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--tx4); }
.clh-tit { display: block; margin: 2px 0 0; font-size: 21px; font-weight: 800;
    letter-spacing: -.025em; color: var(--tx); text-decoration: none; }
a.clh-tit:hover { color: var(--accent); }
/* En la ficha el titulo es el CLIENTE. "Clientes" baja a rotulo de navegacion:
   mismo lenguaje que los eyebrows del producto (mono, chico, espaciado), asi el
   nombre del cliente queda solo en su nivel y se lee primero. */
.clh-volver { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--tx3);
    text-decoration: none; padding: 4px 0; }
.clh-volver svg { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.clh-volver:hover { color: var(--accent); }
.clh-volver:hover svg { transform: translateX(-2px); }
.clh-buscar { position: relative; flex: 1 1 300px; max-width: 420px; }
.clh-buscar input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 36px 0 34px;
    border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
    font-family: inherit; font-size: 13px; color: var(--tx); }
.clh-buscar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); }
.clh-buscar .clh-lupa { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--tx4); pointer-events: none; display: flex; }
/* la tecla del atajo, como el ⌘K de arriba: una barra suelta en el placeholder
   no se entiende. Se va sola al escribir, para no taparle el texto. */
.clh-buscar .clh-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-family: inherit; font-size: 10px; background: var(--surface-alt, #F6F8FB);
    border: 1px solid var(--border); border-radius: var(--r-xs, 4px); padding: 1px 6px;
    color: var(--tx4); pointer-events: none; }
.clh-buscar input:focus ~ .clh-kbd,
.clh-buscar input:not(:placeholder-shown) ~ .clh-kbd { display: none; }
.clh-acc { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.clh-acc a, .clh-acc button { font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    text-decoration: none; color: var(--tx2, #5A6472); background: var(--surface);
    border: 1px solid var(--border); border-radius: 9px; padding: 0 14px; height: 38px;
    display: inline-flex; align-items: center; gap: 6px; }
.clh-acc a:hover, .clh-acc button:hover { border-color: var(--accent); color: var(--accent); }

/* resultados: el mismo dato en el mismo lugar que en la lista (nombre, cuenta, lo que debe) */
.clh-res { position: absolute; z-index: 60; top: calc(100% + 5px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15,23,36,.14); overflow: hidden; display: none; }
.clh-res.on { display: block; }
.clh-res a { display: flex; align-items: baseline; gap: 9px; padding: 8px 12px;
    text-decoration: none; color: var(--tx); border-bottom: 1px solid var(--border-light, var(--border)); }
.clh-res a:last-child { border-bottom: none; }
.clh-res a:hover, .clh-res a.sel { background: var(--surface-alt, #F6F8FB); }
.clh-res .nom { font-size: 13px; font-weight: 600; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clh-res .cta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--tx4); }
.clh-res .debe { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700;
    color: var(--red-text); white-space: nowrap; }
.clh-res .debe.ok { color: var(--tx4); font-weight: 400; }
.clh-res .vacio { padding: 10px 12px; font-size: 12.5px; color: var(--tx3); }


/* ══════════════ LA CABECERA DE LA CUENTA (.cab-b) ══════════════
   La misma para cliente y proveedor: son cuentas. Nombre y chip, dos tablas de datos, la plata a la derecha y los
   verbos en el pie. El proveedor usa el acento teja con .prov. */
.cab-b { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; overflow: hidden; margin-bottom: 12px; }
.cab-b .cuerpo-b { padding: 14px 16px 16px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px 28px; }
.cab-b h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.025em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cab-b .chip { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); background: var(--accent-50);
    border: 1px solid var(--accent-light); border-radius: 5px; padding: 3px 8px; }
.cab-b .tabla { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin-top: 10px; }
.cab-b .tabla .k { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); }
.cab-b .tabla .v { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0; }
.cab-b .tabla .v .sinmedir { color: var(--tx4); font-weight: 500; }
.cab-b .tabla .v .ir { color: var(--accent); font-weight: 700; text-decoration: none; margin-left: 8px; white-space: nowrap; }
.cab-b .tabla .v .mini { display: inline-block; margin-left: 6px; padding: 2px 8px; font: inherit; font-size: 10.5px; font-weight: 700; border: 1px solid var(--border);
    border-radius: 6px; background: var(--surface); color: var(--tx2, #5A6472); text-decoration: none; cursor: pointer; vertical-align: middle; }
.cab-b .tabla .v .mini.wa { background: #E9F5EC; border-color: #BFDEC8; color: #1D5B33; }
.cab-b .tabla .v .mini:hover { border-color: var(--accent); }
.cab-b .tabla .v input { border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 12px; width: 120px; }
.cab-b .col2 { padding-top: 34px; }
.cab-b .col2 .tabla { margin-top: 0; }
.cab-b .der { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; text-align: right; }
.cab-b .saldo { text-decoration: none; color: inherit; }
.cab-b .saldo .l, .cab-b .vend .l { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); }
.cab-b .saldo .l { display: block; }
.cab-b .saldo .v { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 1px;
    font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.cab-b .saldo .v.dos { font-size: 19px; letter-spacing: -.01em; white-space: nowrap; } /* pesos y dólares a la vez: entra en el mismo renglón */
.cab-b .saldo .v.rojo { color: var(--red-text); }
.cab-b .saldo .fav { display: block; font: 600 12px 'JetBrains Mono', monospace; color: var(--green-text); margin-top: 2px; }
.cab-b .saldo:hover .v { color: var(--accent); }
.cab-b .spark-a { display: block; color: var(--accent); line-height: 0; margin-top: 8px; }
.cab-b .spark-a:hover { color: var(--accent-hover, #16304f); }
.cab-b .spark { width: 130px; height: 28px; display: block; }
.cab-b .vend { text-decoration: none; color: var(--tx3); font-size: 12px; margin-top: 2px; display: flex; gap: 8px; align-items: baseline; }
.cab-b .vend .l { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.cab-b .vend .v { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tx2); font-size: 13px; }
.cab-b .vend:hover .v { color: var(--accent); }
.cab-b .paga { font-size: 12px; color: var(--tx3); }
.cab-b .paga b.rojo { color: var(--red-text); }
.cab-b .verbos { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface-alt, #F6F8FB); border-top: 1px solid var(--border); }
.cab-b .verbos a { font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--tx2, #5A6472); border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 14px; background: var(--surface); }
.cab-b .verbos a:hover { border-color: var(--accent); color: var(--accent); }
.cab-b .verbos a.p { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 900px) { .cab-b .cuerpo-b { grid-template-columns: 1fr; } .cab-b .col2 { padding-top: 0; } .cab-b .der { align-items: flex-start; text-align: left; } }
.cab-b .chip.prov { color: #8A4212; background: #F7EFE8; border-color: #EAD3C2; }
.cab-b .verbos a.p.prov { background: #8A4212; border-color: #8A4212; }
.cab-b .der .linea { font-size: 12px; color: var(--tx3); }
.cab-b .der .linea b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tx2); }
.cab-b .der .linea.vieja b { color: var(--tx3); }
.cab-b .der .linea.cuenta b { color: var(--green-text, #5C6B24); }
.cab-b .der .linea a { color: #8A4212; font-weight: 700; text-decoration: none; margin-left: 4px; cursor: pointer; }
.cab-b .tabla .v .chips { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }

/* ══════════════ LA CUENTA FIJA AL SCROLLEAR (assets/cuenta_fija.js) ══════════════
   Los datos mínimos fijos arriba al scrollear. Aparece cuando la cabecera sale de la pantalla,
   debajo de la barra superior. Va en el body: la .topbar tiene transform y atrapa a un position:fixed adentro. */
.hm-fija { position: fixed; z-index: calc(var(--z-fija) - 10); display: flex; align-items: center; gap: 14px; padding: 8px 18px; min-height: 46px; box-sizing: border-box;
    background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 6px 18px rgba(10,17,32,.07);
    transform: translateY(-110%); opacity: 0; transition: transform var(--t-micro, .18s) ease, opacity var(--t-micro, .18s) ease; pointer-events: none; }
.hm-fija.ver { transform: none; opacity: 1; pointer-events: auto; }
.hm-fija .nom { flex: 0 1 auto; min-width: 60px; font-size: 14px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.hm-fija .chip { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); background: var(--accent-50); border: 1px solid var(--accent-light); border-radius: 5px; padding: 2px 7px; flex-shrink: 0; }
.hm-fija .chip.prov { color: #8A4212; background: #F7EFE8; border-color: #EAD3C2; }
.hm-fija .dato { font-size: 11.5px; color: var(--tx3); white-space: nowrap; }
.hm-fija .dato b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tx2); }
.hm-fija .dato.rojo b { color: var(--red-text, #b91c1c); }
.hm-fija .dato.verde b { color: var(--green-text, #5C6B24); }
.hm-fija .sep { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }
.hm-fija .ir { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.hm-fija .ir a { font-size: 12px; font-weight: 700; text-decoration: none; border-radius: 7px; padding: 6px 12px; border: 1px solid var(--border); color: var(--tx2); background: var(--surface); white-space: nowrap; cursor: pointer; }
.hm-fija .ir a.p { background: var(--accent); border-color: var(--accent); color: #fff; }
.hm-fija .ir a.p.prov { background: #8A4212; border-color: #8A4212; }
@media (max-width: 760px) { .hm-fija { gap: 8px; padding: 7px 12px; } .hm-fija .mov-no, .hm-fija .ir, .hm-fija .chip { display: none; } .hm-fija .nom { flex: 1 1 auto; } .hm-fija .dato.rojo { flex-shrink: 0; } }