/* css/radio.css — o rádio de emergência (MeshCore) no tablet.
   Só se vê nas casas que o têm ligado; numa casa sem rádio nada disto aparece. */

/* O botão do topo. Pequeno e calmo quando está tudo bem; grande e âmbar
   quando precisa de um toque — é o caso depois de o tablet reiniciar. */
.btn-radio { min-height: 80px; font-size: 1.05rem; padding: .5rem 1rem; border-radius: 20px; white-space: nowrap;
             background: var(--papel); border: 3px solid var(--verde); color: var(--verde); }
.btn-radio.espera { border-color: var(--luz); color: var(--ambar); background: var(--ambar-fundo); }
.btn-radio.toque { border-color: var(--luz); color: var(--sombra); background: var(--luz); font-weight: 800;
                   animation: radio-chamar 1.6s ease-in-out infinite; }
.btn-radio.cinza { border-color: var(--linha); color: var(--texto2); }
@keyframes radio-chamar { 50% { box-shadow: 0 0 0 8px var(--ambar-fundo); } }
@media (prefers-reduced-motion: reduce) { .btn-radio.toque { animation: none; } }

/* A faixa por baixo do topo: o 🆘 que foi pelo rádio e o que a família responde.
   Fica por cima de todos os ecrãs — o tablet volta ao início sozinho ao fim de
   uns minutos, e a confirmação "a Ana recebeu" não pode ir com ele. */
.radio-faixa { position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column; }
/* Dentro do contentor das faixas do tablet, quem fica preso é o contentor. */
.faixas-topo .radio-faixa { position: static; }
.radio-faixa > div { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; font-size: 1.15rem;
                     border-bottom: 2px solid var(--linha); }
.radio-faixa .txt { flex: 1; }
.radio-faixa .btn { min-height: 60px; font-size: 1rem; flex: 0 0 auto; }
/* A linha do rádio é só o caminho ("enviado pelo rádio", "chegou ao telemóvel
   de…"): discreta, por baixo da faixa do pedido, que é a que importa. */
.radio-faixa .sos { background: var(--areia); color: var(--sombra); font-size: 1rem; padding: .45rem 1rem; }
.radio-faixa .sos.ok { background: var(--verde-fundo); color: var(--verde); font-weight: 700; }
.radio-faixa .sos.mau { background: var(--ambar-fundo); color: var(--ambar); }
.radio-faixa .sos .btn { min-height: 44px; }
.radio-faixa .msg { background: var(--areia); color: var(--sombra); }
.radio-faixa .msg b { color: var(--madeira); }

/* O painel do rádio: ecrã inteiro, porque se usa de pé, ao lado do tablet. */
dialog.radio-painel { width: min(56rem, 100vw); max-width: 100vw; max-height: 100vh; margin: auto; padding: 1.2rem 1.4rem;
                      border: 0; border-radius: 22px; font-size: 1.05rem; }
dialog.radio-painel::backdrop { background: rgba(30, 25, 20, .55); }
.radio-painel h2 { font-family: var(--serif); margin: 0 0 .6rem; font-size: 1.7rem; }
.radio-painel h3 { margin: 1.2rem 0 .4rem; font-size: 1.2rem; color: var(--madeira); }
.radio-painel dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.radio-painel dt { color: var(--texto2); }
.radio-painel dd { margin: 0; font-weight: 700; }
.radio-painel .acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.radio-painel .acoes .btn { min-height: 60px; flex: 1 1 12rem; }
.radio-painel .nota { color: var(--texto2); margin: .4rem 0; }
.radio-painel .mau { color: var(--vermelho); font-weight: 700; }
.radio-painel .bom { color: var(--verde); font-weight: 700; }
.radio-painel input[type=text], .radio-painel input[type=password], .radio-painel select {
    font: inherit; padding: .6rem .8rem; border: 2px solid var(--linha); border-radius: 12px; width: 100%; box-sizing: border-box; }
.radio-painel .pin { font-size: 2rem; letter-spacing: .4em; text-align: center; max-width: 14rem; display: block; margin: .6rem auto; }
.radio-painel .lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.radio-painel .lista li { background: var(--papel); border-radius: 12px; padding: .5rem .8rem; }
.radio-painel .lista label { display: flex; align-items: center; gap: .7rem; cursor: pointer; }
.radio-painel .lista input[type=checkbox] { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; }
.radio-painel .lista small { color: var(--texto2); }
.radio-painel .qr { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; background: #fff;
                    border: 2px solid var(--linha); border-radius: 16px; padding: .8rem; margin-top: .6rem; }
.radio-painel .qr svg { width: 15rem; height: 15rem; flex: 0 0 auto; }
.radio-painel .qr p { flex: 1 1 14rem; margin: 0; }
.radio-painel .linha { display: flex; gap: .6rem; align-items: center; }
.radio-painel .linha > * { flex: 1; }
.radio-painel .linha .btn { flex: 0 0 auto; min-height: 52px; }

/* Num ecrã estreito (a demonstração vista no telemóvel) o botão do rádio
   encolhe com os vizinhos, para o relógio e a emergência caberem. */
@media (max-width: 900px) {
    .btn-radio { min-height: 60px; font-size: .9rem; padding: .4rem .6rem; white-space: normal; }
}