/* Útiles de tiempo y azar de la tanda 8 (4-oct-2026): temporizador,
   cronómetro, pomodoro, ruleta, sorteo, cara o cruz, dados y número
   aleatorio. Complementa a utiles-herramientas.css y utiles-calculadoras.css:
   todos los colores salen de sus variables --uth-* (que traen su respaldo de
   tokens.css). Prefijo propio: .uta- */

/* Colores de los sectores de la ruleta: mezclas de los colores del tema.
   utiles-azar.js los lee con getComputedStyle al dibujar el lienzo. */
.uth{
 --uta-sector-1:var(--uth-acento);
 --uta-sector-2:color-mix(in srgb,var(--uth-acento) 32%,var(--uth-fondo));
 --uta-sector-3:color-mix(in srgb,var(--uth-texto) 82%,var(--uth-fondo));
 --uta-sector-4:color-mix(in srgb,var(--uth-aviso) 38%,var(--uth-fondo));
 --uta-sector-5:var(--uth-aviso);
 --uta-sector-6:color-mix(in srgb,var(--uth-texto) 16%,var(--uth-fondo))
}

/* Grupos de campos con título */
.uta-grupo{display:grid;gap:12px;min-width:0;margin:0;padding:14px;border:1px solid var(--uth-borde);border-radius:12px}
.uta-grupo>legend{padding:0 6px;font-size:12px;font-weight:600;color:var(--uth-suave)}
.uta-rapidos{display:flex;flex-wrap:wrap;gap:8px}
.uta-sonido{display:grid;gap:12px}
.uta-centro{justify-content:center}

/* Pantalla del reloj (temporizador, cronómetro, pomodoro) */
.uta-reloj-marco{display:grid;gap:12px;justify-items:center;align-content:start;min-width:0;padding:22px 16px;background:var(--uth-fondo);border:1px solid var(--uth-borde);border-radius:16px;text-align:center}
.uta-reloj-marco:focus{outline:none}
.uta-reloj-marco .ucal-reloj{width:100%;overflow-wrap:anywhere}
.uta-crono.ucal-reloj{font-size:clamp(40px,11vw,84px)}
.uta-controles{justify-content:center}
.uta-principal{min-width:140px}
.uta-reloj-marco .uth-estado{min-height:1.5em;text-align:center}
.uta-barra{width:100%;max-width:420px;height:6px;border-radius:999px;background:var(--uth-sup);overflow:hidden}
.uta-barra>span{display:block;height:100%;background:var(--uth-acento);transform-origin:left center;transform:scaleX(var(--uta-avance,0))}
.uta-reloj-marco:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;place-content:center;gap:24px;background:var(--uth-fondo)}
.uta-reloj-marco:fullscreen .ucal-reloj{font-size:clamp(72px,20vw,260px)}
.uta-reloj-marco:fullscreen .uta-crono.ucal-reloj{font-size:clamp(56px,15vw,200px)}

/* Pomodoro: fase en curso y contador */
.uta-fase{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border:1px solid var(--uth-borde);border-radius:999px;font-size:14px;font-weight:600;color:var(--uth-suave)}
.uta-fase[data-fase=trabajo]{border-color:color-mix(in srgb,var(--uth-acento) 70%,var(--uth-borde));color:var(--uth-texto);background:color-mix(in srgb,var(--uth-acento) 12%,transparent)}
.uta-hoy{font-size:16px;font-weight:600;color:var(--uth-texto)}

/* Cronómetro: atajos y vueltas */
.uta-atajos{display:grid;gap:8px}
.uta-atajos ul{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;list-style:none}
.uta-atajos li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--uth-suave)}
.uta-atajos kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:26px;padding:2px 8px;border:1px solid var(--uth-borde);border-bottom-width:2px;border-radius:6px;background:var(--uth-sup);color:var(--uth-texto);font-family:inherit;font-size:12px;font-weight:600;line-height:1}
.uta-marca{display:inline-block;margin-inline-end:8px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;font-variant-numeric:normal}
.ucal-tabla tr.is-mejor td{background:color-mix(in srgb,var(--uth-acento) 10%,transparent)}
.ucal-tabla tr.is-mejor .uta-marca{background:var(--uth-acento);color:var(--uth-fondo)}
.ucal-tabla tr.is-peor td{background:color-mix(in srgb,var(--uth-aviso) 10%,transparent)}
.ucal-tabla tr.is-peor .uta-marca{border:1px solid var(--uth-aviso);color:var(--uth-aviso)}

/* Ruleta */
.uta-ruleta{display:flex;justify-content:center;width:100%;max-width:460px;margin:0 auto;min-width:0}
.uta-ruleta-lienzo{display:block;max-width:100%;height:auto}
.uta-sonda{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* Historial de resultados */
.uta-historial-caja{display:grid;gap:6px;min-width:0}
.uta-historial{margin:0;padding-inline-start:28px;max-height:220px;overflow:auto;font-size:13px;color:var(--uth-suave);overflow-wrap:anywhere}
.uta-historial li{padding:2px 0}
.uta-historial li:first-child{color:var(--uth-texto);font-weight:600}

/* Cara o cruz: la moneda gira en el aire (sólo si no se reduce el movimiento) */
.uta-moneda{display:grid;place-items:center;width:132px;height:132px;margin:4px auto;border-radius:50%;border:4px solid var(--uth-borde);background:var(--uth-sup);color:var(--uth-texto);font-size:20px;font-weight:700;box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--uth-texto) 6%,transparent)}
.uta-moneda[data-lado=cara]{background:var(--uth-acento);border-color:color-mix(in srgb,var(--uth-acento) 60%,var(--uth-fondo));color:var(--uth-fondo)}
.uta-moneda[data-lado=cruz]{border-color:var(--uth-aviso);color:var(--uth-aviso)}
@media(prefers-reduced-motion:no-preference){
 .uta-moneda.is-girando{animation:uta-girar .9s cubic-bezier(.25,.7,.35,1)}
 .uta-dados.is-rodando .uta-dado{animation:uta-rodar .45s ease-out}
}
@keyframes uta-girar{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-28px) rotateY(900deg)}100%{transform:translateY(0) rotateY(1800deg)}}
@keyframes uta-rodar{0%{transform:rotate(-14deg) scale(.88)}60%{transform:rotate(8deg) scale(1.04)}100%{transform:none}}
.uta-tanda{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;max-height:200px;overflow:auto}
.uta-tanda li{padding:3px 10px;border:1px solid var(--uth-borde);border-radius:999px;font-size:12px;color:var(--uth-suave)}
.uta-tanda li[data-lado=cara]{border-color:color-mix(in srgb,var(--uth-acento) 60%,var(--uth-borde));color:var(--uth-texto)}

/* Dados: d6 con puntos; el resto, silueta SVG con su número */
.uta-dados{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:72px;margin:0;padding:0;list-style:none}
.uta-dado{display:grid;place-items:center;width:64px;height:64px}
.uta-pips{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;width:60px;height:60px;padding:9px;border:2px solid var(--uth-acento);border-radius:12px;background:var(--uth-sup)}
.uta-pips i{display:block;border-radius:50%}
.uta-pips i.is-punto{background:var(--uth-texto)}
.uta-dado-svg{width:64px;height:64px;overflow:visible}
.uta-dado-forma{fill:var(--uth-sup);stroke:var(--uth-acento);stroke-width:3;stroke-linejoin:round}
.uta-dado-num{fill:var(--uth-texto);font-weight:700;font-family:inherit}

/* Números aleatorios */
.uta-numeros{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;max-height:320px;overflow:auto}
.uta-numeros:empty{display:none}
.uta-numeros li{min-width:44px;padding:6px 12px;border:1px solid var(--uth-borde);border-radius:10px;background:var(--uth-sup);text-align:center;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--uth-texto);overflow-wrap:anywhere}
.uta-numeros.is-uno li{font-size:clamp(30px,8vw,48px);padding:10px 22px;border-color:color-mix(in srgb,var(--uth-acento) 60%,var(--uth-borde))}

@media(max-width:480px){.uta-reloj-marco{padding:18px 12px}.uta-controles>.uth-btn{flex:1 1 130px}}
@media(prefers-reduced-motion:reduce){.uta-barra>span{transition:none}}