/* Fontes guardadas no app (funcionam sem internet): as mesmas do Hinário */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fontes/figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fontes/figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fontes/bricolage-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fontes/bricolage-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* mesma família visual do Hinário e do painel */
  --papel: #f5f6f8; --papel-2: #eef0f3; --branco: #ffffff; --pedra: #e4e6ea; --pedra-2: #d2d6dc;
  --carvao: #16191f; --tinta-2: #3f4651; --tinta-3: #5f6570; --destaque: #1a5fc4; --destaque-2: #154ea3; --destaque-suave: #e9f1fd; --destaque-tinta: #154ea3;
  --terracota: #b17c5c; --terracota-tinta: #8a5a3f; --terracota-suave: #f6ece5;
  --titulo: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px;
  --r-xs: 4px; --r-sm: 10px; --r: 16px; --r-pill: 999px;
  --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-base: 15px; --t-lg: 18px; --t-texto: 21px;
  --lado: 340px; --alvo: 44px;
  --sobre: rgba(22, 25, 31, .045); --barra: rgba(255, 255, 255, .94);
  --sombra-alta: 0 4px 14px -4px rgba(16, 24, 40, .14); --foco: 0 0 0 3px rgba(26, 95, 196, .3);
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --papel: #121417; --papel-2: #1a1d22; --branco: #1d2026; --pedra: #2c3038; --pedra-2: #3b414b;
  --carvao: #eceef2; --tinta-2: #c4c8d0; --tinta-3: #9aa0aa; --destaque: #2f6fd0; --destaque-2: #3b7fe0; --destaque-suave: #16263d; --destaque-tinta: #8db8f5;
  --terracota: #c99272; --terracota-tinta: #dba585; --terracota-suave: #33261d;
  --sobre: rgba(255, 255, 255, .05); --barra: rgba(29, 32, 38, .94);
  --sombra-alta: 0 4px 14px -4px rgba(0, 0, 0, .5); --foco: 0 0 0 3px rgba(141, 184, 245, .4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --papel: #121417; --papel-2: #1a1d22; --branco: #1d2026; --pedra: #2c3038; --pedra-2: #3b414b;
    --carvao: #eceef2; --tinta-2: #c4c8d0; --tinta-3: #9aa0aa; --destaque: #2f6fd0; --destaque-2: #3b7fe0; --destaque-suave: #16263d; --destaque-tinta: #8db8f5;
    --terracota: #c99272; --terracota-tinta: #dba585; --terracota-suave: #33261d;
    --sobre: rgba(255, 255, 255, .05); --barra: rgba(29, 32, 38, .94);
    --sombra-alta: 0 4px 14px -4px rgba(0, 0, 0, .5); --foco: 0 0 0 3px rgba(141, 184, 245, .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--papel); color: var(--carvao); font: var(--t-base)/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--destaque-suave); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-sm); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font: inherit; color: inherit; }

/* Estrutura: barra lateral + texto */
.app { display: grid; grid-template-columns: var(--lado) minmax(0, 1fr); height: 100vh; }
.lado { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--pedra); background: var(--branco); }
.lado__topo { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-6) var(--esp-4) var(--esp-3); border-bottom: 1px solid var(--pedra); }
.marca { padding: 0 var(--esp-1); font: 600 var(--t-lg)/1.1 var(--titulo); }
.busca { display: flex; align-items: center; gap: var(--esp-2); height: 46px; padding: 0 var(--esp-3); border: 1px solid var(--pedra-2); border-radius: var(--r-sm); background: var(--papel); color: var(--tinta-3); }
.busca:focus-within { border-color: var(--destaque); box-shadow: var(--foco); }
.busca input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--carvao); font: inherit; }
.filtros { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.contagem { margin: 0; padding: 0 var(--esp-1); font-size: var(--t-xs); color: var(--tinta-3); }
.filtro { height: 28px; padding: 0 var(--esp-3); border: 1px solid var(--pedra-2); border-radius: var(--r-pill); background: none; cursor: pointer; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.filtro[aria-pressed="true"] { border-color: var(--destaque); background: var(--destaque-suave); color: var(--destaque-tinta); }
.selo { margin-left: var(--esp-2); padding: 1px 6px; border-radius: var(--r-pill); background: var(--destaque-suave); color: var(--destaque-tinta); font-size: 11px; font-weight: 600; }
.rodape { margin: 0; padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--pedra); font-size: var(--t-xs); color: var(--tinta-3); }

.lista { flex: 1; overflow-y: auto; margin: 0; padding: var(--esp-2); list-style: none; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--esp-3); width: 100%; padding: var(--esp-3); border: 0; border-radius: var(--r-sm); background: none; text-align: left; cursor: pointer; }
.item:hover { background: var(--sobre); }
.item[aria-current="true"] { background: var(--destaque-suave); }
.item__titulo { font-weight: 500; line-height: 1.3; }
.item__tempo { font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.item__cod { font-size: var(--t-sm); font-weight: 600; color: var(--destaque-tinta); font-variant-numeric: tabular-nums; }
.item__local { font-size: var(--t-sm); color: var(--tinta-3); text-align: right; }
.item--sem { opacity: .55; }

/* Área principal */
.principal { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cabeca { padding: var(--esp-3) var(--esp-8); border-bottom: 1px solid var(--pedra); background: var(--papel); font-size: var(--t-sm); color: var(--tinta-3); min-height: 46px; display: flex; align-items: center; gap: var(--esp-3); }
.cabeca[hidden] { display: none; }
.cabeca b { color: var(--carvao); font-weight: 600; }
.cabeca { flex-wrap: wrap; row-gap: var(--esp-2); }
.cabeca__aviso, .cabeca__guardada { display: flex; align-items: center; gap: var(--esp-3); }
.retomar { white-space: nowrap; }
.cabeca__guardada { margin-left: auto; }
.retomar { height: 32px; padding: 0 var(--esp-3); border: 1px solid var(--pedra-2); border-radius: var(--r-pill); background: var(--branco); cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--destaque-tinta); }
.retomar:hover { border-color: var(--destaque); }
.retomar--leve { color: var(--tinta-2); font-weight: 500; }
.vazio__titulo { font-weight: 600; color: var(--carvao); }
.vazio progress { width: min(320px, 80%); accent-color: var(--destaque); }

.texto { flex: 1; overflow-y: auto; padding: var(--esp-10) var(--esp-8) 220px; scroll-padding: 120px; }
.texto > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.vazio { display: grid; place-items: center; gap: var(--esp-3); height: 60%; color: var(--tinta-3); text-align: center; }
.vazio svg { width: 40px; height: 40px; stroke-width: 1.2; }
.vazio p { margin: 0; }
.msg-titulo { margin: 0 auto var(--esp-2); font: 400 clamp(28px, 3.2vw, 40px)/1.12 var(--titulo); text-align: center; letter-spacing: -.01em; }
.msg-meta { margin: 0 auto var(--esp-10); text-align: center; color: var(--tinta-3); font-size: var(--t-md); }
.msg-meta span + span::before { content: " · "; }

.par { position: relative; margin: 0 auto var(--esp-6); padding: var(--esp-2) var(--esp-4) var(--esp-2) var(--esp-12); border-radius: var(--r-sm); font-size: var(--t-texto); line-height: 1.6; transition: background-color .2s; }
.par__n { position: absolute; left: var(--esp-2); top: var(--esp-2); width: 32px; text-align: right; font: 400 var(--t-lg)/1.75 var(--titulo); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.par--canto { font-style: italic; color: var(--tinta-2); }
.par--atual { background: var(--destaque-suave); }
.par--atual.fase-en { background: var(--terracota-suave); }
.frase { border-radius: var(--r-xs); cursor: pointer; transition: background-color .15s, color .15s; }
.frase:hover { background: var(--sobre); }
.frase--sem { font-style: italic; color: var(--tinta-3); }
.frase--atual { color: var(--destaque-tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fase-en .frase--atual { color: var(--terracota-tinta); }
.frase--inicio { box-shadow: inset 3px 0 0 var(--destaque); background: var(--sobre); padding-left: 4px; }

/* Player */
.player { position: absolute; left: var(--esp-6); right: var(--esp-6); bottom: var(--esp-5); display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--esp-6); max-width: 1100px; margin: 0 auto; padding: var(--esp-3) var(--esp-5); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--barra); backdrop-filter: blur(12px); box-shadow: var(--sombra-alta); }
.player[hidden] { display: none; }
.modos { display: flex; padding: 3px; border-radius: var(--r-pill); background: var(--papel-2); }
.modos button { height: 34px; padding: 0 var(--esp-3); border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2); white-space: nowrap; }
.modos button[aria-checked="true"] { background: var(--branco); color: var(--carvao); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.controles { display: flex; align-items: center; gap: var(--esp-2); }
.ctl { display: grid; place-items: center; width: var(--alvo); height: var(--alvo); border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--tinta-2); }
.ctl:hover { background: var(--sobre); color: var(--carvao); }
.ctl:disabled { opacity: .4; cursor: default; }
.ctl--play { width: 52px; height: 52px; background: var(--destaque); color: #fff; }
.ctl--play:hover { background: var(--destaque-2); color: #fff; }
.ctl--play svg { width: 22px; height: 22px; fill: currentColor; stroke-width: 1.2; }
.ctl--play .ic-pausa { display: none; stroke-width: 3; fill: none; }
.tocando .ctl--play .ic-play { display: none; }
.tocando .ctl--play .ic-pausa { display: block; }
.estado { display: grid; grid-template-columns: auto auto minmax(80px, 1fr) auto; align-items: center; gap: var(--esp-3); min-width: 0; }
.fase { min-width: 86px; height: 26px; padding: 0 var(--esp-3); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; line-height: 26px; text-align: center; text-transform: uppercase; background: var(--papel-2); color: var(--tinta-3); }
.fase[data-fase="en"] { background: var(--terracota-suave); color: var(--terracota-tinta); }
.fase[data-fase="pt"] { background: var(--destaque-suave); color: var(--destaque-tinta); }
.fase:empty { visibility: hidden; }
.tempo { font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.barra { width: 100%; accent-color: var(--destaque); }
.carregando .ctl--play { opacity: .6; cursor: progress; }

@media (max-width: 1240px) {
  /* área do texto estreita: modo, botões e barra em linhas próprias */
  .player { grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); justify-items: center; }
  .estado { width: 100%; }
}
@media (max-width: 760px) {
  :root { --lado: 100%; --t-texto: 18px; }
  .app { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; }
  .lado { border-right: 0; border-bottom: 1px solid var(--pedra); }
  .texto { padding: var(--esp-6) var(--esp-4) 260px; }
  .player { left: var(--esp-2); right: var(--esp-2); bottom: var(--esp-2); gap: var(--esp-3); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Abas da barra lateral */
.abas { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--r-pill); background: var(--papel-2); }
.abas button { height: 34px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2); }
.abas button[aria-selected="true"] { background: var(--branco); color: var(--carvao); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.painel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.painel[hidden] { display: none; }
.painel__topo { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--pedra); }
.lado__topo { gap: var(--esp-4); }
.escolha { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin: 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--r-sm); background: var(--destaque-suave); color: var(--destaque-tinta); font-size: var(--t-sm); font-weight: 600; }
.escolha[hidden] { display: none; }

/* Item da lista com o botão "+" */
.lista__item { position: relative; }
.lista__item .item { padding-right: 44px; }
.item__mais { position: absolute; top: 10px; right: 6px; width: 30px; height: 30px; border: 1px solid var(--pedra-2); border-radius: 50%; background: var(--branco); cursor: pointer; font-size: 18px; line-height: 1; color: var(--tinta-2); opacity: 0; }
.lista__item:hover .item__mais, .item__mais:focus-visible { opacity: 1; }
.item__mais:hover { border-color: var(--destaque); color: var(--destaque-tinta); }
@media (hover: none) { .item__mais { opacity: 1; } }

/* Aba Cultos */
.cultos-lado { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-3) var(--esp-3) var(--esp-6); }
.cl { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4) var(--esp-4); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); text-align: left; }
.cl--ativo { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque); }
.cl--novo { align-items: center; justify-content: center; min-height: 56px; border-style: dashed; background: none; color: var(--tinta-2); font-weight: 600; cursor: pointer; }
.cl--novo:hover { border-color: var(--destaque); color: var(--destaque-tinta); }
.cl__topo { display: flex; align-items: center; justify-content: space-between; }
.cl__nome { margin: 0; font: 500 var(--t-lg)/1.2 var(--titulo); }
.cl__mais { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; cursor: pointer; font-size: 18px; color: var(--tinta-3); }
.cl__mais:hover { background: var(--sobre); color: var(--carvao); }
.cl__msg { display: flex; flex-direction: column; gap: 2px; margin: 0 calc(-1 * var(--esp-2)); padding: var(--esp-2); border-radius: var(--r-sm); text-decoration: none; color: inherit; }
.cl__msg:hover { background: var(--sobre); }
.cl__titulo { font-weight: 600; line-height: 1.3; }
.cl__cod { font-size: var(--t-sm); font-weight: 600; color: var(--destaque-tinta); }
.cl__estado { font-size: var(--t-sm); color: var(--tinta-2); }
.cl__barra { width: 100%; height: 6px; margin-top: var(--esp-1); accent-color: var(--destaque); }
.cl__vazio { margin: 0; font-size: var(--t-sm); color: var(--tinta-3); }
.cl__rotulo { margin: var(--esp-2) 0 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.cl__fila { margin: 0; padding: 0 0 0 var(--esp-5); font-size: var(--t-sm); color: var(--tinta-2); }
.cl__fila li { display: flex; align-items: center; gap: var(--esp-1); padding: 2px 0; }
.cl__fila-tit { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cl__mini { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--tinta-3); }
.cl__mini:hover { background: var(--sobre); color: var(--carvao); }
.cl__link { align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--destaque-tinta); }
.cl__link:hover { text-decoration: underline; }
.cl__hist { font-size: var(--t-sm); color: var(--tinta-2); }
.cl__hist summary { cursor: pointer; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.cl__hist ul { margin: var(--esp-1) 0 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }

/* Menu flutuante (⋯ do culto e + da mensagem) */
.menu { position: fixed; z-index: 20; min-width: 200px; max-height: 70vh; overflow-y: auto; padding: var(--esp-1); border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--branco); box-shadow: var(--sombra-alta); }
.menu[hidden] { display: none; }
.menu__titulo { margin: var(--esp-2) var(--esp-3) var(--esp-1); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.menu button { display: block; width: 100%; padding: var(--esp-2) var(--esp-3); border: 0; border-radius: var(--r-xs); background: none; text-align: left; cursor: pointer; font-size: var(--t-md); color: var(--carvao); }
.menu button:hover, .menu button:focus-visible { background: var(--sobre); }

/* Culto no cabeçalho da mensagem */
.cabeca__culto { display: flex; align-items: center; gap: var(--esp-3); }
.selo-culto { padding: 2px 10px; border-radius: var(--r-pill); background: var(--papel-2); color: var(--tinta-2); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.selo-culto--ok { background: var(--destaque-suave); color: var(--destaque-tinta); }
.cabeca__depois { font-size: var(--t-sm); color: var(--tinta-3); }
a.retomar { display: inline-flex; align-items: center; text-decoration: none; }

.botao { height: 36px; padding: 0 var(--esp-4); border: 1px solid var(--pedra-2); border-radius: var(--r-sm); background: var(--branco); cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--carvao); }
.botao:hover { border-color: var(--destaque); }
.botao--primario { border-color: var(--destaque); background: var(--destaque); color: #fff; }
.botao--primario:hover { background: var(--destaque-2); }
.botao--cheio { width: 100%; }

/* Apresentação */
.ctl--apres { position: relative; }
.ponto { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #2fbf6a; box-shadow: 0 0 0 2px var(--barra); }
.ponto[hidden] { display: none; }
.apres { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); color: var(--carvao); box-shadow: var(--sombra-alta); }
.apres::backdrop { background: rgba(16, 24, 40, .35); }
.apres__corpo { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-5) var(--esp-6) var(--esp-6); }
.apres__topo { display: flex; align-items: center; justify-content: space-between; }
.apres__topo h2 { margin: 0; font: 500 var(--t-lg)/1.2 var(--titulo); }
.apres__grupo { display: flex; flex-direction: column; gap: var(--esp-2); margin: 0; padding: var(--esp-4) 0 0; border: 0; border-top: 1px solid var(--pedra); }
.apres__grupo legend { padding: 0; font-weight: 600; }
.dica { margin: 0; font-size: var(--t-sm); color: var(--tinta-3); }
.campo { display: flex; flex-direction: column; gap: var(--esp-1); font-size: var(--t-sm); color: var(--tinta-2); }
.campo input, .campo select { height: 38px; padding: 0 var(--esp-3); border: 1px solid var(--pedra-2); border-radius: var(--r-sm); background: var(--papel); color: var(--carvao); font: inherit; }
.campo-linha { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--t-md); }
.linha { display: flex; align-items: center; gap: var(--esp-3); }
.estado-txt { font-size: var(--t-sm); color: var(--tinta-3); }
.estado-txt[data-ok="true"] { color: var(--verde, #1e7f46); font-weight: 600; }
.apres .botao { align-self: flex-start; }

/* barra de progresso dos cultos: trilho discreto nos dois temas */
.cl__barra { appearance: none; border: 0; border-radius: var(--r-pill); overflow: hidden; background: var(--papel-2); }
.cl__barra::-webkit-progress-bar { background: var(--papel-2); }
.cl__barra::-webkit-progress-value { background: var(--destaque); border-radius: var(--r-pill); }
.cl__barra::-moz-progress-bar { background: var(--destaque); }

/* "+" do culto sem mensagem (ou com a mensagem concluída): escolher a mensagem */
.cl__add { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin: var(--esp-1) 0; border: 1px dashed var(--pedra-2); border-radius: 50%; background: none; cursor: pointer; font-size: 24px; line-height: 1; color: var(--tinta-3); }
.cl__add:hover { border-style: solid; border-color: var(--destaque); color: var(--destaque-tinta); background: var(--destaque-suave); }
.link { flex: 1; min-width: 0; height: 36px; padding: 0 var(--esp-3); border: 1px solid var(--pedra-2); border-radius: var(--r-sm); background: var(--papel); color: var(--tinta-2); font: inherit; font-size: var(--t-sm); }
.linha2 { display: grid; grid-template-columns: 1fr 110px; gap: var(--esp-3); }
.apres .botao:disabled { opacity: .5; cursor: default; }

/* Barra lateral mais larga */
:root { --lado: 400px; }
@media (max-width: 760px) { :root { --lado: 100%; } }

/* Rodapé da barra lateral: o que está guardado e quem está conectado */
.rodape-lado { border-top: 1px solid var(--pedra); }
.rodape-lado .rodape { border-top: 0; padding-bottom: var(--esp-1); }
.conta { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin: 0; padding: 0 var(--esp-4) var(--esp-3); font-size: var(--t-xs); color: var(--tinta-3); }
.conta__sair { padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--t-xs); font-weight: 600; color: var(--destaque-tinta); }

/* Tela de login (primeira vez no aparelho) */
.entrar { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: var(--esp-4); background: var(--papel); }
.entrar[hidden] { display: none; }
.entrar__caixa { display: flex; flex-direction: column; gap: var(--esp-4); width: min(380px, 100%); padding: var(--esp-8) var(--esp-6); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); box-shadow: var(--sombra-alta); }
.entrar__titulo { margin: 0; font: 500 28px/1.1 var(--titulo); }
.entrar__texto { margin: 0; font-size: var(--t-md); color: var(--tinta-2); }
.entrar__erro { min-height: 1.2em; margin: 0; font-size: var(--t-sm); color: var(--vermelho, #c62828); }
.player.esperando .ctl--play { animation: pulsa 1.2s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .player.esperando .ctl--play { animation: none; } }