/* Útiles de la tanda 7 (imagen, oct-2026): escanear documento y código de
   barras. Complementa a utiles-herramientas.css (variables --uth-*, que salen
   de los tokens) en utiles.html y en las páginas SEO /es/utiles/ y /en/tools/.
   El fondo del código de barras usa el blanco de la marca: es el color del
   papel, no del tema (los lectores necesitan barras oscuras sobre claro). */
.uth{--uth-papel:var(--blanco-luz,#f8fafc)}

/* Escanear documento: fuentes (foto, cámara) */
.uth-esc-fuentes{flex-wrap:wrap}
.uth-esc-camara{display:grid;gap:10px;margin-top:10px}
.uth-esc-camara .uth-acciones{flex-wrap:wrap}
.uth-esc-video{display:block;width:100%;max-height:60vh;object-fit:contain;background:var(--uth-sup);border:1px solid var(--uth-borde);border-radius:10px}
.uth-esc-fila{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px}

/* Editor de esquinas */
.uth-esc-editor{display:grid;gap:12px;margin-top:16px;padding:14px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo)}
.uth-esc-editor .uth-acciones{flex-wrap:wrap}
.uth-esc-zona{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:760px){.uth-esc-zona{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.uth-esc-marco{position:relative;width:100%;max-height:70vh;margin:0 auto;touch-action:none;user-select:none;border-radius:6px;background:var(--uth-sup)}
.uth-esc-lienzo,.uth-esc-capa{position:absolute;inset:0;width:100%;height:100%;display:block}
.uth-esc-capa{pointer-events:none;overflow:visible}
.uth-esc-poli{fill:color-mix(in srgb,var(--uth-acento) 14%,transparent);stroke:var(--uth-acento);stroke-width:2;vector-effect:non-scaling-stroke}
.uth-esc-poli.is-mal{fill:color-mix(in srgb,var(--uth-peligro) 14%,transparent);stroke:var(--uth-peligro)}
.uth-esc-asa{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border-radius:50%;border:2px solid var(--uth-acento);background:color-mix(in srgb,var(--uth-fondo) 55%,transparent);cursor:grab;touch-action:none}
.uth-esc-asa::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--uth-acento)}
.uth-esc-asa:focus-visible{outline:3px solid var(--uth-texto);outline-offset:2px}
.uth-esc-marco.is-arrastrando .uth-esc-asa{cursor:grabbing}
@media (pointer:coarse){.uth-esc-asa{width:40px;height:40px;margin:-20px 0 0 -20px}.uth-esc-asa::after{inset:15px}}
.uth-esc-figura{margin:0;display:grid;gap:6px;justify-items:center}
.uth-esc-previa{display:block;max-width:100%;height:auto;max-height:50vh;border:1px solid var(--uth-borde);border-radius:4px;background:var(--uth-papel)}

/* Código de barras */
.uth-barras-vista{display:grid;place-items:center;min-height:140px;padding:16px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-papel);overflow:auto}
.uth-barras-img{display:block;max-width:100%;height:auto;image-rendering:pixelated}