#cgDocumentCaptureModal { position:fixed; inset:0; z-index:2147483000; padding:12px; box-sizing:border-box; background:#020617eb; align-items:center; justify-content:center; overflow-y:auto; color:#f1f5f9; font:16px system-ui,sans-serif; }
#cgDocumentCaptureModal.hidden { display:none!important; }
#cgDocumentCaptureModal * { box-sizing:border-box; }
#cgDocumentCaptureModal [hidden] { display:none!important; }
#cgDocumentCaptureModal .cg-capture-card { width:100%; max-width:560px; max-height:calc(100dvh - 24px); overflow:auto; border:1px solid #34435c; border-radius:24px; padding:20px; background:linear-gradient(155deg,#0b1628,#080f1d 65%); box-shadow:0 24px 80px #0008; }
#cgDocumentCaptureModal header { display:flex; align-items:center; gap:8px; position:static; margin:0 0 12px; padding:0; }
#cgDocumentCaptureModal h2 { margin:4px 0 18px; font-size:clamp(22px,5vw,28px); letter-spacing:-.035em; }
#cgDocumentCaptureModal .cg-capture-brand { flex:1; font-weight:650; letter-spacing:.05em; font-size:16px; }
#cgDocumentCaptureModal .cg-capture-brand span { color:#43e5ff; }
#cgDocumentCaptureModal header button { background:transparent; border-color:transparent; color:#cbd5e1; font-size:24px; }
#cgDocumentCaptureModal .cg-capture-progress { display:flex; gap:12px; padding:0; list-style:none; margin:0 0 16px; }
#cgDocumentCaptureModal .cg-capture-progress li { display:flex; align-items:center; gap:9px; flex:1; color:#94a3b8; font-size:14px; }
#cgDocumentCaptureModal .cg-capture-progress li:first-child:after { content:''; height:1px; min-width:16px; flex:1; background:linear-gradient(90deg,#22d3ee,#334155); }
#cgDocumentCaptureModal .cg-capture-progress li span { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; background:#1e293b; color:#cbd5e1; }
#cgDocumentCaptureModal .cg-capture-progress li[aria-current] { color:#67e8f9; }
#cgDocumentCaptureModal .cg-capture-progress li[aria-current] span { background:#22d3ee; color:#082f49; font-weight:750; }
#cgDocumentCaptureModal .cg-capture-progress li[data-done="true"] span { border:1px solid #5eead4; }
#cgDocumentCaptureModal button { min-height:48px; min-width:48px; border:1px solid #64748b; border-radius:10px; padding:10px 12px; background:#1e293b; color:#f1f5f9; font:inherit; cursor:pointer; touch-action:manipulation; }
#cgDocumentCaptureModal button:disabled { opacity:.5; cursor:wait; }
#cgDocumentCaptureModal button:focus-visible, #cgDocumentCaptureModal input:focus-visible { outline:3px solid #38bdf8; outline-offset:3px; }
#cgDocumentCaptureModal .cg-capture-primary { width:100%; min-height:54px; background:linear-gradient(105deg,#22d3ee,#38bdf8); border-color:#67e8f9; color:#082f49; font-weight:750; margin-top:8px; box-shadow:0 4px 24px #22d3ee12; }
#cgDocumentCaptureModal .cg-capture-primary-actions { display:flex; align-items:stretch; gap:8px; }
#cgDocumentCaptureModal .cg-capture-primary-actions .cg-capture-primary { flex:1; min-width:0; }
#cgDocumentCaptureModal .cg-capture-preview { position:relative; width:100%; aspect-ratio:1.586; background:radial-gradient(ellipse at center,#172238,#020617); border:1px solid #53627c; border-radius:16px; overflow:hidden; isolation:isolate; }
/* !important on purpose: the universal chassis CSS (cg_ui_core.js) sets `img, video, canvas { height:auto !important }`,
   which collapsed the video to its intrinsic ratio (top-aligned) while the overlays fill the preview: every overlay
   (ID contour, hologram, fingertip frames) drifted by half the difference. The id selector wins the tie. */
#cgDocumentCaptureModal video { width:100%; height:100% !important; max-width:none !important; object-fit:contain; display:block; }
/* A portrait sensor must fill the landscape document viewport. Keep raw sensor
   pixels for detection/crop; only the preview clips its excess top/bottom. */
#cgDocumentCaptureModal .cg-capture-preview[data-mode="document"] video { object-fit:cover; object-position:50% 50%; }
#cgDocumentCaptureModal .cg-capture-hologram, #cgDocumentCaptureModal .cg-capture-preview canvas { height:100% !important; max-width:none !important; }
#cgDocumentCaptureModal .cg-capture-guide { position:absolute; pointer-events:none; width:86%; aspect-ratio:1.586; top:50%; left:50%; transform:translate(-50%,-50%); border:3px solid #7dd3fc; border-radius:14px; box-shadow:0 0 0 100vmax #02061755; }
#cgDocumentCaptureModal .cg-capture-guide svg { width:100%; height:100%; color:#e0f2fe; opacity:.42; }
#cgDocumentCaptureModal .cg-capture-contour, #cgDocumentCaptureModal .cg-capture-hologram { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#cgDocumentCaptureModal .cg-hologram-ready .cg-capture-guide { border-color:transparent; box-shadow:none; width:84%; }
#cgDocumentCaptureModal .cg-prism-halo { fill:none; stroke:var(--cg-prism); stroke-width:8; opacity:.32; filter:blur(4px); transition:stroke-width .2s ease; }
#cgDocumentCaptureModal .cg-prism-edge { fill:none; stroke:var(--cg-prism); stroke-width:2; }
#cgDocumentCaptureModal .cg-prism-corners { fill:none; stroke:#b5f5ff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
#cgDocumentCaptureModal .cg-capture-contour[data-stable="true"] .cg-prism-corners { stroke:#34d399; filter:drop-shadow(0 0 6px #10b981); }
#cgDocumentCaptureModal .cg-has-contour .cg-capture-guide { visibility:hidden; }
#cgDocumentCaptureModal .cg-capture-guide[data-side="back"] .front-guide, #cgDocumentCaptureModal .cg-capture-guide[data-side="front"] .back-guide { display:none; }
#cgDocumentCaptureModal .cg-capture-step { font-weight:600; font-size:15px; margin:8px 0 12px; color:#dbeafe; }
#cgDocumentCaptureModal .cg-capture-status { margin:10px 0; overflow-wrap:anywhere; font-size:14px; color:#f1f5f9; }
#cgDocumentCaptureModal .cg-capture-status:empty { display:none; }
#cgDocumentCaptureModal .cg-capture-next { margin-top:14px; padding:12px; text-align:center; border:1px solid #2b3b55; border-radius:14px; background:#111c2b; }
#cgDocumentCaptureModal .cg-capture-next>span { display:block; font-size:25px; letter-spacing:.12em; color:#a5c8f3; }
#cgDocumentCaptureModal .cg-capture-next p { margin:4px 0 0; font-size:14px; color:#cbd5e1; }
#cgDocumentCaptureModal .cg-capture-help { font-size:13px; line-height:1.5; color:#cbd5e1; }
#cgDocumentCaptureModal .cg-capture-options { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#cgDocumentCaptureModal .cg-capture-options button { flex:1 1 150px; }
#cgDocumentCaptureModal .cg-capture-thumbs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
#cgDocumentCaptureModal figure { margin:0; min-width:0; }
#cgDocumentCaptureModal figure img { width:100%; height:95px; object-fit:contain; background:#020617; border-radius:8px; }
#cgDocumentCaptureModal figcaption { font-size:12px; color:#cbd5e1; overflow-wrap:anywhere; }
#cgDocumentCaptureModal figure button { width:100%; margin-top:5px; }
#cgDocumentCaptureModal details { margin-top:10px; }
#cgDocumentCaptureModal summary { cursor:pointer; min-height:48px; padding:12px 0; }
#cgDocumentCaptureModal [data-view="trace"] { white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; font:12px/1.4 monospace; }
#cgDocumentCaptureModal label { display:block; }
#cgDocumentCaptureModal input[type="range"] { min-height:48px; width:100%; }
#cgDocumentCaptureModal .cg-capture-guide.cg-capture-turn { animation:cg-document-turn .8s ease-in-out; }
@keyframes cg-document-turn { 0% { transform:translate(-50%,-50%) rotateY(0deg); } 50% { transform:translate(-50%,-50%) rotateY(90deg); } 100% { transform:translate(-50%,-50%) rotateY(0deg); } }
@media(prefers-reduced-motion:reduce) { #cgDocumentCaptureModal .cg-capture-guide.cg-capture-turn { animation:none; } }
@media(max-width:360px) { #cgDocumentCaptureModal { padding:6px; } #cgDocumentCaptureModal .cg-capture-card { padding:10px; max-height:calc(100dvh - 12px); } }
/* Floating side label over the hologram: Frontal/Trasero + blinking Voltear while the back is pending. */
/* left+right (not left:50% + translateX): an absolutely positioned box shrinks to the space right of `left`, i.e. half the preview on a phone, which squeezed the pills and split TRASERO/VOLTEAR mid-word. */
#cgDocumentCaptureModal .cg-capture-side { position:absolute; top:8px; left:8px; right:8px; z-index:3; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 8px; pointer-events:none; }
#cgDocumentCaptureModal .cg-capture-side[hidden], #cgDocumentCaptureModal .cg-capture-flip[hidden] { display:none; }
#cgDocumentCaptureModal .cg-capture-side b, #cgDocumentCaptureModal .cg-capture-flip { padding:4px 12px; border-radius:999px; font:700 14px/1.3 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; background:#020617cc; border:1px solid #67e8f9; color:#e0f2fe; box-shadow:0 0 12px #22d3ee66; }
#cgDocumentCaptureModal .cg-capture-flip { border-color:#f0abfc; color:#fdf4ff; box-shadow:0 0 12px #e879f999; animation:cg-capture-flip-blink 1s steps(2,jump-none) infinite; }
@keyframes cg-capture-flip-blink { 0% { opacity:1; } 100% { opacity:.15; } }
@media(prefers-reduced-motion:reduce) { #cgDocumentCaptureModal .cg-capture-flip { animation:none; } }
#cgDocumentCaptureModal header { flex-wrap:wrap; }
#cgDocumentCaptureModal header > span { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
#cgDocumentCaptureModal header .cg-capture-lang { font:700 13px system-ui,sans-serif; min-width:48px; min-height:48px; border:1px solid #475569; border-radius:10px; }
/* Document type selector (ID card / passport). */
#cgDocumentCaptureModal .cg-capture-type { display:flex; gap:8px; margin:0 0 12px; }
#cgDocumentCaptureModal .cg-capture-type button { flex:1; font-weight:650; }
#cgDocumentCaptureModal .cg-capture-type button[aria-checked="true"] { background:#0e7490; border-color:#67e8f9; color:#ecfeff; }
/* Progress with any number of steps (the original rule only connected the first dot); labels never overflow. */
#cgDocumentCaptureModal .cg-capture-progress li:not(:last-child):after { content:''; height:1px; min-width:10px; flex:1; background:linear-gradient(90deg,#22d3ee,#334155); }
#cgDocumentCaptureModal .cg-capture-progress { gap:8px; }
#cgDocumentCaptureModal .cg-capture-progress li { min-width:0; gap:6px; }
#cgDocumentCaptureModal .cg-capture-progress li b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
#cgDocumentCaptureModal .cg-capture-progress li:last-child { flex:0 1 auto; }
/* Passport data-page guide replaces the ID-card guides. */
#cgDocumentCaptureModal .cg-capture-guide .data-guide { display:none; }
#cgDocumentCaptureModal .cg-capture-guide[data-side="data"] .data-guide { display:inline; }
#cgDocumentCaptureModal .cg-capture-guide[data-side="data"] .front-guide, #cgDocumentCaptureModal .cg-capture-guide[data-side="data"] .back-guide { display:none; }
/* Fingertip step: frames that follow each fingertip. State is colour AND label text (the hint line repeats it). */
#cgDocumentCaptureModal .cg-capture-fingers { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
#cgDocumentCaptureModal .cg-capture-fingers .cg-tipbox { fill:#22d3ee14; stroke:#38bdf8; stroke-width:3; vector-effect:non-scaling-stroke; }
#cgDocumentCaptureModal .cg-capture-fingers g[data-state="ok"] .cg-tipbox { stroke:#34d399; fill:#34d39926; }
#cgDocumentCaptureModal .cg-capture-fingers g[data-state="ok"] .cg-tipbox[data-usable="false"] { stroke:#fbbf24; fill:#fbbf2414; stroke-dasharray:6 5; }
#cgDocumentCaptureModal .cg-capture-fingers g[data-state="coasting"] .cg-tipbox { stroke:#fbbf24; stroke-dasharray:6 5; }
#cgDocumentCaptureModal .cg-capture-fingers g[data-state^="guide"] .cg-tipbox { stroke:#7dd3fc; stroke-dasharray:6 6; fill:none; }
#cgDocumentCaptureModal .cg-capture-fingers g[data-state="guide-faint"] { opacity:.55; }
#cgDocumentCaptureModal .cg-capture-fingers .cg-slap { fill:none; stroke:#94a3b8; stroke-width:2; stroke-dasharray:8 6; vector-effect:non-scaling-stroke; opacity:.75; }
#cgDocumentCaptureModal .cg-capture-fingers g[data-state="ok"] .cg-slap { stroke:#34d399; opacity:1; }
#cgDocumentCaptureModal .cg-capture-fingers .cg-tiplabel { fill:#e0f2fe; stroke:#020617; stroke-width:4; paint-order:stroke; font-family:system-ui,sans-serif; font-weight:700; }
#cgDocumentCaptureModal .cg-capture-preview[data-mode="fingers"] { aspect-ratio:4/3; }
#cgDocumentCaptureModal .cg-capture-preview[data-mode="fingers"] .cg-capture-guide, #cgDocumentCaptureModal .cg-capture-preview[data-mode="fingers"] .cg-capture-contour, #cgDocumentCaptureModal .cg-capture-preview[data-mode="fingers"] .cg-capture-hologram { display:none; }
#cgDocumentCaptureModal .cg-capture-preview[data-mode="document"] .cg-capture-fingers { display:none; }
#cgDocumentCaptureModal .cg-capture-preview[data-finger-state="ready"] { border-color:#34d399; box-shadow:0 0 0 2px #34d39955; }
#cgDocumentCaptureModal .cg-capture-fingerpanel { display:flex; flex-direction:column; gap:8px; margin:10px 0; padding:12px; border:1px solid #2b3b55; border-radius:14px; background:#111c2b; }
#cgDocumentCaptureModal .cg-capture-fingerpanel p { margin:0; font-size:14px; line-height:1.45; color:#dbeafe; }
#cgDocumentCaptureModal .cg-capture-fingerpanel p:empty { display:none; }
#cgDocumentCaptureModal .cg-capture-fingerpanel .cg-capture-primary { margin-top:0; }
#cgDocumentCaptureModal .cg-capture-chips { display:flex; flex-wrap:wrap; gap:6px; }
#cgDocumentCaptureModal .cg-capture-chips span { font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid #475569; color:#e2e8f0; background:#0b1628; }
#cgDocumentCaptureModal .cg-capture-chips span:empty { display:none; }
#cgDocumentCaptureModal .cg-capture-tip-thumbs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:12px 0; }
#cgDocumentCaptureModal .cg-capture-tip-thumbs[hidden] { display:none; }
#cgDocumentCaptureModal .cg-capture-tip-thumbs figure { margin:0; min-width:0; }
#cgDocumentCaptureModal .cg-capture-tip-thumbs img { width:100%; height:96px; object-fit:contain; }
#cgDocumentCaptureModal .cg-capture-tip-thumbs figcaption { font-size:12px; overflow-wrap:anywhere; color:#dbeafe; }
/* Short touch landscape: the complete sensor and its live ROI stay visible
   beside a scrollable control group. Resizing never rotates evidence pixels. */
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] { padding:8px; overflow:hidden; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,32%); grid-template-rows:48px minmax(0,1fr); gap:8px; width:100%; max-width:none; height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); padding:10px; overflow:hidden; border-radius:16px; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] header { grid-column:2; grid-row:1; margin:0; justify-content:flex-end; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] header .cg-capture-brand { display:none; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] h2,
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-type,
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-progress { display:none; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-step { grid-column:1; grid-row:1; margin:0; align-self:center; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-preview { grid-column:1; grid-row:2; width:100%; height:100%; min-height:0; aspect-ratio:auto; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-controls { grid-column:2; grid-row:2; display:flex; flex-direction:column; gap:8px; min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-primary-actions,
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] [data-action="confirm"] { order:-4; flex-shrink:0; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-primary-actions { flex-wrap:wrap; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-primary { margin-top:0; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-fingerpanel { order:-3; margin:0; padding:8px; gap:6px; flex-shrink:0; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"][data-phase="ready"] [data-action="fingers-skip"] { order:-1; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-help,
#cgDocumentCaptureModal[data-cg-capture-landscape="true"] .cg-capture-status { margin:0; }
#cgDocumentCaptureModal[data-cg-capture-landscape="true"][data-phase="idle"] .cg-capture-controls,
#cgDocumentCaptureModal[data-cg-capture-landscape="true"][data-phase="files"] .cg-capture-controls,
#cgDocumentCaptureModal[data-cg-capture-landscape="true"][data-phase="review"] .cg-capture-controls { grid-column:1 / -1; }
