/* Útiles de la tanda 8 (imagen y video, 4-oct-2026): selector de color,
   generador de degradados, borde de foto, foto a dibujo, comprimir PNG,
   recortar encuadre y marca de agua en video. Complementa a
   utiles-herramientas.css: sólo variables --uth-* (salen de los tokens de
   Cocuyo), prefijo .ut8- y nada de colores escritos a mano. Los colores que
   se ven en muestras y degradados son los que elige cada persona (estilo en
   línea desde el JS), no colores del tema. */

/* Fondo de cuadros para ver la transparencia (bordes, dibujos, degradados) */
.ut8-vista-damero,.ut8-degradado-vista{background-color:var(--uth-sup);background-image:repeating-conic-gradient(color-mix(in srgb,var(--uth-texto) 9%,var(--uth-sup)) 0 25%,var(--uth-sup) 0 50%);background-size:16px 16px}

/* ---------- Selector de color ---------- */
.ut8-elegir{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:end;margin-bottom:12px}
.ut8-muestra{width:96px;height:96px;border-radius:14px;border:1px solid var(--uth-borde);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--uth-fondo) 40%,transparent)}
.ut8-color .uth-acciones{flex-wrap:wrap}
.ut8-gotero{display:grid;gap:10px;margin-top:12px}
.ut8-gotero[hidden]{display:none}
.ut8-gotero-marco{position:relative;justify-self:start;max-width:100%;line-height:0;border-radius:10px;overflow:hidden;border:1px solid var(--uth-borde)}
.ut8-gotero-lienzo{display:block;max-width:100%;max-height:min(60vh,520px);width:auto;height:auto;cursor:crosshair;touch-action:none}
.ut8-cruz{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid var(--uth-texto);box-shadow:0 0 0 1px var(--uth-fondo),inset 0 0 0 1px var(--uth-fondo);pointer-events:none}
.ut8-cruz[hidden]{display:none}
.ut8-gotero-lado{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ut8-gotero-lado .uth-campo{min-width:160px;flex:1 1 160px}
.ut8-lupa{width:110px;height:110px;border-radius:50%;border:2px solid var(--uth-borde);image-rendering:pixelated;background:var(--uth-sup)}
.ut8-lupa[hidden]{display:none}
.ut8-bajo{font-variant-numeric:tabular-nums;min-height:1.5em}
.ut8-formatos{gap:10px}
.ut8-formato{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:8px}
.ut8-formato>label{grid-column:1/-1}
.ut8-formato input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ut8-tabla-marco{overflow-x:auto;border:1px solid var(--uth-borde);border-radius:12px}
.ut8-tabla{width:100%;border-collapse:collapse;font-size:13px}
.ut8-tabla th,.ut8-tabla td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--uth-borde);white-space:nowrap}
.ut8-tabla tr:last-child>*{border-bottom:0}
.ut8-tabla thead th{font-weight:600;color:var(--uth-suave)}
.ut8-tabla tbody th{font-weight:500;color:var(--uth-suave)}
.ut8-chip{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;border:1px solid var(--uth-borde)}
.ut8-ratio{font-variant-numeric:tabular-nums;font-weight:600;color:var(--uth-texto)}
.ut8-tabla .is-pasa{color:var(--uth-acento)}
.ut8-tabla .is-falla{color:var(--uth-peligro)}
.ut8-ejemplo{display:grid;gap:4px;padding:16px;border-radius:12px;border:1px solid var(--uth-borde)}
.ut8-ejemplo-grande{font-size:24px;font-weight:600;line-height:1.2}
.ut8-recientes{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ut8-reciente{width:36px;height:36px;padding:0;border-radius:10px;border:1px solid var(--uth-borde);cursor:pointer}
.ut8-reciente:hover{border-color:var(--uth-texto)}

/* ---------- Generador de degradados ---------- */
.ut8-deg .uth-fuente{display:grid;gap:14px}
.ut8-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
/* El nombre del ejemplo lleva una sombra oscura para leerse sobre cualquier degradado. */
.ut8-preset{display:flex;align-items:flex-end;min-height:64px;padding:6px 8px;border-radius:10px;border:1px solid var(--uth-borde);font:inherit;font-size:12px;font-weight:600;color:var(--uth-texto);text-shadow:0 0 3px var(--uth-fondo),0 1px 2px var(--uth-fondo);cursor:pointer;text-align:left}
.ut8-preset:hover{border-color:var(--uth-texto)}
.ut8-paradas-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.ut8-paradas-cab .uth-acciones{flex-wrap:wrap;margin:0}
.ut8-paradas{display:grid;gap:8px}
.ut8-parada{display:grid;grid-template-columns:24px 52px minmax(84px,108px) minmax(0,1fr) auto;align-items:center;gap:8px;margin:0;padding:8px;border:1px solid var(--uth-borde);border-radius:10px;background:var(--uth-fondo);min-width:0}
.ut8-parada-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--uth-sup);font-size:12px;color:var(--uth-suave);font-variant-numeric:tabular-nums}
.uth .ut8-parada input[type=color]{width:52px;height:40px}
.uth .ut8-parada input.ut8-hex{min-height:40px;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.ut8-parada-pos{display:flex;align-items:center;gap:6px;min-width:0}
.ut8-parada-pos output{min-width:3.2em;font-size:12px;font-variant-numeric:tabular-nums;color:var(--uth-texto)}
.ut8-degradado-vista{width:100%;max-height:min(50vh,420px);aspect-ratio:16/9;border-radius:12px;border:1px solid var(--uth-borde)}
.uth .ut8-css{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;resize:vertical}

/* ---------- Video: fotograma de referencia del encuadre ---------- */
.ut8-fotograma{background:var(--uth-sup)}
.ut8-momento{width:min(100%,520px)}

@media (max-width:520px){
 .ut8-elegir{grid-template-columns:72px minmax(0,1fr)}
 .ut8-muestra{width:72px;height:72px}
 .ut8-parada{grid-template-columns:24px 48px minmax(0,1fr) auto;grid-template-areas:"n c h q" "p p p p"}
 .ut8-parada-n{grid-area:n}.ut8-parada>input[type=color]{grid-area:c}.ut8-parada>.ut8-hex{grid-area:h}.ut8-parada-pos{grid-area:p}.ut8-parada>.uth-btn{grid-area:q}
 .uth .ut8-parada input[type=color]{width:48px}
 .ut8-lupa{width:88px;height:88px}
 /* La tabla de contraste cabe entera en el móvil: los rótulos pasan a dos líneas. */
 .ut8-tabla{font-size:12px}
 .ut8-tabla th,.ut8-tabla td{padding:6px}
 .ut8-tabla th{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.ut8-preset,.ut8-reciente{transition:none}}