/* Útiles de la tanda 6 (30-sep-2026): imagen a texto (OCR), transcribir,
   foto carnet, firmar PDF, contraseñas y enlace de WhatsApp. 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 «papel» (firma, página del PDF) usa el blanco de la marca: es el color
   del documento, no del tema. */
.uth{--uth-papel:var(--blanco-luz,#f8fafc)}

/* Texto reconocido / transcripción */
.uth-ocr-texto{display:grid;gap:10px;margin-top:6px}
.uth-ocr-texto .uth-acciones{flex-wrap:wrap}

/* Contraseñas */
.uth-claves{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.uth-clave{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;background:var(--uth-fondo);border:1px solid var(--uth-borde);border-radius:10px}
.uth-clave code{flex:1;min-width:0;overflow-wrap:anywhere;font:500 15px/1.4 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:var(--uth-texto);user-select:all}
.uth-fuerza{width:100%;height:8px;appearance:none;border:0;border-radius:99px;overflow:hidden;background:var(--uth-sup)}
.uth-fuerza::-webkit-progress-bar{background:var(--uth-sup);border-radius:99px}
.uth-fuerza::-webkit-progress-value{background:var(--uth-acento);border-radius:99px}
.uth-fuerza::-moz-progress-bar{background:var(--uth-acento);border-radius:99px}
.uth-fuerza.is-debil::-webkit-progress-value{background:var(--uth-peligro)}.uth-fuerza.is-debil::-moz-progress-bar{background:var(--uth-peligro)}
.uth-fuerza.is-aceptable::-webkit-progress-value{background:var(--uth-aviso)}.uth-fuerza.is-aceptable::-moz-progress-bar{background:var(--uth-aviso)}

/* Enlace de WhatsApp: QR */
.uth-wa-qr{width:min(220px,100%);height:auto;image-rendering:pixelated;border-radius:8px}

/* Foto carnet: marco con la plantilla de cara */
.uth-carnet{display:grid;gap:10px;justify-items:start}
.uth-carnet-marco{position:relative;width:min(300px,100%);overflow:hidden;border:1px solid var(--uth-borde);border-radius:6px;background:var(--uth-papel);touch-action:none;cursor:grab;user-select:none}
.uth-carnet-marco.is-arrastrando{cursor:grabbing}
.uth-carnet-marco:focus-visible{outline:2px solid var(--uth-acento);outline-offset:2px}
.uth-carnet-lienzo,.uth-carnet-guia{position:absolute;inset:0;width:100%;height:100%;display:block}
.uth-carnet-guia{pointer-events:none;overflow:visible}
.uth-carnet-banda{fill:color-mix(in srgb,var(--uth-acento) 7%,transparent)}
.uth-carnet-linea,.uth-carnet-ovalo,.uth-carnet-eje{fill:none;vector-effect:non-scaling-stroke}
.uth-carnet-linea{stroke:var(--uth-acento);stroke-width:1.5;stroke-dasharray:6 4}
.uth-carnet-ovalo{stroke:var(--uth-acento);stroke-width:2}
.uth-carnet-eje{stroke:color-mix(in srgb,var(--uth-acento) 45%,transparent);stroke-width:1;stroke-dasharray:2 4}
.uth-carnet .uth-campo{width:min(300px,100%)}
.uth-carnet-resultado img{display:block;width:auto;max-width:140px;max-height:180px;border:1px solid var(--uth-borde);border-radius:4px}

/* Firmar PDF */
.uth-firma-pad{display:block;width:100%;aspect-ratio:3/1;height:auto;background:var(--uth-papel);border:1px dashed var(--uth-borde);border-radius:10px;touch-action:none;cursor:crosshair}
.uth-firma-pad:focus-visible,.uth-firma-hoja:focus-visible{outline:2px solid var(--uth-acento);outline-offset:2px}
.uth-firma-muestra{display:block;max-width:100%;max-height:72px;padding:6px 10px;background:var(--uth-papel);border-radius:8px}
.uth-firma-visor{display:grid;gap:10px;margin-top:6px}
.uth-firma-hoja{position:relative;width:min(640px,100%);background:var(--uth-papel);border:1px solid var(--uth-borde);touch-action:none;cursor:copy;user-select:none}
.uth-firma-pagina{display:block;width:100%;height:100%}
.uth-firma-capa{position:absolute;display:block;object-fit:contain;outline:1.5px dashed var(--uth-acento);outline-offset:2px;cursor:move;pointer-events:none}