/* Audio · Cambiar voz y Traducir (30-sep-2026). Acabado Familia: superficies
   oscuras, líneas finas y lima solo para la acción (Generar) y lo activo.
   Tokens --f-* definidos en crear.html (espejo de familia.css). */

/* Con una herramienta abierta, el compositor de texto a voz se oculta: el
   panel trae sus propios pasos y su botón Generar. */
.composer.vh-activa > :not(.audio-type-tabs):not(.audio-form-heading):not(#vozHerramienta){display:none !important}
.audio-type-tabs button[data-audio-tool]:not(:disabled){cursor:pointer}
.audio-type-tabs button[data-audio-tool]:not(:disabled):not(.active):hover{color:var(--f-texto,#f8fafc)}
.audio-type-tabs button[data-audio-tool]:focus-visible{outline:2px solid var(--f-lima,#aff33e);outline-offset:-2px}

.vh{display:grid;gap:var(--f-e-4,16px);padding:var(--f-e-2,8px) 0 var(--f-e-1,4px);color:var(--f-texto,#f8fafc)}
.vh-cab h2{margin:0;font:var(--f-peso-titulo,550) 17px/1.25 var(--font);letter-spacing:var(--f-tracking-titulo,-.025em)}
.vh-cab p{margin:4px 0 0;color:var(--f-texto-2,#b4b6b0);font-size:13px;line-height:1.45}
.vh-pasos{list-style:none;margin:0;padding:0;display:grid;gap:var(--f-e-3,12px)}
.vh-paso{display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--f-e-3,12px);padding:var(--f-e-4,16px);background:var(--f-sup-1,#0e0e0e);border:1px solid var(--f-linea,#1c1c1c);border-radius:var(--f-r-tarjeta,16px)}
.vh-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--f-linea-fuerte,#2b2b2b);color:var(--f-texto-2,#b4b6b0);font:600 12px/1 var(--font)}
.vh-cuerpo{min-width:0;display:grid;gap:10px}
.vh-cuerpo h3{margin:3px 0 0;font:var(--f-peso-ui,500) 14px/1.3 var(--font);color:var(--f-texto,#f8fafc)}
.vh-nota{margin:0;color:var(--f-texto-3,#8a8c86);font-size:12px;line-height:1.45}
.vh-soltar{display:grid;gap:10px;padding:14px;border:1px dashed var(--f-linea-fuerte,#2b2b2b);border-radius:var(--f-r-control,10px);background:var(--f-sup-2,#141414)}
.vh-soltar p{margin:0;color:var(--f-texto-2,#b4b6b0);font-size:12.5px;line-height:1.45}
.vh-acciones,.vh-fila{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.vh-fila .vh-campo{flex:1 1 200px}
.vh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--f-r-control,10px);border:1px solid var(--f-linea-fuerte,#2b2b2b);background:var(--f-sup-3,#1a1a1a);color:var(--f-texto,#f8fafc);font:var(--f-peso-ui,500) 13px/1 var(--font);cursor:pointer}
.vh-btn:hover{border-color:var(--f-texto-3,#8a8c86)}
.vh-btn:focus-visible,.vh-generar:focus-visible,.vh-campo select:focus-visible,.vh-rango input:focus-visible,.vh-check input:focus-visible,.vh-enlace:focus-visible,.vh-ajustes summary:focus-visible{outline:2px solid var(--f-lima,#aff33e);outline-offset:2px}
.vh-btn.vh-principal:focus-within{outline:2px solid var(--f-lima,#aff33e);outline-offset:2px}
.vh-enlace{background:none;border:0;padding:0;color:var(--f-texto,#f8fafc);text-decoration:underline;font:inherit;cursor:pointer;justify-self:start}
.vh-archivo{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--f-linea-fuerte,#2b2b2b);border-radius:var(--f-r-control,10px);background:var(--f-sup-2,#141414)}
.vh-icono{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:8px;background:var(--f-sup-3,#1a1a1a);color:var(--f-texto-2,#b4b6b0)}
.vh-nombre{min-width:0;flex:1;display:grid;gap:2px}
.vh-nombre b{font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vh-nombre small{color:var(--f-texto-3,#8a8c86);font-size:11.5px}
.vh-grabando b{font-variant-numeric:tabular-nums}
.vh-punto{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:vh-latido 1s ease-in-out infinite}
@keyframes vh-latido{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.vh-punto{animation:none}}
.vh-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vh-campo{display:grid;gap:6px;min-width:0}
.vh-campo span,.vh-rango span{color:var(--f-texto-2,#b4b6b0);font-size:12px}
.vh-campo select{width:100%;min-height:42px;padding:0 10px;border-radius:var(--f-r-control,10px);border:1px solid var(--f-linea-fuerte,#2b2b2b);background:var(--f-sup-2,#141414);color:var(--f-texto,#f8fafc);font:400 13px var(--font)}
.vh-ajustes{border-top:1px solid var(--f-linea,#1c1c1c);padding-top:8px}
.vh-ajustes summary{cursor:pointer;color:var(--f-texto-2,#b4b6b0);font-size:12.5px;min-height:32px;display:flex;align-items:center}
.vh-ajustes[open]{display:grid;gap:10px}
.vh-rango{display:grid;gap:6px}
.vh-rango span{display:flex;justify-content:space-between}
.vh-rango output{color:var(--f-texto,#f8fafc);font-variant-numeric:tabular-nums}
.vh-rango input{width:100%;accent-color:var(--f-lima,#aff33e)}
.vh-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--f-texto,#f8fafc);min-height:32px}
.vh-check input{width:18px;height:18px;accent-color:var(--f-lima,#aff33e)}
.vh-aviso{margin:0;padding:10px 12px;border-radius:var(--f-r-control,10px);background:color-mix(in srgb,#ef4444 12%,transparent);border:1px solid color-mix(in srgb,#ef4444 35%,transparent);color:#fecaca;font-size:12.5px;line-height:1.45}
.vh-generar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:0 18px;border:0;border-radius:var(--f-r-control,10px);background:var(--f-lima,#aff33e);color:var(--f-lima-tinta,#0a0a0a);font:600 14px/1 var(--font);cursor:pointer;box-shadow:var(--f-luz,none)}
.vh-generar:hover:not(:disabled){background:var(--f-lima-hover,#c4f76a)}
.vh-generar:disabled{background:var(--f-sup-3,#1a1a1a);color:var(--f-texto-3,#8a8c86);box-shadow:none;cursor:not-allowed;justify-content:center}
.vh-generar b{font-weight:600;white-space:nowrap}
@media(max-width:520px){
 .vh-paso{grid-template-columns:1fr;gap:8px;padding:14px}
 .vh-num{width:24px;height:24px}
 .vh-dos{grid-template-columns:1fr}
 .vh-acciones .vh-btn{flex:1 1 0}
}
@media(pointer:coarse){.vh-btn,.vh-campo select{min-height:44px}.vh-check{min-height:44px}}
/* La tarjeta de un doblaje de video (MP4) en Audio. */
#genout .jobcard .jmarco > video[controls]{width:100%;height:100%;object-fit:contain;background:#000}