/* hero-anim.css - animacion del hero de la home (default.asp). jr/claude 20261113.
   Replica de la ventana de ChronoScan escritorio: recortes reales en /images/banners/hero_anim/ + HTML.
   Lienzo logico de 1200x750 px que js/hero-anim.js escala al ancho del contenedor. */
/* ===================== HERO-ANIM (bloque reutilizable) ===================== */
.ha { position: relative; aspect-ratio: 1200 / 750; overflow: hidden; background: #0f172a; user-select: none; }
.ha-fit { position: absolute; left: 0; top: 0; width: 1200px; height: 750px; transform-origin: 0 0; }
.ha-view { position: absolute; left: 0; top: 0; width: 1200px; height: 675px; overflow: hidden; background: #f0f0f0; }
.ha-win { position: absolute; left: 0; top: 0; width: 1200px; height: 675px; transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.45,.05,.2,1); background: #f0f0f0;
          font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 12px; color: #1e1e1e; }
.ha-win img { display: block; }
.ha-mono { font-family: Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; }

/* --- ventana: titulo + cinta (recorte real) --- */
.cs-ribbon { position: absolute; left: 0; top: 0; }
.cs-title { position: absolute; left: 840px; top: 0; width: 360px; height: 30px; background: #2b579a; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 0; }
.cs-title span:last-child { letter-spacing: 14px; font-size: 13px; }

/* --- miniaturas --- */
.cs-thumbs { position: absolute; left: 0; top: 146px; width: 190px; height: 506px; background: #e4ebf4; border-right: 1px solid #c9d3df; overflow: hidden; }
.cs-th { position: absolute; left: 0; width: 190px; height: 162px; opacity: 0; transform: translateY(-14px); transition: opacity .35s, transform .35s; }
.cs-th.on { opacity: 1; transform: none; }
/* lote sin separar: las paginas llegan apiladas, sin barra de documento; al separar (split) se abren */
.cs-th { transition: opacity .35s, transform .35s, margin-top .55s cubic-bezier(.3,1.4,.5,1); }
.cs-th-bar, .cs-th-n { transition: opacity .35s; }
.cs-thumbs.packed .cs-th:nth-child(2) { margin-top: -36px; }
.cs-thumbs.packed .cs-th:nth-child(3) { margin-top: -72px; }
.cs-thumbs.packed .cs-th-bar, .cs-thumbs.packed .cs-th-n, .cs-thumbs.packed .cs-th-st { opacity: 0; }
.cs-cut { position: absolute; left: 6px; width: 178px; height: 0; border-top: 2px dashed #e8590c; opacity: 0; }
.cs-cut::before { content: "\2702"; position: absolute; left: -2px; top: -11px; font-size: 14px; color: #e8590c; background: #e4ebf4; }
.cs-thumbs.cutting .cs-cut { animation: cs-cut .9s ease-out 1; }
@keyframes cs-cut { 0% { opacity: 0; clip-path: inset(-12px 100% -4px 0); } 25% { opacity: 1; } 80% { opacity: 1; clip-path: inset(-12px 0 -4px 0); } 100% { opacity: 0; clip-path: inset(-12px 0 -4px 0); } }
.cs-th-pg { position: absolute; left: 36px; top: 6px; width: 122px; height: 122px; background: #fff; border: 1px solid #b9c2cc; overflow: hidden; transition: background .25s, box-shadow .25s; }
.cs-th-pg img { width: 120px; height: auto; }
.cs-th.sel .cs-th-pg { background: #ffffd9; box-shadow: 0 0 0 3px #22fe09; }
.cs-th.sel .cs-th-pg img { mix-blend-mode: multiply; }
.cs-th-n { position: absolute; left: 36px; top: 129px; width: 122px; text-align: center; font-size: 10px; color: #333; }
.cs-th-bar { position: absolute; left: 0; top: 142px; width: 190px; height: 20px; overflow: hidden; }
.cs-th-bar img { height: 20px; width: auto; }
.cs-th-st { position: absolute; left: 8px; top: 8px; width: 18px; height: 18px; }
.cs-th-st svg { width: 100%; height: 100%; opacity: 0; transform: scale(.3); transition: opacity .3s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.cs-th.done .cs-th-st svg { opacity: 1; transform: none; }

/* --- visor --- */
.cs-viewer { position: absolute; left: 191px; top: 146px; width: 513px; height: 346px; background: #dae8f9; overflow: hidden; border-right: 1px solid #c9d3df; }
.cs-vtools { position: absolute; left: 160px; top: 3px; opacity: .9; }
.cs-page { position: absolute; left: 34px; top: 30px; width: 446px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); opacity: 0; transform: scale(.94); transition: opacity .45s, transform .45s; }
.cs-page.on { opacity: 1; transform: none; }
.cs-page > img { width: 446px; height: auto; }
.cs-scan { position: absolute; left: 0; right: 0; top: -14%; height: 14%; background: linear-gradient(180deg, rgba(43,87,154,0) 0%, rgba(43,87,154,.30) 100%); border-bottom: 2px solid #2b579a; opacity: 0; }
.ha.scan .cs-scan { animation: cs-scan 1.25s ease-in-out 1 forwards; }
@keyframes cs-scan { 0% { top: -14%; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
/* zonas de captura al estilo ChronoScan: caja amarilla + etiqueta naranja en monoespaciada */
.cs-z { position: absolute; border: 1px solid #c9b100; background: rgba(250,236,90,.38); opacity: 0; transition: opacity .25s; }
.cs-z.on { opacity: 1; }
.cs-z i { position: absolute; left: 0; bottom: 100%; font: normal 6px Consolas, monospace; color: #e8590c; white-space: nowrap; line-height: 1.2; }
.cs-z::before { content: ""; position: absolute; left: -4px; top: -4px; width: 5px; height: 5px; border-radius: 50%; border: 1px solid #555; background: #fff; }
/* grid de lineas sobre la factura: borde naranja, filas discontinuas, columnas rayadas */
.cs-lz { position: absolute; left: .8%; top: 64.2%; width: 98.4%; height: 13.6%; border: 2px solid #ff8c00; opacity: 0; transition: opacity .3s; }
.cs-lz.on { opacity: 1; }
.cs-lz b { position: absolute; top: 0; bottom: 0; }
.cs-lz .c1 { left: 68%; width: 8%; background: repeating-linear-gradient(135deg, rgba(214,62,62,.45) 0 1px, transparent 1px 4px); border-left: 1px solid #ff8c00; border-right: 1px solid #ff8c00; }
.cs-lz .c2 { left: 77.5%; width: 8.5%; background: repeating-linear-gradient(135deg, rgba(214,62,62,.45) 0 1px, transparent 1px 4px); border-right: 1px solid #ff8c00; }
.cs-lz .c3 { left: 86%; right: 0; background: rgba(255,225,120,.35); }
.cs-lz u { position: absolute; left: 0; right: 0; height: 33.33%; border-bottom: 1px dashed #ff8c00; background: rgba(255,140,0,.0); opacity: 0; transition: opacity .25s; }
.cs-lz u.on { opacity: 1; animation: cs-rowflash .6s ease-out 1; }
@keyframes cs-rowflash { 0% { background: rgba(255,140,0,.35); } 100% { background: rgba(255,140,0,0); } }
.cs-lz em { position: absolute; left: 2px; bottom: 100%; font: normal 6px Consolas, monospace; color: #0b6fb8; }

/* --- paneles acoplados (titulo gris como en la app) --- */
.cs-pt { height: 22px; background: #e6e6e6; font-size: 14px; line-height: 22px; padding-left: 4px; color: #333; }
.cs-form { position: absolute; left: 706px; top: 146px; width: 494px; height: 346px; background: #fdfdfd; overflow: hidden; }
.cs-rows { position: absolute; left: 0; right: 0; top: 53px; }
.cs-r { display: grid; grid-template-columns: 158px 16px 1fr; height: 20px; line-height: 20px; font-size: 12px; border-bottom: 1px solid #f0f0f0; }
.cs-r.sec { display: block; font-weight: 700; background: #fdfdfd; color: #1e1e1e; }
.cs-r.sec::before { content: "\25E2"; font-size: 7px; color: #555; margin: 0 5px 0 6px; vertical-align: 2px; }
.cs-r.sec.l2 { padding-left: 12px; }
.cs-k { padding-left: 30px; color: #9a9a9a; white-space: nowrap; overflow: hidden; }
.cs-k.req { color: #1e1e1e; font-weight: 700; }
.cs-cb { position: relative; }
.cs-cb::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border: 1px solid #777; background: #fff; }
.cs-v { position: relative; background: #ebc9c9; padding-left: 4px; white-space: nowrap; overflow: hidden; transition: background .3s; }
.cs-v span { opacity: 0; transition: opacity .25s; color: #1e1e1e; }
.cs-r.on .cs-v span { opacity: 1; }
.cs-r.on .cs-v { animation: cs-fill .6s ease-out 1; }
@keyframes cs-fill { 0% { box-shadow: inset 0 0 0 2px #2b579a; } 100% { box-shadow: inset 0 0 0 2px rgba(43,87,154,0); } }
.cs-r.ok .cs-v { background: #fff; }
.cs-r.ok .cs-v.type { background: #a2c890; }
.cs-tk { position: absolute; right: 6px; top: 3px; width: 14px; height: 14px; opacity: 0; transform: scale(.3); transition: opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.cs-r.ok .cs-tk, .cs-g tr.ok .cs-tk { opacity: 1; transform: none; }
.cs-ftabs { position: absolute; left: 0; bottom: 0; }

/* --- Grid View (documentos) y grid de lineas --- */
.cs-gv { position: absolute; left: 706px; top: 498px; width: 494px; height: 154px; background: #fdfdfd; overflow: hidden; border-top: 1px solid #c9d3df; }
.cs-lines { position: absolute; left: 191px; top: 498px; width: 513px; height: 154px; background: #fdfdfd; overflow: hidden; border-top: 1px solid #c9d3df; border-right: 1px solid #c9d3df; }
.cs-ltab { position: absolute; right: 8px; top: 3px; background: #4caf50; color: #fff; font-size: 10px; padding: 0 8px; line-height: 16px; border-radius: 2px; }
table.cs-g { border-collapse: collapse; width: 100%; font-size: 11.5px; table-layout: fixed; }
table.cs-g th { text-align: left; font-weight: 400; height: 18px; padding: 0 4px; border: 1px solid #d5d5d5; background: #f4f4f4; white-space: nowrap; overflow: hidden; }
table.cs-g td { height: 18px; padding: 0 4px; border: 1px solid #e3e3e3; white-space: nowrap; overflow: hidden; position: relative; }
table.cs-g td.r, table.cs-g th.r { text-align: right; }
table.cs-g tr.flt td { color: #9a9a9a; background: #fff; }
.cs-gv tr.pend td { background: #eee800; }
.cs-gv tr.ok td { background: #fff; }
.cs-gv tr.ok td.ty { background: #7fbf7a; }
.cs-gv tr td.st { text-align: center; padding: 0; }
.cs-x { display: inline-block; width: 11px; height: 11px; background: #e53935; color: #fff; font: 700 9px/11px Arial; text-align: center; border-radius: 2px; vertical-align: -1px; }
.cs-gv tr.ok .cs-x { display: none; }
.cs-gv tr.pend .cs-ck { display: none; }
.cs-ck { color: #0a9a0a; font-weight: 900; font-size: 12px; }
.cs-lines tbody tr { opacity: 0; transition: opacity .3s; }
.cs-lines tbody tr.on { opacity: 1; }
.cs-lines tbody tr.on td { animation: cs-rowflash .6s ease-out 1; }
.cs-lines .cs-tk { position: static; display: inline-block; vertical-align: -2px; }

/* --- barra de estado --- */
.cs-status { position: absolute; left: 0; top: 652px; width: 1200px; height: 23px; background: #676d72; color: #fff; font-size: 12px; line-height: 23px; padding-left: 200px; }
.cs-status b { position: absolute; left: 560px; top: 4px; height: 15px; line-height: 15px; padding: 0 12px; background: #28529e; border-radius: 2px; font: 400 10px "Segoe UI", sans-serif; }

/* --- capas fuera de la camara: origenes de entrada, rotulo y aviso de exportacion --- */
.ha-src { position: absolute; left: 212px; top: 176px; display: flex; flex-direction: column; gap: 12px; }
.ha-src div { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 10px 20px 10px 14px; font: 600 22px "Segoe UI", sans-serif; color: #0f172a; box-shadow: 0 8px 24px rgba(15,23,42,.28); opacity: 0; transform: translateX(26px); transition: opacity .35s, transform .35s; }
.ha-src div.on { opacity: 1; transform: none; }
.ha-src div.go { opacity: 0; transform: translateX(-170px) scale(.6); transition: opacity .45s, transform .45s ease-in; }
.ha-src svg { width: 30px; height: 30px; }
.ha-cap { position: absolute; left: 22px; bottom: 20px; display: flex; align-items: center; gap: 14px; background: rgba(15,23,42,.93); color: #fff; border-radius: 12px; padding: 12px 24px 12px 14px; font: 600 25px "Segoe UI", sans-serif; box-shadow: 0 10px 28px rgba(0,0,0,.35); opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s; white-space: nowrap; }
.ha-cap.on { opacity: 1; transform: none; }
.ha-cap b { width: 38px; height: 38px; border-radius: 50%; background: #2b79e0; display: grid; place-items: center; font-size: 21px; }
.ha-exp { position: absolute; right: 26px; top: 196px; width: 380px; background: #fff; border-radius: 12px; box-shadow: 0 14px 40px rgba(15,23,42,.38); padding: 16px 20px; font: 600 22px "Segoe UI", sans-serif; color: #0f172a; opacity: 0; transform: translateY(18px); transition: opacity .4s, transform .4s; }
.ha-exp.on { opacity: 1; transform: none; }
.ha-exp h4 { margin: 0 0 8px; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.ha-exp p { margin: 0; padding: 7px 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e2e8f0; opacity: .25; transition: opacity .3s; }
.ha-exp p.on { opacity: 1; }
.ha-exp p svg { width: 24px; height: 24px; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.ha-exp p.on svg { transform: scale(1); }
.ha-exp p.more { color: #2b579a; justify-content: flex-start; }

/* --- barra inferior: pasos animados + destinos --- */
.ha-bar { position: absolute; left: 0; top: 675px; width: 1200px; height: 75px; background: #0f172a; display: flex; align-items: center; padding: 0 22px; gap: 10px; font-family: "Segoe UI", system-ui, sans-serif; }
.ha-step { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; color: #64748b; transition: color .35s; white-space: nowrap; }
.ha-step i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 18px; font-weight: 700; background: #1e293b; color: #94a3b8; border: 2px solid #334155; transition: background .35s, color .35s, border-color .35s, box-shadow .35s; }
.ha-step i svg { width: 18px; height: 18px; display: none; }
.ha-step.on { color: #fff; } .ha-step.on i { background: #2b79e0; border-color: #2b79e0; color: #fff; box-shadow: 0 0 0 6px rgba(43,121,224,.28); animation: ha-pulse 1.4s ease-in-out infinite; }
@keyframes ha-pulse { 50% { box-shadow: 0 0 0 11px rgba(43,121,224,0); } }
.ha-step.done { color: #cbd5e1; } .ha-step.done i { background: #16a34a; border-color: #16a34a; color: #fff; }
.ha-step.done i span { display: none; } .ha-step.done i svg { display: block; }
.ha-line { flex: 1; height: 4px; border-radius: 2px; background: #1e293b; min-width: 18px; overflow: hidden; }
.ha-line u { display: block; height: 100%; width: 0; background: #2b79e0; transition: width .2s linear; }
.ha-line.done u { background: #16a34a; }

@media (prefers-reduced-motion: reduce) { .ha *, .ha { transition: none !important; animation: none !important; } }