/* Útiles de audio, micrófono y cámara de la tanda 8 (4-oct-2026): cambiar
   tono, ecualizador, metrónomo, afinador, detector de BPM, generador de
   tonos, probar micrófono y probar cámara. Complementa a
   utiles-herramientas.css: todos los colores salen de sus variables --uth-*
   (que ya traen su respaldo de tokens.css). Clases con prefijo .ut8-. */
.uth{--ut8-tinta:var(--f-lima-tinta,var(--tinta-sobre-verde,var(--uth-fondo)));--ut8-suave-acento:color-mix(in srgb,var(--uth-acento) 14%,transparent)}

/* Rejilla de dos columnas (una sola en pantallas estrechas) */
.ut8-rejilla{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start;min-width:0}
.ut8-columna{display:grid;gap:14px;min-width:0;align-content:start}
.ut8-centro{justify-items:center;text-align:center}
.ut8-centro>*{max-width:100%}
@media(max-width:860px){.ut8-rejilla{grid-template-columns:minmax(0,1fr)}}

.ut8-zona{display:grid;gap:8px;min-width:0}
.ut8-bloque{display:grid;gap:10px;min-width:0;padding:14px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo)}
.ut8-archivo{margin:0;font-size:13px;color:var(--uth-suave);overflow-wrap:anywhere}
.ut8-etiqueta{margin:0;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--uth-tenue)}
.ut8-resultado{display:grid;gap:10px;min-width:0;padding:14px;border:1px solid var(--uth-acento);border-radius:12px;background:color-mix(in srgb,var(--uth-acento) 5%,var(--uth-fondo))}
.ut8-grande{min-height:52px;padding:12px 28px;font-size:16px}
.ut8-fila-centro{justify-content:center;flex-wrap:wrap}
.ut8-aviso.is-alto{color:var(--uth-aviso);font-weight:600}
.ut8-limitador{min-height:1.5em}
.ut8-casillas{display:grid;gap:8px}
.ut8-atajos{flex-wrap:wrap}

/* Consejos plegables (micrófono y cámara) */
.ut8-consejos{border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo);padding:0 14px}
.ut8-consejos summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--uth-suave)}
.ut8-consejos summary:focus-visible{outline:2px solid var(--uth-acento);outline-offset:2px;border-radius:8px}
.ut8-consejos ul{margin:0 0 14px;padding-left:18px;display:grid;gap:8px;color:var(--uth-suave);font-size:13px}

/* Lienzos (forma de onda, curva del ecualizador) */
.ut8-onda,.ut8-curva{display:block;width:100%;height:72px;border:1px solid var(--uth-borde);border-radius:10px;background:var(--uth-fondo)}
.ut8-curva{height:120px}
.ut8-nivel~.ut8-onda{height:96px}

/* Ecualizador: 10 deslizadores verticales */
.ut8-eq{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;min-width:0}
.ut8-eq-banda{display:grid;justify-items:center;gap:4px;min-width:0}
.ut8-eq-rango{writing-mode:vertical-lr;direction:rtl;width:28px!important;min-height:0!important;height:150px;margin:0;accent-color:var(--uth-acento);cursor:pointer}
.ut8-eq-rango:focus-visible{outline:2px solid var(--uth-acento);outline-offset:2px;border-radius:6px}
.ut8-eq-valor{font-size:11px;font-variant-numeric:tabular-nums;color:var(--uth-suave);white-space:nowrap}
.ut8-eq-hz{font-size:11px;color:var(--uth-tenue);white-space:nowrap}
@media(max-width:420px){.ut8-eq{gap:1px}.ut8-eq-rango{width:22px!important;height:130px}.ut8-eq-valor,.ut8-eq-hz{font-size:10px}}

/* Metrónomo y BPM */
.ut8-bpm{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0}
.ut8-bpm-cifra{font-size:clamp(48px,12vw,76px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--uth-texto)}
.ut8-bpm-unidad{font-size:16px;font-weight:600;color:var(--uth-tenue)}
.ut8-bpm-rango{width:100%}
.ut8-bpm-numero{max-width:7em}
.ut8-pulsos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:44px}
.ut8-pulso{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--uth-borde);color:var(--uth-tenue);font-size:13px;font-weight:600;transition:background-color .06s,border-color .06s,color .06s}
.ut8-pulso.is-medio{border-color:var(--uth-suave)}
.ut8-pulso.is-fuerte{width:44px;height:44px;border-color:var(--uth-acento);color:var(--uth-texto)}
.ut8-pulso.is-activo{background:var(--uth-acento);border-color:var(--uth-acento);color:var(--ut8-tinta)}
.ut8-tap{min-height:96px;width:min(100%,320px);border-radius:20px;font-size:18px;border:1px dashed var(--uth-borde);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ut8-tap.is-tocado{background:var(--ut8-suave-acento);border-color:var(--uth-acento)}
.ut8-candidatos{margin:0;padding-left:18px;display:grid;gap:4px;color:var(--uth-suave)}

/* Afinador: nota, aguja de −50 a +50 cents y cuerdas */
.ut8-afinador{display:grid;justify-items:center;gap:6px;width:100%;padding:18px 14px;border:1px solid var(--uth-borde);border-radius:16px;background:var(--uth-fondo);transition:border-color .15s}
.ut8-nota{margin:0;font-size:clamp(56px,14vw,88px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--uth-texto);transition:color .15s}
.ut8-nota-solfeo,.ut8-nota-hz,.ut8-cents{margin:0;font-variant-numeric:tabular-nums;color:var(--uth-suave)}
.ut8-nota-solfeo:empty{display:none}
.ut8-cents{font-size:18px;font-weight:600;min-height:1.5em}
.ut8-consejo{margin:0;min-height:3em;color:var(--uth-suave);max-width:36ch}
.ut8-medidor{--ut8-pos:50%;position:relative;width:100%;max-width:420px;height:44px;margin:6px 0 14px;border-radius:10px;background:linear-gradient(to right,color-mix(in srgb,var(--uth-aviso) 22%,transparent),transparent 40%,var(--ut8-suave-acento) 45% 55%,transparent 60%,color-mix(in srgb,var(--uth-aviso) 22%,transparent));border:1px solid var(--uth-borde)}
.ut8-medidor-centro{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;transform:translateX(-50%);background:var(--uth-acento)}
.ut8-aguja{position:absolute;left:var(--ut8-pos);top:4px;bottom:4px;width:4px;border-radius:2px;transform:translateX(-50%);background:var(--uth-texto);transition:left .12s ease-out}
.ut8-medidor-min,.ut8-medidor-max{position:absolute;top:100%;font-size:11px;color:var(--uth-tenue)}
.ut8-medidor-min{left:0}.ut8-medidor-max{right:0}
.ut8-afinador.is-afinado{border-color:var(--uth-acento)}
.ut8-afinador.is-afinado .ut8-nota,.ut8-afinador.is-afinado .ut8-consejo{color:var(--uth-acento)}
.ut8-afinador.is-afinado .ut8-aguja{background:var(--uth-acento)}
.ut8-afinador.is-cerca .ut8-aguja{background:var(--uth-aviso)}
.ut8-afinador.is-lejos .ut8-aguja{background:var(--uth-peligro)}
.ut8-afinador.is-tenue .ut8-nota,.ut8-afinador.is-tenue .ut8-aguja{opacity:.45}
.ut8-cuerdas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ut8-cuerda{display:grid;justify-items:center;gap:0;min-width:58px;min-height:52px;padding:6px 10px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo);color:var(--uth-texto);font:inherit;font-weight:700;cursor:pointer}
.ut8-cuerda small{font-size:10px;font-weight:400;color:var(--uth-tenue)}
.ut8-cuerda:hover{border-color:var(--uth-suave)}
.ut8-cuerda:focus-visible{outline:2px solid var(--uth-acento);outline-offset:2px}
.ut8-cuerda.is-activa{border-color:var(--uth-acento);background:var(--ut8-suave-acento)}

/* Medidor de nivel del micrófono (−60 a 0 dBFS) */
.ut8-nivel{--ut8-pos:0%;position:relative;width:100%;height:24px;border-radius:8px;border:1px solid var(--uth-borde);background:var(--uth-fondo);overflow:hidden}
.ut8-nivel-barra{position:absolute;left:0;top:0;bottom:0;width:var(--ut8-pos);background:var(--uth-acento);transition:width .05s linear}
.ut8-nivel-pico{position:absolute;left:var(--ut8-pos);top:0;bottom:0;width:3px;transform:translateX(-100%);background:var(--uth-texto)}
.ut8-nivel-marca{position:absolute;left:var(--ut8-pos);top:0;bottom:0;width:1px;background:var(--uth-borde)}
.ut8-nivel[data-nivel="alto"] .ut8-nivel-barra{background:var(--uth-aviso)}
.ut8-nivel[data-nivel="saturado"] .ut8-nivel-barra,.ut8-nivel.is-saturado .ut8-nivel-pico{background:var(--uth-peligro)}
.ut8-nivel-cifras{margin:0;font-size:13px;font-variant-numeric:tabular-nums;color:var(--uth-suave);min-height:1.5em}
.ut8-saturacion{margin:0;font-weight:600;color:var(--uth-peligro)}
.ut8-valoracion{min-height:3em}

/* Cámara */
.ut8-video-marco{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;border:1px solid var(--uth-borde);border-radius:14px;background:var(--uth-fondo);overflow:hidden}
.ut8-video{display:none;width:100%;height:100%;object-fit:contain;background:var(--uth-fondo)}
.ut8-video-marco.is-activo .ut8-video{display:block}
.ut8-video-marco.is-activo .ut8-video-vacio{display:none}
.ut8-video.is-espejo{transform:scaleX(-1)}
.ut8-video-vacio{margin:0;padding:16px;color:var(--uth-tenue);text-align:center}
.ut8-datos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;padding:12px 14px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo);font-size:13px}
.ut8-datos dt{color:var(--uth-tenue)}
.ut8-datos dd{margin:0;color:var(--uth-texto);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ut8-foto{display:block;max-width:100%;max-height:320px;height:auto;border-radius:10px;border:1px solid var(--uth-borde)}

/* Menos movimiento si la persona lo pide */
@media(prefers-reduced-motion:reduce){
 .ut8-pulso,.ut8-afinador,.ut8-nota,.ut8-aguja,.ut8-nivel-barra{transition:none}
}