/* ===========================================================================
   1967 Woodworks — SINCRONIA (cartão "Os dois celulares iguais" + telas de ligar)
   Usa os tokens do módulo visual (--r-*) e as classes dele (r-btn, r-aviso,
   r-mais-opcoes, r-pagina). Tudo em rem: no app, 1rem = 20 px × a letra escolhida
   (estilo.css: html{font-size:calc(20px * var(--r-escala))}), então nada fica
   abaixo de 20 px e tudo cresce junto com "Aa Letra". Sem altura fixa com texto.
   =========================================================================== */

/* ---------------------------------------------------- o cartão (Favoritos) */
.sinc-cartao{
  margin:1.5rem 0 .5rem;padding:1rem 1rem 1.1rem;
  background:var(--r-papel-2);color:var(--r-tinta);
  border:3px solid var(--r-borda);border-radius:var(--r-raio, 14px);
}
.sinc-cartao-titulo{
  margin:0 0 .6rem;font-family:var(--r-fonte-titulo);font-weight:400;
  font-size:1.25rem;line-height:1.25;overflow-wrap:break-word;
}
.sinc-cartao-situacao p{margin:0}
.sinc-situacao-titulo{font-weight:700;font-size:1.1rem;line-height:1.35}
.sinc-situacao-texto{font-size:1rem;line-height:1.45;color:var(--r-tinta-2);margin-top:.2rem !important}
/* ligado: borda verde à esquerda (a letra continua na cor da tinta, 7:1 ou mais) */
.sinc-cartao-situacao--ligado{border-left:8px solid var(--r-ok-borda);padding-left:.7rem}
.sinc-cartao-recado:not(:empty){margin-top:.8rem}
.sinc-cartao-recado .r-aviso{margin:0}
.sinc-cartao-acoes{display:flex;flex-direction:column;gap:.8rem;margin-top:1rem}
.sinc-cartao-acoes:empty{display:none}
.sinc-mais{margin-top:.2rem}
.sinc-mais > summary{font-size:1.1rem;min-height:3rem}
.sinc-mais-conteudo{display:flex;flex-direction:column;gap:.7rem;padding-top:.8rem}
.sinc-mais-texto{margin:.4rem 0 0;font-size:1rem;line-height:1.4;color:var(--r-tinta-2);overflow-wrap:break-word}

/* -------------------------------------------------------------- botões */
.sinc-btn{min-height:3rem;font-size:1.1rem;line-height:1.25;white-space:normal;text-align:center}
.sinc-btn.r-btn-principal{min-height:3.2rem}
.sinc-btn .sinc-btn-texto{overflow-wrap:break-word}
.sinc-btn .r-ic{width:1.4rem;height:1.4rem;flex:none}

/* ------------------------------------------- as telas de ligar (uma coisa) */
.sinc-tela{padding-bottom:1.5rem}
.sinc-titulo{margin:0 0 .8rem;font-size:1.4rem;line-height:1.25;overflow-wrap:break-word;outline:none}
.sinc-frase{margin:0 0 1rem;font-size:1.1rem;line-height:1.45;font-weight:700;color:var(--r-tinta);overflow-wrap:break-word}
.sinc-frase--ajuda{font-weight:400;font-size:1rem;color:var(--r-tinta-2)}
.sinc-esperando{margin:1rem 0;font-size:1.1rem;line-height:1.45;color:var(--r-tinta)}
.sinc-esperando::before{                 /* bolinha que pulsa: "está esperando", sem texto translúcido */
  content:"";display:inline-block;width:.8rem;height:.8rem;margin-right:.6rem;vertical-align:.05rem;
  border-radius:50%;background:var(--r-queimado);animation:sinc-pulso 1.2s ease-in-out infinite;
}
@keyframes sinc-pulso{0%,100%{transform:scale(.7)}50%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){ .sinc-esperando::before{animation:none} }
.sinc-pilha{margin-top:1.2rem}
.sinc-aviso{font-size:1rem}
.sinc-aviso strong{font-size:1.1rem}
.sinc-aviso-texto p{margin:.15rem 0 0}

/* o código GRANDE, separado em 3 + 3 */
.sinc-codigo{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.2rem 1.1rem;
  margin:.4rem 0 .6rem;padding:.9rem .5rem;
  background:var(--r-papel);color:var(--r-tinta);
  border:4px solid var(--r-borda);border-radius:var(--r-raio, 14px);
}
.sinc-codigo-parte{
  font-family:var(--r-fonte-texto);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:min(3.2rem, 16vw);line-height:1.1;letter-spacing:.12em;   /* teto: os 6 números numa linha até 360 px */
}
.sinc-validade{text-align:center;font-weight:700;font-size:1.1rem;margin:0 0 1rem}

/* a caixa de 6 números */
.sinc-form{display:flex;flex-direction:column;gap:.5rem}
.sinc-rotulo{font-weight:700;font-size:1.1rem}
.sinc-campo-codigo{
  width:100%;min-height:4rem;padding:.4rem .8rem;
  border:3px solid var(--r-borda);border-radius:var(--r-raio, 14px);
  background:var(--r-papel);color:var(--r-tinta);
  font-family:var(--r-fonte-texto);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:min(2.4rem, 11vw);letter-spacing:.3em;text-align:center;
  -webkit-appearance:none;appearance:none;
}
.sinc-campo-codigo[aria-invalid="true"]{border-color:var(--r-erro-borda);border-width:4px}
.sinc-erro .r-aviso{margin:.3rem 0 0}

/* --------------------------------- folha por cima (só sem o app: demo, testes) */
.sinc-folha{
  position:fixed;inset:0;z-index:60;overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--r-mesa, #8B5A2E);
  padding:calc(env(safe-area-inset-top, 0px) + .6rem) max(1rem, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 1.5rem) max(1rem, env(safe-area-inset-left, 0px));
}
.sinc-folha-topo{margin-bottom:.6rem}
.sinc-folha-voltar{color:var(--r-topo-texto, #F3E7D3);background:var(--r-topo, #3A2A1E);border-radius:12px;padding:.3rem 1rem .3rem .6rem;font-size:1.1rem;min-height:3rem}
body.sinc-com-folha{overflow:hidden}