/* TAGWAY V35.1
   Base funcional e layout: V34.4 oficial.
   Alteracao somente visual: arte TAGWAY como fundo.
   Nao altera posicoes, botoes, mapas ou fluxo das telas. */

html {
  min-height: 100%;
  background: #dff3ff;
}

body {
  min-height: 100vh;
  background-color: #dff3ff !important;
  background-image: url('/tagway-fundo.png') !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: min(100vw, 600px) auto !important;
}

/* So reduz a opacidade dos paineis brancos; dimensoes e posicionamento da V34.4 permanecem. */
.card {
  background-color: rgba(255,255,255,.84) !important;
  -webkit-backdrop-filter: blur(1.2px);
  backdrop-filter: blur(1.2px);
}

/* A arte acompanha a largura do celular sem criar altura/rolagem extra. */
@media (max-width: 600px) {
  body {
    background-size: 100vw auto !important;
  }
}

/* TAGWAY V36.1 - ajuste exclusivo da tela Opções
   Mantém Admin e demais telas da V36 sem alterações.
   A arte já contém a marca TAGWAY; por isso o título textual duplicado é ocultado.
*/
.screen-opcoes {
  background-position: center top !important;
  background-size: min(100vw, 600px) auto !important;
}

/* Evita TAGWAY duplicado sobre o logotipo que já existe na própria arte. */
.screen-opcoes .logo,
.screen-opcoes .subtitulo,
.screen-opcoes .rodape {
  display: none !important;
}

/* Dá espaço visual para o logotipo da arte sem aumentar demasiadamente a página. */
.screen-opcoes .container {
  padding: clamp(88px, 13vh, 128px) 14px 18px !important;
}

/* Painéis mais transparentes apenas em Opções, para o fundo permanecer visível. */
.screen-opcoes .card {
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(255,255,255,.56);
  box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  padding: 14px !important;
  margin-bottom: 10px !important;
}

.screen-opcoes .nome {
  margin-bottom: 8px !important;
}
.screen-opcoes .info {
  margin: 4px 0 !important;
}
.screen-opcoes .botoes {
  gap: 8px !important;
}
.screen-opcoes button {
  padding: 12px 10px !important;
  min-height: 48px;
  font-size: 15px !important;
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Cores preservadas, apenas com leve transparência para a arte aparecer. */
.screen-opcoes .sos       { background: rgba(211,47,47,.90) !important; }
.screen-opcoes .emergencia{ background: rgba(239,108,0,.90) !important; }
.screen-opcoes .localizacao{background: rgba(25,118,210,.90) !important; }
.screen-opcoes .bem       { background: rgba(46,125,50,.90) !important; }
.screen-opcoes .comer     { background: rgba(249,168,37,.90) !important; }
.screen-opcoes .dormir    { background: rgba(69,90,100,.90) !important; }
.screen-opcoes .dia       { background: rgba(106,27,154,.90) !important; }
.screen-opcoes .finalizar { background: rgba(141,110,99,.90) !important; }

/* O botão de oração usa style inline; esta regra o deixa no mesmo padrão translúcido. */
.screen-opcoes button[onclick*="oracao.html"] {
  background: rgba(124,58,237,.90) !important;
}

/* Em telas baixas reduz um pouco mais sem reposicionar elementos. */
@media (max-height: 760px) {
  .screen-opcoes .container {
    padding-top: 72px !important;
  }
  .screen-opcoes .card {
    padding: 10px !important;
    margin-bottom: 7px !important;
  }
  .screen-opcoes .botoes { gap: 6px !important; }
  .screen-opcoes button {
    padding: 9px 8px !important;
    min-height: 43px;
    font-size: 14px !important;
  }
  #tagway-session-help { margin-bottom: 4px !important; }
}

@media (max-width: 600px) {
  .screen-opcoes {
    background-size: 100vw auto !important;
  }
  .screen-opcoes .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ==========================================================
   TAGWAY V37 - TELA OPCOES NO VISUAL APROVADO
   Base funcional: V36.1 / V35 / V34.4.
   Objetivo: manter toda a arte visivel em PC e celular,
   sem exigir zoom manual e sem alterar as funcoes.
   ========================================================== */

.screen-opcoes {
  --app-w: min(100vw, 56.25dvh);
  margin: 0 !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: #dff3ff !important;
  position: relative;
}

/* A arte ocupa exatamente a moldura do aplicativo, sem cortar.
   Em PC a moldura fica centralizada; no celular ocupa a largura disponivel. */
.screen-opcoes::before {
  content: "";
  position: fixed;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--app-w);
  transform: translateX(-50%);
  background: url('/tagway-fundo.png') center center / 100% 100% no-repeat;
  pointer-events: none;
}

.screen-opcoes > * {
  position: relative;
  z-index: 1;
}

.screen-opcoes #tagway-session-box {
  position: fixed !important;
  top: clamp(6px, 1.1dvh, 12px) !important;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--app-w) - clamp(24px, 6vw, 54px));
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(5px, .8dvh, 8px) 10px !important;
  min-height: 0 !important;
  border-radius: 14px !important;
  font-size: clamp(11px, 1.45dvh, 14px) !important;
  line-height: 1.15 !important;
  background: rgba(236,253,245,.88) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* A instrucao longa tirava espaco da arte; o contador ja informa a sessao. */
.screen-opcoes #tagway-session-help {
  display: none !important;
}

.screen-opcoes .container {
  position: relative !important;
  width: var(--app-w) !important;
  max-width: none !important;
  height: 100dvh !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* A marca TAGWAY ja faz parte da arte. */
.screen-opcoes .logo,
.screen-opcoes .subtitulo,
.screen-opcoes .rodape {
  display: none !important;
}

.screen-opcoes #carregando {
  position: absolute;
  top: 31%;
  left: 8%;
  right: 8%;
  padding: 12px !important;
  border-radius: 14px;
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: clamp(12px, 1.7dvh, 15px);
}

.screen-opcoes #conteudo {
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  top: 27.5%;
  height: 44.5%;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, .7dvh, 8px);
  min-height: 0;
}

/* Painel de dados do peregrino: compacto e translucido. */
.screen-opcoes #conteudo > .card:first-of-type {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: clamp(7px, .9dvh, 10px) clamp(10px, 2vw, 14px) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 4px 12px rgba(0,52,95,.11) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.screen-opcoes .nome {
  margin: 0 0 clamp(3px, .4dvh, 5px) !important;
  font-size: clamp(15px, 2.15dvh, 20px) !important;
  line-height: 1.05 !important;
  color: #063c79;
}
.screen-opcoes .info {
  margin: 1px 0 !important;
  font-size: clamp(9px, 1.25dvh, 12px) !important;
  line-height: 1.2 !important;
}

.screen-opcoes #mensagem {
  margin: 0 !important;
  padding: 4px 8px !important;
  font-size: clamp(9px, 1.15dvh, 11px) !important;
  line-height: 1.15 !important;
}

/* Cartao dos botoes deixa de ser um grande painel branco. */
.screen-opcoes #conteudo > .card:last-of-type {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.screen-opcoes .botoes {
  height: 100%;
  display: grid !important;
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: clamp(3px, .48dvh, 6px) !important;
}

.screen-opcoes .botoes button {
  position: relative;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 2px clamp(24px, 5vw, 42px) 2px clamp(8px, 2vw, 14px) !important;
  border-radius: clamp(8px, 1.25dvh, 12px) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  box-shadow: 0 2px 8px rgba(0,44,91,.12) !important;
  font-size: clamp(9px, 1.35dvh, 13px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.13);
  overflow: hidden;
}

.screen-opcoes .botoes button::after {
  content: "›";
  position: absolute;
  right: clamp(8px, 2vw, 14px);
  top: 50%;
  transform: translateY(-53%);
  font-size: clamp(18px, 2.9dvh, 28px);
  line-height: 1;
  font-weight: 400;
  opacity: .96;
}

/* Cores do modelo visual aprovado, com transparencia suficiente para a arte aparecer. */
.screen-opcoes .sos        { background: rgba(232, 42, 48, .91) !important; }
.screen-opcoes .emergencia { background: rgba(255, 106,  0, .90) !important; }
.screen-opcoes .localizacao{ background: rgba( 11, 119, 225, .90) !important; }
.screen-opcoes .bem        { background: rgba(  0, 143,  91, .90) !important; }
.screen-opcoes .comer      { background: rgba(231, 164,  11, .89) !important; }
.screen-opcoes .dormir     { background: rgba( 56,  79, 104, .88) !important; }
.screen-opcoes button[onclick*="oracao.html"] { background: rgba(103, 43, 190, .90) !important; }
.screen-opcoes .dia        { background: rgba( 76,  59, 139, .90) !important; }
.screen-opcoes .finalizar  { background: rgba(190, 126,   0, .91) !important; }

/* Em celulares muito estreitos, preserva legibilidade sem criar rolagem. */
@media (max-width: 430px) {
  .screen-opcoes { --app-w: 100vw; }
  .screen-opcoes #conteudo {
    left: 4.2%;
    right: 4.2%;
    top: 27.8%;
    height: 44.2%;
  }
  .screen-opcoes .botoes button {
    font-size: clamp(8.5px, 1.42dvh, 12px) !important;
  }
}

/* Monitores baixos: usa a mesma composicao proporcional, sem pedir zoom 50%. */
@media (max-height: 720px) {
  .screen-opcoes #conteudo {
    top: 26.2%;
    height: 46.2%;
  }
  .screen-opcoes #conteudo > .card:first-of-type {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  .screen-opcoes .info { font-size: 9px !important; }
}

/* ==========================================================
   TAGWAY V37.1 - RESPONSIVIDADE REAL EM 100% DE ZOOM
   Mantém a base funcional da V37. Admin preservado.
   Objetivo: reproduzir em 100% o enquadramento que ficava bom
   somente com zoom de ~67% no PC, sem alterar a lógica.
   ========================================================== */

/* Moldura visual comum: a arte continua inteira e centralizada. */
body.tagway-app:not(.screen-opcoes) {
  background-color:#dff3ff !important;
  background-image:url('/tagway-fundo.png') !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:min(100vw, 56.25vh) 100vh !important;
  background-attachment:fixed !important;
}

/* A arte já possui a marca TAGWAY. Evita repetição visual. */
.screen-index > .card > h1,
.screen-index > .card > .subtitulo,
.screen-onde-estou .brand,
.screen-percurso .topo .logo,
.screen-mapa-final .topo .logo {
  display:none !important;
}

/* No PC, reduz apenas a interface — não o fundo — para equivaler
   ao enquadramento aprovado em ~67% de zoom do navegador. */
@media (min-width:700px) {
  :root { --tw-desktop-ui-scale:.69; }

  /* Cadastro */
  .screen-index > .card {
    width:min(500px, 78vw) !important;
    max-width:500px !important;
    padding:16px !important;
    margin-top:clamp(115px, 15vh, 165px) !important;
    background:rgba(255,255,255,.80) !important;
  }
  .screen-index label{margin-top:8px !important;font-size:13px !important}
  .screen-index input,.screen-index textarea,.screen-index select{padding:8px !important;font-size:13px !important}
  .screen-index textarea{min-height:54px !important}
  .screen-index button{padding:10px !important;margin-top:10px !important;font-size:14px !important}

  /* Onde estou */
  .screen-onde-estou .wrap {
    width:min(520px, 78vw) !important;
    max-width:520px !important;
    margin:0 auto !important;
    padding-top:clamp(72px, 9vh, 105px) !important;
  }
  .screen-onde-estou .top{margin-bottom:6px !important}
  .screen-onde-estou .back{padding:8px 12px !important;font-size:13px !important}
  .screen-onde-estou .panel{padding:12px !important;background:rgba(255,255,255,.80) !important}
  .screen-onde-estou .panel h1{font-size:22px !important;margin:0 0 2px !important}
  .screen-onde-estou .sub{font-size:13px !important;margin:0 0 8px !important}
  .screen-onde-estou .tabs button,.screen-onde-estou .refresh,.screen-onde-estou .full{padding:9px !important;font-size:13px !important}
  .screen-onde-estou .map{height:clamp(230px, 33vh, 350px) !important}
  .screen-onde-estou .gps,.screen-onde-estou .note{font-size:12px !important;padding:9px !important}

  /* Onde comer / onde dormir */
  .screen-comer header,.screen-dormir header{padding:10px !important;background:rgba(8,118,189,.90) !important}
  .screen-comer header h1,.screen-dormir header h1{font-size:22px !important;margin:0 0 2px !important}
  .screen-comer main,.screen-dormir main{max-width:610px !important;padding:8px 12px 16px !important}
  .screen-comer #map,.screen-dormir #map{height:clamp(235px,34vh,360px) !important;min-height:0 !important}
  .screen-comer .status,.screen-dormir .status,.screen-comer .card,.screen-dormir .card{padding:9px !important;margin:7px 0 !important;background:rgba(255,255,255,.82) !important}
  .screen-comer .card h3,.screen-dormir .card h3{font-size:15px !important}
  .screen-comer .meta,.screen-dormir .meta{font-size:12px !important;line-height:1.35 !important}
  .screen-comer a,.screen-comer button,.screen-dormir a,.screen-dormir button{padding:7px 9px !important;font-size:12px !important}

  /* Momento de oração */
  .screen-oracao .wrap{max-width:520px !important;padding-top:clamp(115px,15vh,165px) !important}
  .screen-oracao .card{padding:14px !important;background:rgba(255,255,255,.80) !important}
  .screen-oracao h1{font-size:22px !important}
  .screen-oracao .btn{padding:10px !important;font-size:14px !important}

  /* Terço e Rosário */
  .screen-terco .w,.screen-rosario .w{max-width:560px !important;padding-top:clamp(92px,12vh,135px) !important}
  .screen-terco .c,.screen-rosario .c{padding:14px !important;background:rgba(255,255,255,.82) !important}
  .screen-terco h1,.screen-rosario h1{font-size:22px !important}
  .screen-terco .p,.screen-rosario p,.screen-rosario li{font-size:12px !important;line-height:1.35 !important}
  .screen-rosario .g{padding:9px !important;margin:7px 0 !important}
  .screen-rosario .g h2{font-size:15px !important}

  /* Percurso e mapa final */
  .screen-percurso .topo,.screen-mapa-final .topo{padding:8px 12px !important}
  .screen-percurso .titulo,.screen-mapa-final .titulo{font-size:18px !important}
  .screen-percurso #mapa,.screen-mapa-final #mapa{height:clamp(260px,40vh,420px) !important}
  .screen-mapa-final .conteudo{max-width:650px !important;padding:8px !important}
  .screen-mapa-final .card{padding:9px !important;margin:6px 0 !important;background:rgba(255,255,255,.82) !important}
  .screen-mapa-final button{padding:9px !important;font-size:12px !important}

  /* Finalizado */
  .screen-finalizado > .card{max-width:650px !important;padding:14px !important;margin-top:clamp(70px,9vh,100px) !important;background:rgba(255,255,255,.83) !important}
  .screen-finalizado h1{font-size:25px !important}
  .screen-finalizado h2{font-size:18px !important}
  .screen-finalizado p,.screen-finalizado .linha{font-size:12px !important}

  /* Sessão expirada */
  .screen-sessao-expirada > .card{max-width:460px !important;margin-top:clamp(150px,20vh,220px) !important;padding:18px !important;background:rgba(255,255,255,.83) !important}

  /* V37 Opções: mantém o visual aprovado, mas compacta mais o miolo em PC
     para que 100% do navegador corresponda ao enquadramento visto a 67%. */
  .screen-opcoes #conteudo{
    top:29.4% !important;
    height:38.3% !important;
    left:7.2% !important;
    right:7.2% !important;
    gap:4px !important;
  }
  .screen-opcoes #conteudo > .card:first-of-type{
    padding:5px 9px !important;
  }
  .screen-opcoes .nome{font-size:14px !important;margin-bottom:2px !important}
  .screen-opcoes .info{font-size:8.5px !important;line-height:1.12 !important}
  .screen-opcoes .botoes{gap:3px !important}
  .screen-opcoes .botoes button{
    font-size:8.8px !important;
    border-radius:7px !important;
    padding-top:1px !important;
    padding-bottom:1px !important;
  }
  .screen-opcoes .botoes button::after{font-size:18px !important}
}

/* Celular: ocupa a largura do aparelho, sem aplicar a compactação de desktop. */
@media (max-width:699px){
  body.tagway-app:not(.screen-opcoes){
    background-size:100vw auto !important;
    background-attachment:scroll !important;
  }
  .screen-onde-estou .wrap,
  .screen-oracao .wrap,
  .screen-terco .w,
  .screen-rosario .w{width:100% !important;max-width:100% !important}
}

/* ==========================================================
   TAGWAY V37.3 - ARTE E INTERFACE EM ESCALA PROPORCIONAL
   Correcao: a interface e a arte passam a usar a mesma moldura
   941x1672. Assim a arte nao fica esticada quando a largura da
   janela limita o aplicativo (PC/notebook) e nao exige zoom.
   ========================================================== */

/* A arte original tem proporcao 941 x 1672.
   A largura e a altura abaixo sempre usam o MESMO limitador. */
.screen-opcoes {
  --app-w: min(100vw, 56.28dvh) !important;
  --app-h: min(177.68vw, 100dvh) !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* Fundo e moldura agora possuem exatamente a mesma dimensao. */
.screen-opcoes::before {
  top: 0 !important;
  bottom: auto !important;
  left: 50% !important;
  width: var(--app-w) !important;
  height: var(--app-h) !important;
  transform: translateX(-50%) !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
}

.screen-opcoes .container {
  width: var(--app-w) !important;
  height: var(--app-h) !important;
  min-height: 0 !important;
}

/* O contador tambem acompanha a largura real da arte. */
.screen-opcoes #tagway-session-box {
  width: calc(var(--app-w) - 28px) !important;
}

/* Conteudo da tela Opcoes passa a seguir a altura da propria arte.
   Valores em porcentagem continuam ocupando a mesma regiao visual. */
.screen-opcoes #conteudo {
  top: 29.4% !important;
  height: 38.3% !important;
}

/* Nas demais telas, preserva a proporcao original da arte.
   A regra anterior forçava a imagem a ter 100vh de altura mesmo
   quando sua largura ja estava limitada, causando esticamento. */
body.tagway-app:not(.screen-opcoes) {
  background-size: min(100vw, 56.28vh) auto !important;
  background-position: center top !important;
}

/* Em celular a mesma regra proporcional vale: largura total,
   altura automatica conforme 941x1672. */
@media (max-width:699px) {
  .screen-opcoes {
    --app-w: min(100vw, 56.28dvh) !important;
    --app-h: min(177.68vw, 100dvh) !important;
  }
  body.tagway-app:not(.screen-opcoes) {
    background-size: min(100vw, 56.28vh) auto !important;
  }
}

/* ==========================================================
   TAGWAY V37.4 - DESKTOP ADAPTATIVO SEM EFEITO "CELULAR SOLTO"
   Em telas horizontais a arte vertical completa continua no centro,
   mas a propria arte tambem preenche as laterais como extensao visual.
   Interface e arte central continuam usando a mesma escala.
   ========================================================== */

@media (min-width: 900px) and (orientation: landscape) {
  .screen-opcoes {
    background: #dff3ff !important;
    isolation: isolate;
  }

  /* Camada ampla: usa a mesma arte para ocupar automaticamente toda a tela do PC.
     Ela funciona apenas como extensao visual; nao altera coordenadas dos botoes. */
  .screen-opcoes::after {
    content: "";
    position: fixed;
    inset: -28px;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(223,243,255,.28), rgba(223,243,255,.28)),
      url('/tagway-fundo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: blur(12px) saturate(.92);
    transform: scale(1.035);
    opacity: .78;
  }

  /* Arte principal: sempre inteira e proporcional à altura disponível. */
  .screen-opcoes::before {
    z-index: 1 !important;
    box-shadow: 0 0 28px rgba(0,65,120,.16);
  }

  .screen-opcoes > * {
    z-index: 2 !important;
  }

  /* Elimina a sensação de faixa azul vazia fora da arte. */
  html,
  body.screen-opcoes {
    background-color: #dff3ff !important;
  }
}

/* ==========================================================
   TAGWAY V38 - FUNDO HORIZONTAL + LAYOUT RESPONSIVO
   Base funcional: V37.4. Visual: fluxo amplo inspirado na V34.4.
   Desktop: arte 16:9 preenche a tela e painel fica central.
   Celular: controles voltam ao tamanho natural, sem miniaturizacao.
   ========================================================== */
html { background:#dff3ff !important; }
body.tagway-app {
  background-image:url('/tagway-fundo.png') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  background-attachment:fixed !important;
}

/* Opcoes deixa de usar a moldura vertical 941x1672 das V37.x. */
body.screen-opcoes {
  --app-w:auto !important;
  --app-h:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:100vh !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  background-image:url('/tagway-fundo.png') !important;
  background-position:center center !important;
  background-size:cover !important;
  background-attachment:fixed !important;
}
body.screen-opcoes::before,
body.screen-opcoes::after { display:none !important; content:none !important; }

.screen-opcoes .container {
  position:relative !important;
  width:100% !important;
  max-width:620px !important;
  height:auto !important;
  min-height:100vh !important;
  margin:0 auto !important;
  padding:76px 14px 26px !important;
  overflow:visible !important;
}
.screen-opcoes .logo,
.screen-opcoes .subtitulo,
.screen-opcoes .rodape { display:none !important; }
.screen-opcoes #tagway-session-help { display:none !important; }
.screen-opcoes #tagway-session-box {
  position:fixed !important;
  z-index:50 !important;
  top:10px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(570px, calc(100vw - 28px)) !important;
  max-width:570px !important;
  margin:0 !important;
  padding:8px 12px !important;
  min-height:0 !important;
  border-radius:16px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  background:rgba(236,253,245,.84) !important;
  border:1px solid rgba(72,211,145,.72) !important;
  box-shadow:0 3px 12px rgba(0,60,100,.10) !important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.screen-opcoes #carregando,
.screen-opcoes #conteudo {
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
}
.screen-opcoes #carregando {
  margin:80px 0 0 !important;
  padding:14px !important;
  background:rgba(255,255,255,.76) !important;
}
.screen-opcoes #conteudo {
  display:block !important;
}
.screen-opcoes #conteudo > .card:first-of-type {
  margin:0 0 10px !important;
  padding:12px 16px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(255,255,255,.76) !important;
  box-shadow:0 4px 14px rgba(0,55,100,.12) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.screen-opcoes .nome {
  font-size:22px !important;
  line-height:1.15 !important;
  margin:0 0 7px !important;
  color:#063b78 !important;
}
.screen-opcoes .info {
  font-size:13px !important;
  line-height:1.25 !important;
  margin:3px 0 !important;
}
.screen-opcoes #conteudo > .card:nth-of-type(2) {
  margin:0 !important;
  padding:10px !important;
  border-radius:17px !important;
  background:rgba(255,255,255,.20) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:0 5px 18px rgba(0,55,100,.10) !important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.screen-opcoes .botoes {
  display:grid !important;
  gap:7px !important;
}
.screen-opcoes .botoes button {
  position:relative !important;
  width:100% !important;
  min-height:47px !important;
  padding:9px 44px 9px 14px !important;
  border-radius:12px !important;
  font-size:14px !important;
  line-height:1.12 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.38) !important;
  box-shadow:0 3px 9px rgba(0,40,80,.13) !important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.screen-opcoes .botoes button::after {
  content:'›' !important;
  position:absolute !important;
  display:block !important;
  right:15px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  font-size:28px !important;
  line-height:1 !important;
  font-weight:400 !important;
  color:#fff !important;
}
.screen-opcoes .sos        { background:rgba(239,35,45,.82) !important; }
.screen-opcoes .emergencia { background:rgba(255,105,0,.82) !important; }
.screen-opcoes .localizacao{ background:rgba(0,105,235,.82) !important; }
.screen-opcoes .bem        { background:rgba(0,145,70,.82) !important; }
.screen-opcoes .comer      { background:rgba(238,170,0,.82) !important; }
.screen-opcoes .dormir     { background:rgba(67,85,105,.82) !important; }
.screen-opcoes button[onclick*="oracao.html"] { background:rgba(118,35,215,.82) !important; }
.screen-opcoes .dia        { background:rgba(82,36,170,.82) !important; }
.screen-opcoes .finalizar  { background:rgba(190,125,0,.82) !important; }

/* Desktop: o painel central ocupa tamanho confortavel em 100% de zoom. */
@media (min-width:900px) and (orientation:landscape) {
  body.screen-opcoes { background-position:center center !important; }
  .screen-opcoes .container {
    max-width:610px !important;
    padding-top:72px !important;
    padding-bottom:18px !important;
  }
  .screen-opcoes #conteudo > .card:first-of-type { padding:10px 16px !important; }
  .screen-opcoes .nome { font-size:21px !important; }
  .screen-opcoes .botoes { gap:6px !important; }
  .screen-opcoes .botoes button { min-height:45px !important; font-size:14px !important; }
}

/* Celular: nada de reduzir toda a tela. Botões e textos permanecem grandes. */
@media (max-width:699px) {
  body.tagway-app,
  body.screen-opcoes {
    background-attachment:scroll !important;
    background-size:auto 100% !important;
    background-position:23% top !important;
  }
  .screen-opcoes .container {
    max-width:600px !important;
    min-height:100vh !important;
    padding:70px 10px 22px !important;
  }
  .screen-opcoes #tagway-session-box {
    top:7px !important;
    width:calc(100vw - 20px) !important;
    font-size:12px !important;
    padding:7px 9px !important;
  }
  .screen-opcoes #conteudo > .card:first-of-type { padding:10px 12px !important; }
  .screen-opcoes .nome { font-size:20px !important; }
  .screen-opcoes .info { font-size:12px !important; }
  .screen-opcoes #conteudo > .card:nth-of-type(2) { padding:8px !important; }
  .screen-opcoes .botoes { gap:6px !important; }
  .screen-opcoes .botoes button {
    min-height:46px !important;
    padding:8px 38px 8px 10px !important;
    font-size:13px !important;
  }
}

/* Nova arte V38 também nas demais telas, sem alterar a estrutura delas. */
body.tagway-app:not(.screen-opcoes) {
  background-image:url('/tagway-fundo.png') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  background-attachment:fixed !important;
}
@media (max-width:699px) {
  body.tagway-app:not(.screen-opcoes) {
    background-size:auto 100% !important;
    background-position:23% top !important;
    background-attachment:scroll !important;
  }
}

/* ==========================================================
   TAGWAY V38.1 - CORRECAO MODAL + ENQUADRAMENTO DA ARTE
   1) Modal Coletar Pontos sempre aparece sobre os botoes/viewport.
   2) No desktop, a arte horizontal desce levemente para preservar
      melhor a faixa inferior e o selo ROTA DA LUZ SP 2016.
   ========================================================== */
.screen-opcoes .modal-coleta-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 18px !important;
  z-index: 2147483000 !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15,23,42,.58) !important;
}
.screen-opcoes .modal-coleta-box {
  position: relative !important;
  inset: auto !important;
  width: min(460px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 36px) !important;
  overflow-y: auto !important;
  margin: 0 !important;
  z-index: 2147483001 !important;
  background: rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

@media (min-width:900px) and (orientation:landscape) {
  body.screen-opcoes {
    background-position: center 62% !important;
  }
}

@media (max-width:699px) {
  .screen-opcoes .modal-coleta-overlay {
    padding: 14px !important;
  }
  .screen-opcoes .modal-coleta-box {
    width: min(430px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 28px) !important;
    padding: 20px 16px !important;
  }
}


/* ==========================================================
   TAGWAY V38.2 - MOBILE + AGENDA
   Mobile: mantém tamanhos/botões da V38.1 e mostra a largura
   completa da arte horizontal, sem recortar somente um trecho.
   Desktop permanece com o enquadramento aprovado da V38.1.
   ========================================================== */
@media (max-width:699px) {
  body.tagway-app,
  body.screen-opcoes,
  body.tagway-app:not(.screen-opcoes) {
    background-image:
      linear-gradient(rgba(223,243,255,.06), rgba(223,243,255,.12)),
      url('/tagway-fundo.png') !important;
    background-size: 100% auto, 100% auto !important;
    background-position: center top, center top !important;
    background-repeat: no-repeat, no-repeat !important;
    background-attachment: scroll, scroll !important;
    background-color: #dff3ff !important;
  }
}


/* ==========================================================
   TAGWAY V38.3 - FUNDO RESPONSIVO EM TODAS AS TELAS DO PEREGRINO
   Mantém Admin intacto.
   PC: aplica a arte V38 a todas as telas tagway-app.
   Mobile: usa enquadramento próprio sem reduzir controles/botões.
   ========================================================== */

/* TODAS as telas do peregrino - desktop */
@media (min-width:700px) {
  body.tagway-app {
    min-height: 100dvh !important;
    background-image:
      linear-gradient(rgba(223,243,255,.08), rgba(223,243,255,.12)),
      url('/tagway-fundo.png') !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, center center !important;
    background-size: cover, cover !important;
    background-attachment: fixed, fixed !important;
    background-color: #dff3ff !important;
  }

  /* Opções conserva exatamente o tratamento aprovado da V38.2/V38.1. */
  body.screen-opcoes {
    background-position: center center, center center !important;
  }
}

/* TODAS as telas do peregrino - celular */
@media (max-width:699px) {
  html {
    min-height: 100%;
    background: #dff3ff !important;
  }

  body.tagway-app {
    min-height: 100dvh !important;
    background-image:
      linear-gradient(rgba(223,243,255,.06), rgba(223,243,255,.10)),
      url('/tagway-fundo.png') !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center top, center top !important;
    background-size: 100% auto, 100% auto !important;
    background-attachment: scroll, scroll !important;
    background-color: #dff3ff !important;
  }

  /* Não altera largura, escala, fonte ou tamanho dos botões já aprovados. */
  body.tagway-app .container,
  body.tagway-app .wrap,
  body.tagway-app .card {
    max-width: 100%;
  }
}

/* Admin permanece fora dessas regras porque usa body.tagway-admin. */


/* ==========================================================
   TAGWAY V38.4 - BEM-VINDO / DADOS QUASE TRANSPARENTE
   Mantém o fundo V38.3 visível através do painel de dados.
   ========================================================== */

/* Painel principal de boas-vindas/dados na tela Opções */
.screen-opcoes #conteudo,
.screen-opcoes #conteudo .card,
.screen-opcoes .info,
.screen-opcoes .dados,
.screen-opcoes .dados-peregrino {
  background: rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
  box-shadow: 0 4px 14px rgba(0,55,100,.10) !important;
  border-color: rgba(255,255,255,.34) !important;
}

/* Mantém textos legíveis mesmo com o painel mais transparente */
.screen-opcoes #conteudo,
.screen-opcoes #conteudo p,
.screen-opcoes #conteudo strong,
.screen-opcoes #conteudo span {
  text-shadow: 0 1px 2px rgba(255,255,255,.62);
}

/* No celular deixa ainda mais leve para a arte aparecer */
@media (max-width:699px) {
  .screen-opcoes #conteudo,
  .screen-opcoes #conteudo .card,
  .screen-opcoes .info,
  .screen-opcoes .dados,
  .screen-opcoes .dados-peregrino {
    background: rgba(255,255,255,.11) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
    backdrop-filter: blur(1.5px) !important;
  }
}


/* ==========================================================
   TAGWAY V38.5 - PAINÉIS TRANSLÚCIDOS EM TODAS AS TELAS
   Tudo que fica sobre a arte usa efeito de vidro leve,
   preservando mapas, botões, campos e legibilidade.
   Admin permanece intacto.
   ========================================================== */

/* Cartões/painéis gerais das telas do peregrino */
body.tagway-app .card,
body.tagway-app .panel,
body.tagway-app .box,
body.tagway-app .wrap,
body.tagway-app .topo,
body.tagway-app .hero,
body.tagway-app .conteudo,
body.tagway-app .info,
body.tagway-app .bloco {
  background-color: rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
  border-color: rgba(255,255,255,.34) !important;
  box-shadow: 0 4px 14px rgba(0,55,100,.10) !important;
}

/* Onde Comer / Onde Dormir: cartões/listas sobre a imagem */
.screen-comer .card,
.screen-comer .panel,
.screen-comer .box,
.screen-comer .lista,
.screen-dormir .card,
.screen-dormir .panel,
.screen-dormir .box,
.screen-dormir .lista {
  background: rgba(255,255,255,.15) !important;
}

/* Momento de Oração, Terço e Rosário */
.screen-oracao .card,
.screen-oracao .box,
.screen-oracao .panel,
.screen-terco .card,
.screen-terco .box,
.screen-terco .panel,
.screen-rosario .card,
.screen-rosario .box,
.screen-rosario .panel {
  background: rgba(255,255,255,.14) !important;
}

/* Onde Estou / Percurso / Finalização também seguem o mesmo vidro */
.screen-onde-estou .wrap,
.screen-onde-estou .card,
.screen-percurso .card,
.screen-mapa-final .card,
.screen-finalizado .card,
.screen-sessao-expirada .card {
  background: rgba(255,255,255,.15) !important;
}

/* NÃO tornar mapas, inputs ou botões transparentes além do que já eram. */
body.tagway-app #map,
body.tagway-app .map,
body.tagway-app input,
body.tagway-app select,
body.tagway-app textarea,
body.tagway-app button {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Mobile: vidro ainda mais leve para mostrar melhor a arte. */
@media (max-width:699px) {
  body.tagway-app .card,
  body.tagway-app .panel,
  body.tagway-app .box,
  body.tagway-app .wrap,
  body.tagway-app .topo,
  body.tagway-app .hero,
  body.tagway-app .conteudo,
  body.tagway-app .info,
  body.tagway-app .bloco,
  .screen-comer .lista,
  .screen-dormir .lista {
    background-color: rgba(255,255,255,.10) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
    backdrop-filter: blur(1.5px) !important;
  }
}

/* Admin usa tagway-admin e não recebe nenhuma destas regras. */


/* ==========================================================
   TAGWAY V38.6 - LIMPEZA VISUAL + VOLTAR EM DESTAQUE
   ========================================================== */

/* Onde Comer / Onde Dormir:
   remove os blocos azul/verde do cabeçalho que cobriam a arte. */
body.screen-comer header,
body.screen-dormir header {
  background: rgba(255,255,255,.08) !important;
  color: #063b78 !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.screen-comer header h1,
body.screen-dormir header h1 {
  color: #063b78 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.85) !important;
}

/* Onde Estou:
   não exibe contador/texto da sessão nesta tela.
   A validação da sessão continua funcionando pelo JavaScript. */
body.screen-onde-estou #tagway-session-box,
body.screen-onde-estou #tagway-session-help {
  display: none !important;
}

/* Remove o desfoque da arte atrás do conteúdo em Onde Estou. */
body.screen-onde-estou .wrap,
body.screen-onde-estou .panel,
body.screen-onde-estou .gps,
body.screen-onde-estou .note {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.screen-onde-estou .wrap {
  background: transparent !important;
  box-shadow: none !important;
}
body.screen-onde-estou .panel {
  background: rgba(255,255,255,.12) !important;
}
body.screen-onde-estou .gps,
body.screen-onde-estou .note {
  background: rgba(255,255,255,.28) !important;
}

/* Botão VOLTAR mais visível em todas as telas do peregrino. */
body.tagway-app .actions .secondary,
body.tagway-app a.voltar,
body.tagway-app button.voltar,
body.tagway-app .btn.voltar {
  background: rgba(30,41,59,.94) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.26) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* No celular, aumenta área de toque e contraste do VOLTAR. */
@media (max-width:699px) {
  body.tagway-app .actions .secondary,
  body.tagway-app a.voltar,
  body.tagway-app button.voltar,
  body.tagway-app .btn.voltar {
    min-height: 46px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }

  body.screen-comer header,
  body.screen-dormir header {
    background: rgba(255,255,255,.06) !important;
  }

  body.screen-onde-estou .panel {
    background: rgba(255,255,255,.09) !important;
  }
}


/* ==========================================================
   TAGWAY V38.7 - CRÉDITO DOS MAPAS MAIS DISCRETO
   Mantém a atribuição OSM visível conforme exigido pelo serviço.
   ========================================================== */
body.tagway-app .leaflet-control-attribution {
  font-size: 9px !important;
  line-height: 1.15 !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  background: rgba(255,255,255,.68) !important;
  color: rgba(30,41,59,.72) !important;
  box-shadow: none !important;
  border-radius: 5px 0 0 0 !important;
  white-space: nowrap !important;
}
body.tagway-app .leaflet-control-attribution a {
  color: rgba(30,64,175,.78) !important;
  text-decoration: none !important;
}
body.tagway-app .leaflet-control-attribution a:hover {
  text-decoration: underline !important;
}
@media (max-width:699px) {
  body.tagway-app .leaflet-control-attribution {
    font-size: 8px !important;
    padding: 1px 3px !important;
    background: rgba(255,255,255,.62) !important;
  }
}


/* ==========================================================
   TAGWAY V39 - GLASS BEM-VINDO
   Visual aprovado: imagem de fundo aparece através dos dados.
   Corrige especificamente a regra antiga mais forte do primeiro card.
   ========================================================== */

/* Painel Bem-vindo + dados do peregrino */
body.screen-opcoes #conteudo > .card:first-of-type {
  background: rgba(255,255,255,.13) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  box-shadow: 0 5px 16px rgba(0,40,80,.10) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
  backdrop-filter: blur(1.5px) !important;
}

/* Mantém nome e dados fáceis de ler sobre a arte */
body.screen-opcoes #conteudo > .card:first-of-type .nome,
body.screen-opcoes #conteudo > .card:first-of-type .info,
body.screen-opcoes #conteudo > .card:first-of-type p,
body.screen-opcoes #conteudo > .card:first-of-type span,
body.screen-opcoes #conteudo > .card:first-of-type strong {
  background: transparent !important;
  text-shadow:
    0 1px 2px rgba(255,255,255,.95),
    0 0 5px rgba(255,255,255,.70) !important;
}

/* Caixa que envolve os botões: praticamente invisível para não cobrir a arte */
body.screen-opcoes #conteudo > .card:nth-of-type(2) {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 4px 14px rgba(0,40,80,.07) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Celular: ainda mais transparente, preservando os botões aprovados */
@media (max-width:699px) {
  body.screen-opcoes #conteudo > .card:first-of-type {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.42) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    backdrop-filter: blur(1px) !important;
  }

  body.screen-opcoes #conteudo > .card:nth-of-type(2) {
    background: rgba(255,255,255,.035) !important;
  }
}

/* Desktop: mantém o enquadramento inferior aprovado da arte */
@media (min-width:900px) and (orientation:landscape) {
  body.screen-opcoes {
    background-position: center center, center 62% !important;
  }
}

/* Admin permanece fora destas regras. */


/* ==========================================================
   TAGWAY V39.1 - FUNDO NÍTIDO NA TELA PRINCIPAL
   Remove TODO backdrop-filter/blur da tela Opções.
   A transparência permanece, mas a arte não é desfocada.
   ========================================================== */

/* Nenhum elemento da tela principal pode desfocar o que está atrás. */
body.screen-opcoes,
body.screen-opcoes .container,
body.screen-opcoes #conteudo,
body.screen-opcoes #conteudo > .card,
body.screen-opcoes #conteudo > .card:first-of-type,
body.screen-opcoes #conteudo > .card:nth-of-type(2),
body.screen-opcoes .botoes,
body.screen-opcoes .botoes button,
body.screen-opcoes #tagway-session-box,
body.screen-opcoes .nome,
body.screen-opcoes .info {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* Bem-vindo transparente, sem vidro fosco. */
body.screen-opcoes #conteudo > .card:first-of-type {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  box-shadow: 0 4px 12px rgba(0,40,80,.08) !important;
}

/* Área dos botões quase transparente e sem blur. */
body.screen-opcoes #conteudo > .card:nth-of-type(2) {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

/* O próprio fundo não recebe filtro. */
body.screen-opcoes {
  filter: none !important;
}

/* Celular: máxima visibilidade da arte, sem perder legibilidade. */
@media (max-width:699px) {
  body.screen-opcoes #conteudo > .card:first-of-type {
    background: rgba(255,255,255,.07) !important;
  }
  body.screen-opcoes #conteudo > .card:nth-of-type(2) {
    background: transparent !important;
  }
}


/* ==========================================================
   TAGWAY V39.2 - GUIA DE ORAÇÃO
   ========================================================== */
.screen-oracao .guia-oracao-action {
  margin: 10px 0 !important;
}
.screen-oracao .guia-oracao-btn {
  width:100% !important;
  min-height:48px !important;
  padding:10px 14px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.48) !important;
  background:rgba(79,70,229,.84) !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  box-shadow:0 3px 10px rgba(0,40,80,.15) !important;
}
body.screen-guia-oracao .wrap,
body.screen-guia-oracao .prayer {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.screen-guia-oracao .wrap {
  background:transparent !important;
}
@media(max-width:699px){
  body.screen-guia-oracao .prayer{background:rgba(255,255,255,.10) !important}
}


/* ==========================================================
   TAGWAY V39.3 - DESTAQUE DOS DADOS IMPORTANTES
   Tela principal: sangue, emergência e informações médicas.
   ========================================================== */

/* Destaca linhas importantes sem esconder a arte de fundo. */
body.screen-opcoes .dado-alerta {
  display:block !important;
  margin-top:6px !important;
  padding:7px 10px !important;
  border-radius:10px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  text-shadow:none !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 2px 7px rgba(0,0,0,.10) !important;
}

/* Sangue: vermelho suave para identificação imediata. */
body.screen-opcoes .dado-alerta.sangue {
  background:rgba(220,38,38,.86) !important;
  color:#fff !important;
}

/* Contato de emergência: laranja forte. */
body.screen-opcoes .dado-alerta.emergencia {
  background:rgba(234,88,12,.86) !important;
  color:#fff !important;
}

/* Informação médica: azul escuro para diferenciar. */
body.screen-opcoes .dado-alerta.medica {
  background:rgba(3,105,161,.86) !important;
  color:#fff !important;
}

/* Fallback visual para linhas já existentes no card, sem mudar JS.
   Mantém o painel transparente/nítido da V39.1. */
body.screen-opcoes #conteudo > .card:first-of-type {
  overflow:visible !important;
}

@media(max-width:699px){
  body.screen-opcoes .dado-alerta {
    padding:7px 9px !important;
    font-size:12px !important;
    margin-top:5px !important;
  }
}


/* ==========================================================
   TAGWAY V39.4 - MODO OFFLINE DE PEREGRINAÇÃO
   ========================================================== */
#tagway-offline-status{
  position:fixed; right:10px; bottom:10px; z-index:10050;
  max-width:min(92vw,430px); padding:8px 11px; border-radius:12px;
  font:800 12px/1.25 Arial,sans-serif; box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:opacity .25s ease;
}
#tagway-offline-status.online{
  background:rgba(236,253,245,.94); color:#166534; border:1px solid #86efac;
}
#tagway-offline-status.online.compacto{opacity:.30}
#tagway-offline-status.offline{
  background:rgba(127,29,29,.95); color:#fff; border:1px solid rgba(255,255,255,.8);
}
@media(max-width:699px){
  #tagway-offline-status{left:8px;right:8px;bottom:8px;text-align:center;font-size:11px}
}


/* ==========================================================
   TAGWAY V39.8 - DADOS NA MESMA COR DO BEM-VINDO
   Apenas um pequeno aumento de fonte.
   ========================================================== */
body.screen-opcoes #sangue,
body.screen-opcoes #contato,
body.screen-opcoes #condicoes {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 1px 0 !important;
  margin: 3px 0 !important;
  color: inherit !important;
  font-size: 1.06em !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  text-shadow: inherit !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* ==========================================================
   TAGWAY V40 - MOMENTO DE ORAÇÃO CENTRALIZADO E PADRONIZADO
   ========================================================== */
body.screen-oracao .wrap{
  width:min(92vw,520px) !important;
  max-width:520px !important;
  min-height:calc(100vh - 95px) !important;
  margin:0 auto !important;
  padding:18px 12px 28px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

body.screen-oracao .card{
  width:100% !important;
  max-width:520px !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

body.screen-oracao .guia-oracao-action,
body.screen-oracao .actions{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  margin:10px 0 0 !important;
}

/* Os quatro botões principais passam a ter exatamente o mesmo formato. */
body.screen-oracao .guia-oracao-btn,
body.screen-oracao a.btn{
  width:100% !important;
  min-height:48px !important;
  margin:0 !important;
  padding:11px 14px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.48) !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  text-align:center !important;
  text-decoration:none !important;
  box-shadow:0 3px 10px rgba(0,40,80,.15) !important;
}

/* Mantém as cores já existentes; padroniza somente tamanho e geometria. */
body.screen-oracao .config{
  width:100% !important;
  margin:12px 0 0 !important;
  text-align:center !important;
}
body.screen-oracao .config .link{
  display:inline-block !important;
  width:auto !important;
  min-height:0 !important;
  padding:8px 10px !important;
  margin:0 auto !important;
  font-size:13px !important;
}

/* Os botões dos modais também ficam simétricos entre si. */
body.screen-oracao .modal .row{
  align-items:stretch !important;
}
body.screen-oracao .modal .row button{
  width:100% !important;
  min-height:46px !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  font-size:14px !important;
  font-weight:800 !important;
  box-sizing:border-box !important;
}

@media(max-width:699px){
  body.screen-oracao .wrap{
    width:94vw !important;
    min-height:calc(100vh - 105px) !important;
    padding:12px 8px 22px !important;
  }
  body.screen-oracao .card{
    padding:14px !important;
  }
  body.screen-oracao .guia-oracao-btn,
  body.screen-oracao a.btn{
    min-height:46px !important;
    padding:10px 12px !important;
    font-size:13px !important;
  }
}