/* =========================================================
   Genēthētō no COMPUTADOR (telas a partir de 1024 px)
   A barra de baixo vira uma barra lateral com todos os atalhos, o conteúdo ganha largura
   e cada tela usa a largura que faz sentido (leitura estreita, Átrio e Púlpito largos).
   ========================================================= */
.abas .so-desktop, .abas .abas-sep { display: none; }
.msg-painel { display: none; }
.atrio-seg[data-seg="pregar"] .atrio-card { --c1: #5B3F8C; --c2: #2E1F4F; }
/* Menu sanduíche: fundo quase opaco. O desfoque não funciona dentro do topo (que também é desfocado),
   e com o fundo transparente as capas e os textos da tela apareciam por trás das opções */
.menu-topo, body.modo-inicio .menu-topo { background: rgba(12, 14, 22, .97); }

@media (min-width: 1024px) {
  :root { --altura-abas: 0px; --lateral: 236px; --topo-alt: 65px; }
  body { padding-bottom: 32px; }

  /* ---------- Barra lateral ---------- */
  .abas, body:not(.modo-inicio) .abas, body.modo-inicio .abas {
    top: calc(var(--topo-alt) + env(safe-area-inset-top)); bottom: 0; left: 0; right: auto;
    width: var(--lateral); height: auto; z-index: 15;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 18px 12px 24px; overflow-y: auto; scrollbar-width: thin;
    background: var(--superficie); border-right: 1px solid var(--linha); border-top: 0;
  }
  body.modo-inicio .abas { background: rgba(8, 12, 26, .74); border-right-color: rgba(255, 255, 255, .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .abas a, .abas .so-desktop {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
    padding: 9px 12px; border-radius: 12px; font-size: 15px; color: var(--tinta); line-height: 1.25;
  }
  .abas a svg, body.modo-inicio .abas a svg, .abas a[aria-current="page"] svg {
    flex: none; box-sizing: border-box; width: 22px; height: 22px; padding: 0;
    background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: currentColor;
  }
  .abas a:hover { background: var(--superficie-2); }
  .abas a[aria-current="page"] { background: var(--acento-suave); color: var(--acento); font-weight: 700; }
  body.modo-inicio .abas a { color: rgba(255, 255, 255, .82); }
  body.modo-inicio .abas a:hover { background: rgba(255, 255, 255, .08); }
  body.modo-inicio .abas a[aria-current="page"] { background: rgba(201, 162, 74, .24); color: #fff; }
  .abas .abas-sep {
    display: block; margin: 16px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave);
  }
  body.modo-inicio .abas .abas-sep { color: rgba(255, 255, 255, .5); }

  /* ---------- Conteúdo ---------- */
  main { max-width: none; margin: 0 0 0 var(--lateral); padding: 0 48px; }
  .tela { max-width: 960px; margin-left: auto; margin-right: auto; padding-top: 28px; }
  #ler, #devocional, #capitulo, #homem, #contexto, #nota, #porcao, #debate, #duasvozes-leitura { max-width: 780px; }
  #atrio, #loja, #biblioteca, #pulpito, #mensagem, #arauto, #duasvozes, #igreja, #areopago, #homens, #bereia, #admin, #enciclopedia, #mapa, #arqueologo { max-width: 1180px; }
  .tela-inicio { max-width: 760px; }
  .cabecalho-tela h1 { font-size: 34px; }
  .cabecalho-tela p { font-size: 17px; max-width: 70ch; }

  /* elementos flutuantes centralizados no conteúdo, não na janela */
  .acoes-flutuantes, .toast { left: calc(50% + var(--lateral) / 2); }
  .menu-topo, body.modo-inicio .menu-topo { max-height: calc(100vh - 100px); }

  /* ---------- Átrio: todos os cards à vista, em grade ---------- */
  .atrio-carrossel {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    overflow: visible; scroll-snap-type: none; margin: 0; padding: 4px 0 10px; gap: 16px;
  }
  .atrio-card { min-height: 200px; transition: transform .18s ease, box-shadow .18s ease; }
  .atrio-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
  .atrio-seg { margin-bottom: 30px; }
  .so-celular { display: none; }

  /* ---------- Loja: cada prateleira mostra só as capas que cabem inteiras numa linha ("Ver todos" mostra o resto) ---------- */
  .prateleira-trilho {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; column-gap: 18px;
    overflow: hidden; scroll-snap-type: none; margin: 0 0 8px; padding: 2px 0 0;
  }
  .prateleira-trilho > * { min-width: 0; }

  /* ---------- Listas em colunas ---------- */
  #pulpito .lista-notas, #anotacoes .lista-notas { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  #pul-nova, #nova-nota { max-width: 320px; }
  .dv-semanas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

  /* ---------- Púlpito: editor + painel de consulta fixo ao lado ---------- */
  .tela-mensagem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); column-gap: 32px; align-items: start; }
  .tela-mensagem > .topo-tela { grid-column: 1 / -1; }
  .tela-mensagem > #msg-corpo { grid-column: 1; min-width: 0; }
  .msg-painel {
    display: block; grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--topo-alt) + 16px);
    max-height: calc(100vh - var(--topo-alt) - 32px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 16px 18px 18px; box-shadow: var(--sombra);
  }
  .msg-painel > h2 { font-family: var(--serifa); font-size: 19px; font-weight: 600; margin: 0 0 10px; }
  .msg-painel .pul-abas { flex-wrap: wrap; overflow: visible; }
  .msg-painel .pul-bloco-acoes.fixo { background: linear-gradient(transparent, var(--superficie) 30%); }
  .msg-cabeca .msg-titulo { font-size: 34px; }
  .pul-corpo { font-size: 19px; }
  .pul-acoes { grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: start; }
  .pul-barra { top: calc(var(--topo-alt) + 8px); }

  /* ---------- Duas Vozes: as duas vozes lado a lado ---------- */
  .dv-vozes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .dv-vozes .dv-voz { margin-bottom: 0; height: 100%; }
  .dv-acoes { grid-template-columns: repeat(2, minmax(0, 320px)); }
  .dv-encontro, .dv-perguntas, .dv-resumo, .dv-titulo { max-width: 78ch; }

  /* ---------- Diálogos e folha: maiores no computador ---------- */
  .dialogo { width: min(720px, 92vw); }
}

@media (min-width: 1440px) {
  :root { --lateral: 260px; }
  main { padding: 0 64px; }
}

/* Telas muito largas (monitores grandes): o app inteiro cresce na mesma proporção,
   para não ficar uma coluna pequena no meio de um espaço enorme */
@media (min-width: 1700px) { :root { --z: 1.12; } }
@media (min-width: 1920px) { :root { --z: 1.24; } }
@media (min-width: 2200px) { :root { --z: 1.38; } }
@media (min-width: 2500px) { :root { --z: 1.52; } }
@media (min-width: 2900px) { :root { --z: 1.7; } }
@media (min-width: 1700px) {
  .topo, .abas, main, .dialogo { zoom: var(--z); }
  .msg-painel { max-height: calc(100vh / var(--z) - var(--topo-alt) - 32px); }
  .menu-topo, body.modo-inicio .menu-topo { max-height: calc(100vh / var(--z) - 96px); }
}