/* metronomo-de-rcp.css — o ritmo da massagem cardiaca pra treinar (/ferramentas-gratis/metronomo-de-rcp). Prefixo mr-.
   O circulo pulsa a cada compressao (a classe is-bate reinicia a animacao); fica azul na pausa das 2 ventilacoes e
   laranja nos 5 segundos antes da troca de quem comprime. Com movimento reduzido, o pulso vira brilho, sem escala.
   No celular o circulo e o botao vem antes dos ajustes (a pessoa precisa achar o Comecar sem rolar). */
.mr-192 { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: .75rem; border-left: 4px solid #b91c1c; background: color-mix(in srgb, #b91c1c 9%, transparent); font-size: .9rem; line-height: 1.5; color: var(--text-2); }
.mr-192 b { color: var(--text); }
.mr-faixa { width: 100%; min-height: 2.75rem; margin: 0; accent-color: var(--c-forte); cursor: pointer; }
.mr-marcas { display: flex; justify-content: space-between; margin-top: -.35rem; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.mr-dicas { margin: 0; padding: .8rem .9rem .8rem 2rem; list-style: disc; border-radius: .75rem; border: 1px solid var(--border); background: var(--bg, var(--surface)); display: flex; flex-direction: column; gap: .3rem; font-size: .875rem; line-height: 1.5; color: var(--text-2); }
.mr-res { align-items: stretch; }
.mr-palco { display: grid; place-items: center; padding: .4rem 0 .2rem; }
.mr-circulo { width: min(12.5rem, 52vw); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; background: var(--c-forte); color: #fff; box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--c-forte) 16%, transparent), 0 18px 40px -18px rgba(0, 0, 0, .45); transition: background-color .25s ease; }
.mr-conta { font-size: clamp(2.5rem, 2rem + 2.2vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mr-ciclo { font-size: .85rem; font-weight: 700; opacity: .9; }
.mr-circulo.is-bate { animation: mr-bate .2s ease-out; }
@keyframes mr-bate { 0% { transform: scale(.88); box-shadow: 0 0 0 1.1rem color-mix(in srgb, var(--c-forte) 28%, transparent), 0 10px 24px -14px rgba(0, 0, 0, .45); } 100% { transform: scale(1); } }
.mr-app.is-ventila .mr-circulo { background: #0e7490; box-shadow: 0 0 0 .5rem color-mix(in srgb, #0e7490 18%, transparent), 0 18px 40px -18px rgba(0, 0, 0, .45); }
.mr-app.is-troca .mr-circulo { background: #c2410c; }
.mr-estado { margin: 0; min-height: 1.5em; text-align: center; font-size: 1rem; font-weight: 700; color: var(--text); }
.mr-relogios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mr-relogios div { display: flex; flex-direction: column; gap: .15rem; padding: .55rem .7rem; border-radius: .7rem; background: var(--surface); border: 1px solid var(--c-borda); min-width: 0; }
.mr-relogios span { font-size: .72rem; font-weight: 700; line-height: 1.3; color: var(--muted); }
.mr-relogios b { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.mr-comandos { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.mr-botao { min-width: 10rem; min-height: 3.1rem; font-size: 1.05rem; }
.mr-voltar { min-height: 3.1rem; }
.mr-app.is-rodando .mr-botao { background: var(--surface); color: var(--text); border-color: var(--border-2, var(--border)); }

@media (prefers-reduced-motion: reduce) {
    .mr-circulo.is-bate { animation: mr-brilho .2s ease-out; }
    @keyframes mr-brilho { 0% { filter: brightness(1.45); } 100% { filter: none; } }
}

/* A janela (o @media de sempre) e a PAGINA (o @container: a Dori aberta tira espaco sem mudar a janela; N = janela - 112) */
@media (max-width: 1024px) {
    .mr-res { order: -1; }
}
@container pagina (max-width: 912px) {
    .mr-res { order: -1; }
}
@media (max-width: 420px) {
    .mr-relogios b { font-size: 1.15rem; }
    .mr-botao, .mr-voltar { flex: 1 1 100%; }
}
@container pagina (max-width: 420px) {
    .mr-relogios b { font-size: 1.15rem; }
    .mr-botao, .mr-voltar { flex: 1 1 100%; }
}