/* ============================================================================
   IMPULSAMOS DS · layouts.css — cascas e padrões de tela (2026-10-22)
   Requer tokens.css + base.css. Os layouts vêm dos templates VOIT (Dashboard 01
   e autenticação) adaptados à identidade Impulsamos. Ver LEIA-PRIMEIRO.md.
   ========================================================================== */

/* ============================== CASCA DE SISTEMA ==========================
   Fundo Névoa; lateral transparente à esquerda; painel Tela com canto
   superior-esquerdo arredondado, luz radial no topo e rolagem própria.

   <body class="casca">
     <aside class="lateral"> .marca + .nav + .conta </aside>
     <header class="topo-barra"> .busca + .redondo(s) + .avatar </header>
     <main class="painel"> .painel-cabeca + conteúdo </main>
   </body>
*/
.casca { min-height: 100vh; display: grid; grid-template-columns: 288px minmax(0, 1fr); grid-template-rows: 96px minmax(0, 1fr); height: 100vh; }
.casca .marca { grid-column: 1; grid-row: 1; padding: 12px 32px 0; align-content: center; } /* 12px a mais em cima: a marca desce um pouco (23/10/2026) */

/* Barra superior (sobre a Névoa) */
.topo-barra { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 14px; padding: 0 32px 0 8px; min-width: 0; }
.topo-barra .busca { flex: 1; max-width: 460px; }
.topo-barra .busca input { width: 100%; }
.topo-barra .vao { flex: 1; }

/* Lateral: itens soltos sobre a Névoa; o ativo é um cartão branco */
.lateral { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 2px; padding: 4px 24px 24px; overflow-y: auto; min-height: 0; }
.lateral > * { flex-shrink: 0; } /* com vários grupos abertos a lateral rola; sem isto os itens (ex.: link direto "Painel") encolhiam (28/10/2026) */
.nav { display: flex; flex-direction: column; gap: 2px; }
/* Rótulo de grupo = botão translúcido com ícone que abre/fecha as páginas do
   grupo (comum.js). Fechado por padrão; o grupo da página ativa abre sozinho.
   HTML: <div class="nav-rotulo"><svg class="i"><use href="#i-…"/></svg>Nome</div> */
.nav-rotulo { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; margin-top: 1px; padding: 0 12px; border: 0; border-radius: var(--r); background: rgba(255,255,255,.35); box-shadow: var(--borda-interna); text-align: left; font: 600 10.5px/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-66); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.nav-rotulo > span { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-rotulo .i { width: 17px; height: 17px; flex: none; }
.nav-rotulo:hover { background: rgba(255,255,255,.7); color: var(--tinta); }
.nav:not(.fechado) .nav-rotulo { color: var(--tinta); }
.nav:not(.fechado) .nav-rotulo:hover { background: var(--ardosia); color: #fff; } /* grupo aberto: hover em Ardósia */
.nav-rotulo .seta { margin-left: auto; width: 13px; height: 13px; transform: rotate(90deg); transition: transform .28s var(--ease-suave); }
.nav.fechado .nav-rotulo .seta { transform: rotate(0deg); }
/* Páginas dentro de um grupo (menu em árvore, 23/10/2026): menores que o botão
   do grupo, recuadas atrás de um trilho; o grupo abre e fecha com animação de
   altura (.nav-paginas, grid 0fr → 1fr, 280ms --ease-suave) e a seta gira 90°. */
.nav a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--tinta-66); transition: color .18s var(--ease), background-color .18s var(--ease); background: transparent; }
.nav a svg.i { margin-right: -2px; width: 15px; height: 15px; }
.nav a .com-icone { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav a:hover { background: rgba(255,255,255,.55); color: var(--tinta); }
.nav a.ativo { background: var(--branco); box-shadow: var(--sombra-ativo); font-weight: 600; color: var(--tinta); }
.nav-paginas { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s var(--ease-suave), opacity .22s var(--ease); opacity: 1; }
.nav-paginas > div { overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 1px 0 1px 12px; } /* grupo fechado ocupa 2px, não 4 */
.nav.fechado .nav-paginas { grid-template-rows: 0fr; opacity: 0; }
.nav-paginas a { position: relative; }
.nav .contagem { margin-left: auto; }
/* Atalhos abaixo de um item (sub-navegação), com bolinha de situação opcional */
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 2px 18px; }
.nav .nav-sub a { padding: 7px 14px; font-size: 13.5px; font-weight: 400; color: var(--tinta-66); }
.nav .nav-sub a.ativo { background: rgba(255,255,255,.7); color: var(--tinta); box-shadow: none; font-weight: 500; }
.nav-sub .nome-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .vao { flex: 1; min-height: 16px; }
/* Conta no pé da lateral: cartão translúcido; o bloco inteiro abre o menu */
.conta { position: relative; margin-top: 10px; }
.conta-botao { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--r-interno); background: rgba(255,255,255,.55); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color .15s var(--ease); }
.conta-botao:hover, .conta-botao[aria-expanded="true"] { background: rgba(255,255,255,.85); }
.conta .avatar { width: 34px; height: 34px; }
.conta-nome { min-width: 0; flex: 1; }
.conta-nome strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.conta-nome span { display: block; font-size: 11.5px; color: var(--tinta-46); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-botao > .i { color: var(--tinta-46); width: 15px; height: 15px; }
.conta .menu-conta { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; width: auto; padding: 6px; }

/* Painel principal: Tela, canto arredondado, luz no topo, rolagem própria */
.painel { grid-column: 2; grid-row: 2; position: relative; isolation: isolate; border-radius: var(--r-painel) 0 0 0; background: var(--tela); overflow-y: auto; overflow-x: hidden; min-height: 0; min-width: 0; padding: 36px 32px 48px 40px; } /* respiro direito = o da barra superior (32px); o conteúdo ocupa a largura toda (23/10/2026) */ /* min-width: 0 — sem isso o conteúdo largo (meta, pílulas) estica a grade da casca além da tela (23/10/2026) */
.painel::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 420px; background: var(--g-painel); }
.painel::after { content: ""; position: absolute; z-index: -1; right: 0; top: -160px; width: 620px; height: 620px; border-radius: 50%; background: var(--bruma); filter: blur(120px); opacity: .7; transform: translateX(120px); }
.painel > * { position: relative; }
.painel-conteudo { display: flex; flex-direction: column; gap: 24px; } /* sem largura máxima: responde ao monitor; textos longos limitam-se por 76ch */

/* Cabeçalho do painel: título-marca d'água + número em evidência + cartões */
.painel-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) repeat(auto-fit, 330px); gap: 20px; align-items: stretch; }
.painel-cabeca .titulo-area { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0; }
.titulo-agua { font: 450 var(--t-display-2)/1 var(--font-display); letter-spacing: -.05em; color: rgba(16,24,32,.3); }
.metrica-principal .rotulo { font-size: 13px; color: var(--tinta-56); }
.metrica-principal .valor { font: 450 var(--t-numero-1)/1.1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.metrica-principal .meta { display: flex; gap: 22px; align-items: center; margin-top: 10px; font-size: 13px; flex-wrap: wrap; }
.metrica-principal .meta .contexto { color: var(--tinta-66); }
.seletor-texto { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: 500 13px var(--font-body); color: var(--tinta); cursor: pointer; }
.seletor-texto svg.i { width: 15px; height: 15px; }
/* Cartão de resumo do cabeçalho (vidro ou destaque) */
.cartao-resumo { border-radius: var(--r-cartao); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.cartao-resumo .rotulo { font-size: 13px; color: var(--tinta-56); }
.cartao-resumo .valor { font: 450 var(--t-numero-1)/1.1 var(--font-display); letter-spacing: -.05em; }
.cartao-resumo .acao { margin-top: 10px; }
.cartao-resumo.vidro { background: var(--vidro); box-shadow: 0 0 0 1px var(--vidro-borda); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.cartao-resumo.destaque { background: var(--ardosia); color: #fff; }
.cartao-resumo.destaque .rotulo { color: rgba(255,255,255,.66); }

/* Topo de página simples (telas sem métrica): título + meta + ações.
   Ganha véu com desfoque depois que o .painel rola (comum.js põe .rolou). */
.topo { position: sticky; top: -36px; z-index: 30; isolation: isolate; margin: -36px -32px 0 -40px; padding: 36px 32px 14px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Véu (23/10/2026): o Chrome ignora a máscara de um elemento sticky dentro de
   um contêiner que rola (o .painel) — fica uma linha reta. Por isso o véu é
   position: fixed, colado no topo do painel (96px × 288px da casca), com a
   mesma máscara do SRV: desfoque que some para baixo, sem linha. */
.topo::before { content: ""; position: fixed; z-index: -1; top: 96px; left: 288px; right: 0; height: 160px; border-top-left-radius: var(--r-painel); background: var(--veu); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), left .2s var(--ease); }
.topo.rolou::before { opacity: 1; }
.lateral-recolhida .topo::before { left: 76px; }
.barra-oculta .topo::before { top: 1px; } /* 1px, não 0: com top: 0 o Chrome ignora a máscara do véu (testado) */
.barra-oculta.casca::before { content: ""; position: fixed; z-index: 31; top: 0; left: 288px; right: 0; height: 1px; background: var(--tela); pointer-events: none; } /* tapa o 1px acima do véu */
.lateral-recolhida.barra-oculta.casca::before { left: 76px; }

/* Barra superior some ao rolar o painel (como o Dock do Mac): o painel sobe
   e cobre a barra; o mouse na borda de cima da tela traz a barra de volta
   (comum.js põe/tira .barra-oculta na casca). Só em computador. */
.topo-barra { transition: opacity .25s var(--ease), transform .3s var(--ease-out); }
.painel { transition: margin-top .3s var(--ease-out); }
.barra-oculta .topo-barra { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.barra-oculta .painel { margin-top: -96px; }
.topo .titulo { flex: 1; min-width: 240px; }
.topo h1 { font-size: var(--t-titulo-1); }
.topo .trilha { margin-top: 10px; flex-wrap: wrap; } /* trilha no lugar da .meta: Painel › … › página atual (23/10/2026) */
.topo .meta[hidden] { display: none; }
.topo .meta { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-46); }

/* Grades de conteúdo */
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grade-lista-detalhe { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 20px; }

/* ============================== TELA DE ACESSO (entrar) ==================
   Modelo do DS novo (23/10/2026): fundo Névoa com a luz do painel no topo e
   manchas Bruma; marca no canto como na casca; à esquerda um cartão de vidro
   com título-marca-d'água, o símbolo "Caminhos" em LED num bloco Ardósia
   (.bloco.escuro + simbolo-led.js) e uma faixa de pílulas; à direita o cartão
   branco de entrar com o .botao cheio "Entrar com Google".
   <body class="acesso"> .mancha ×2 · header.acesso-topo > .marca ·
   main.acesso-grade > section.acesso-vitrine.cartao.vidro + section.acesso-cartao.cartao
   VERSÃO APROVADA (28/10/2026, exemplos/acesso.html = frontend/conta/entrar.html):
   só o cartão, de VIDRO, centrado — main.acesso-grade.so-cartao >
   section.acesso-cartao.cartao.vidro (h1 + .botao.claro.cheio.sem-seta + notas). */
.acesso { position: relative; isolation: isolate; overflow-x: hidden; min-height: 100vh; display: grid; grid-template-rows: auto 1fr; gap: 24px; padding: 28px 32px 40px; background: var(--g-painel), var(--nevoa); }
.acesso > .mancha { z-index: -1; }
.acesso > .mancha.um { width: 560px; height: 560px; left: -180px; top: 30%; opacity: .7; }
.acesso > .mancha.tres { width: 380px; height: 380px; left: 50%; top: 50%; translate: -30% -60%; background: var(--bruma-profunda); filter: blur(70px); opacity: .9; } /* luz atrás do cartão de vidro: dá o que o desfoque mostrar */
.acesso > .mancha.dois { width: 620px; height: 620px; right: -220px; top: -220px; background: var(--bruma-profunda); opacity: .55; }
/* símbolo "Caminhos" grande no canto direito do fundo, em Bruma Profunda bem suave (25%) */
.acesso > .simbolo-fundo { position: fixed; z-index: -1; right: -78vh; top: 50%; width: 220vh; height: 220vh; translate: 0 -50%; rotate: 14deg; background: var(--bruma-profunda); -webkit-mask: var(--motivo-simbolo) center / contain no-repeat; mask: var(--motivo-simbolo) center / contain no-repeat; opacity: .25; pointer-events: none; }
@media (max-width: 640px) { .acesso > .simbolo-fundo { width: 250vw; height: 250vw; right: -105vw; } }
.acesso-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; }
.acesso-topo .marca .logo { width: 156px; height: 20.6px; }
.acesso-topo .acesso-sistema .nome { grid-row: 1; } /* nome do sistema sozinho, no canto superior direito */
/* só o cartão de entrar, centrado */
.acesso-grade.so-cartao { grid-template-columns: minmax(0, 600px); justify-content: center; }
.acesso-grade.so-cartao .acesso-cartao { padding: 44px 40px; }
/* cartão de entrar em vidro V1 (rgba 255/.5, borda 255/.75, blur 24) */
.acesso-cartao.vidro { background: var(--vidro); box-shadow: 0 0 0 1px var(--vidro-borda), var(--sombra-cartao); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.acesso-cartao.vidro .nota { background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px var(--vidro-borda); }
.acesso-grade { align-self: center; justify-self: center; width: min(1180px, 100%); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.acesso-vitrine { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--r-painel); }
.acesso-vitrine .lede { font-size: 15px; line-height: 1.55; color: var(--tinta-66); max-width: 48ch; }
.acesso-simbolo { position: relative; flex: 1; min-height: 320px; overflow: hidden; padding: 0; }
.acesso-simbolo > canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.acesso-simbolo > .t-rotulo { position: absolute; left: 20px; bottom: 16px; pointer-events: none; color: rgba(255,255,255,.5); }
.acesso-vitrine .faixa-pilulas .pilula-numero { height: 46px; }
.acesso-cartao { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px 36px; border-radius: var(--r-painel); }
.acesso-cartao > * { max-width: 520px; width: 100%; }
.acesso-cartao .nota { white-space: nowrap; } /* a nota cabe numa linha só */
@media (max-width: 640px) { .acesso-cartao .nota { white-space: normal; } }
.acesso-cartao h1 { font-size: var(--t-display-2); letter-spacing: -.05em; line-height: 1; }
.acesso-cartao > p { font-size: 13.5px; line-height: 1.6; color: var(--tinta-66); max-width: 40ch; }
.acesso-cartao .botao { margin-top: 10px; }
/* .g-disco: agora em base.css (genérico, 28/10/2026) */
.acesso-cartao .nota[hidden] { display: none; }
.acesso-cartao .rodape { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--tinta-46); }
@media (max-width: 1024px) { .acesso-grade { grid-template-columns: minmax(0, 1fr); max-width: 560px; } .acesso-simbolo { min-height: 240px; } .acesso-vitrine { order: 2; } }
@media (max-width: 640px) { .acesso { padding: 20px 16px 32px; } .acesso-vitrine { padding: 18px; } .acesso-vitrine .faixa-pilulas { display: none; } .acesso-cartao { padding: 28px 22px; } .acesso-cartao h1 { font-size: 32px; } }

/* (legado) TELA DE ENTRAR do sistema anterior — vitrine Tinta + cartão; mantida
   só para exemplos/entrar.html até ela ser refeita no modelo .acesso. */
/* ============================== TELA DE ENTRAR ============================
   Subaplicação escura: vitrine Tinta com manchas Bruma e o símbolo grande;
   cartão branco à direita com Entrar com Google. Lima só como detalhe aqui. */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: var(--nevoa); }
.entrar-grade { width: min(1180px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.vitrine { position: relative; overflow: hidden; min-height: 580px; border-radius: var(--r-cartao); background: var(--tinta-fixa); color: #fff; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; }
.vitrine .mancha { filter: blur(70px); }
.vitrine > *:not(.mancha):not(.simbolo-grande) { position: relative; }
.vitrine .marca .logo { fill: #fff; width: 176px; height: 23.3px; }
.vitrine .marca .divisor { background: rgba(255,255,255,.3); height: 24px; }
.vitrine .marca .nome { color: var(--bruma); font-size: 15px; }
.vitrine h2 { font-size: 40px; line-height: 1.08; letter-spacing: -.04em; max-width: 15ch; }
.vitrine ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.vitrine li { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255,255,255,.8); }
.vitrine li .disco { width: 30px; height: 30px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: var(--bruma); }
.vitrine li svg.i { width: 15px; height: 15px; }
.vitrine .numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px; border-radius: var(--r-bloco); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vitrine .numeros span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.vitrine .numeros .num { display: block; font-size: 28px; margin-top: 4px; color: #fff; letter-spacing: -.04em; text-transform: none; }
/* Símbolo grande translúcido (Bruma → transparente; versão Lima: .simbolo-grande.lima) */
.simbolo-grande { position: absolute; right: -90px; top: 50%; width: 260px; height: 260px; transform: translateY(-50%); background: linear-gradient(135deg, rgba(211,224,234,.55), rgba(211,224,234,.08)); -webkit-mask: var(--motivo-simbolo) center / contain no-repeat; mask: var(--motivo-simbolo) center / contain no-repeat; opacity: .8; }
.simbolo-grande.lima { background: linear-gradient(135deg, rgba(227,233,53,.6), rgba(227,233,53,.06)); }
.cartao-entrar { padding: 36px; border-radius: var(--r-cartao); }
.cartao-entrar h1 { font-size: var(--t-titulo-1); margin-bottom: 24px; }
.cartao-entrar p { margin: 10px 0 24px; font-size: 13px; color: var(--tinta-66); line-height: 1.6; }
.google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px; border-radius: var(--r-pilula); border: 1px solid var(--linha-forte); background: #fff; font: 600 13.5px var(--font-body); color: var(--tinta-fixa); cursor: pointer; transition: box-shadow .2s var(--ease), border-color .2s; }
.google:hover { border-color: var(--bruma-profunda); box-shadow: var(--sombra-foco); }
.google svg { width: 18px; height: 18px; }
.rodape-entrar { margin-top: 16px; text-align: center; font-size: 11.5px; color: var(--tinta-46); }

/* Botão que abre a gaveta (só aparece abaixo de 1024px) */
.abrir-gaveta { display: none; }

/* ============================== LATERAL RECOLHIDA =========================
   Botão "Recolher" no pé da lateral (criado pelo comum.js, acima da .conta
   quando ela existe): a lateral fica só com ícones, 76px; a marca vira o símbolo. */
.lateral-pe { display: flex; gap: 4px; margin-top: 8px; }
.lateral .recolher { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 9px 14px; border: 0; border-radius: var(--r); background: none; font: 500 13.5px var(--font-body); color: var(--tinta-56); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.lateral .recolher:hover { background: rgba(255,255,255,.45); color: var(--tinta); }
.lateral .recolher .i { width: 17px; height: 17px; }
/* modo escuro: à direita do Recolher, mesmo peso visual */
.lateral .tema { width: 38px; height: 38px; flex: none; margin-left: auto; display: grid; place-items: center; border: 0; border-radius: var(--r); background: none; color: var(--tinta-56); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.lateral .tema:hover { background: rgba(255,255,255,.45); color: var(--tinta); }
.lateral .tema:focus-visible, .lateral .recolher:focus-visible { box-shadow: var(--sombra-foco); outline: 0; }
.casca { transition: grid-template-columns .2s var(--ease); }
.lateral-recolhida.casca { grid-template-columns: 76px minmax(0, 1fr); }
.lateral-recolhida .marca { grid-template-columns: 1fr; justify-items: center; padding: 12px 0 0; }
.lateral-recolhida .marca .nome { display: none; }
.lateral-recolhida .marca .logo { width: 257px; height: 34px; clip-path: inset(0 86.8% 0 0); margin-right: calc(-257px * .868); } /* só o símbolo (34px): os primeiros 74,97 de 566,95 */
.lateral-recolhida .lateral { padding: 4px 14px 24px; }
.lateral-recolhida .lateral .recolher { justify-content: center; padding: 10px 0; gap: 0; font-size: 0; }
.lateral-recolhida .lateral-pe { flex-direction: column; } /* recolhida: lua embaixo do Recolher */
.lateral-recolhida .lateral .tema { width: 100%; margin-left: 0; }
/* recolhida: só os botões de grupo (ícone), sem as páginas; grupo sem rótulo mostra os ícones das páginas */
.dica-lateral { position: fixed; z-index: 80; translate: 0 -50%; padding: 6px 10px; border-radius: 8px; background: var(--tinta); color: var(--branco); font: 500 12px/1.2 var(--font-body); white-space: nowrap; pointer-events: none; box-shadow: var(--sombra-pop); } /* nome do ícone na lateral recolhida (comum.js) */
[data-tema="escuro"] .dica-lateral { background: var(--bruma); color: var(--tinta-fixa); }
.lateral-recolhida .nav-rotulo { justify-content: center; padding: 0; font-size: 0; }
.lateral-recolhida .nav-paginas { display: none; }
.lateral-recolhida .nav-rotulo > span { gap: 0; }
.lateral-recolhida .nav-rotulo .seta { display: none; }
.lateral-recolhida .nav a { justify-content: center; gap: 0; padding: 10px 0; font-size: 0; }
.lateral-recolhida .nav a .com-icone { gap: 0; }
.lateral-recolhida .nav .contagem, .lateral-recolhida .nav-sub { display: none; }
.lateral-recolhida .conta-botao { justify-content: center; padding: 8px 0; background: none; }
.lateral-recolhida .conta-nome, .lateral-recolhida .conta-botao > .i { display: none; }
.lateral-recolhida .conta .menu-conta { position: fixed; top: auto; left: 84px; right: auto; bottom: 72px; width: 220px; } /* abre ao lado da lateral recolhida (a lateral rola e cortaria o menu) */

/* ============================== RESPONSIVO ================================
   Quebras: 1280 (indicadores e cabeçalho apertam), 1024 (lateral sai, painel
   ocupa tudo), 768 (celular), 640 (respiros menores). */
@media (max-width: 1440px) { .grade-lista-detalhe { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1280px) {
  .indicadores { grid-template-columns: repeat(2, 1fr); }
  .faixa-pilulas { flex-wrap: wrap; }
  .pilula-numero { flex: 1 1 calc(50% - 12px); }
  /* cabeçalho: título em cima, cartões de resumo lado a lado */
  .painel-cabeca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-cabeca .titulo-area { grid-column: 1 / -1; }
  .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  /* a lateral sai; a marca fica à esquerda da barra superior */
  .casca { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr); }
  .casca .marca { padding: 0 12px 0 20px; }
  .lateral .recolher { display: none; }
  /* a lateral vira gaveta da esquerda (268px, fundo escurecido); abre pelo .abrir-gaveta da barra superior (comum.js) */
  .lateral { position: fixed; z-index: 70; inset: 0 auto 0 0; width: 268px; padding: 20px 16px 24px; background: var(--nevoa); box-shadow: var(--sombra-pop); transform: translateX(-100%); transition: transform .25s var(--ease-out); }
  .gaveta-aberta .lateral { transform: none; }
  .veu-gaveta { position: fixed; z-index: 69; inset: 0; background: rgba(16,24,32,.32); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
  .gaveta-aberta .veu-gaveta { opacity: 1; pointer-events: auto; }
  .abrir-gaveta { display: grid; }
  .topo-barra { grid-column: 2; grid-row: 1; justify-content: flex-end; padding: 0 20px 0 8px; gap: 10px; }
  .topo-barra .busca { display: none; }
  .painel { grid-column: 1 / -1; grid-row: 2; border-radius: var(--r-painel) var(--r-painel) 0 0; }
  .topo::before, .lateral-recolhida .topo::before { top: 72px; left: 0; border-top-right-radius: var(--r-painel); }
  .barra-oculta .topo-barra { opacity: 1; transform: none; pointer-events: auto; }
  .barra-oculta.casca::before { display: none; }
  .barra-oculta .painel { margin-top: 0; }
  .entrar-grade { grid-template-columns: 1fr; max-width: 480px; }
  .vitrine { display: none; }
  .col-esconde { display: none; }
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .painel { padding: 24px 16px 40px; }
  .topo { margin: -24px -16px 0; padding: 24px 16px 12px; top: -24px; }
  .topo h1 { font-size: 30px; }
  .busca, .busca input { width: 100%; }
  .indicadores, .grade-3 { grid-template-columns: 1fr; }
  .painel-cabeca { grid-template-columns: minmax(0, 1fr); }
  .pilula-numero { flex: 1 1 100%; }
  .filtros { flex-wrap: wrap; }
  .cartao { padding: 18px; border-radius: var(--r-bloco); }
  .titulo-agua { font-size: 32px; }
  /* no celular, a ação translúcida da barra superior some (vire item de menu na tela de destino) */
  .topo-barra .translucido { display: none; }
}

/* ============================== MODO ESCURO ===============================
   (23/10/2026) Só o que os tokens não resolvem nas cascas: brancos em alfa da
   lateral, a mancha do painel, o título-marca-d'água e a tela de acesso. */
[data-tema="escuro"] .painel::after { background: var(--ardosia); opacity: .55; }
[data-tema="escuro"] .titulo-agua { color: rgba(245,248,251,.3); }
[data-tema="escuro"] .nav-rotulo { background: rgba(245,248,251,.04); }
[data-tema="escuro"] .nav-rotulo:hover { background: rgba(245,248,251,.09); }
[data-tema="escuro"] .nav a:hover { background: rgba(245,248,251,.06); }
[data-tema="escuro"] .nav a.ativo svg.i { color: var(--lima); } /* item ativo: o ícone acende em Lima */
[data-tema="escuro"] .nav .nav-sub a.ativo { background: rgba(245,248,251,.08); }
[data-tema="escuro"] .conta-botao { background: rgba(245,248,251,.05); }
[data-tema="escuro"] .conta-botao:hover, [data-tema="escuro"] .conta-botao[aria-expanded="true"] { background: rgba(245,248,251,.1); }
[data-tema="escuro"] .lateral .tema:hover, [data-tema="escuro"] .lateral .recolher:hover { background: rgba(245,248,251,.06); }
[data-tema="escuro"] .veu-gaveta { background: rgba(8,12,16,.6); }
/* tela de acesso: manchas e símbolo do fundo em Ardósia (Lima em alfa baixo vira oliva: evitar) */
[data-tema="escuro"] .acesso > .mancha.dois, [data-tema="escuro"] .acesso > .mancha.tres { background: var(--ardosia); }
[data-tema="escuro"] .acesso > .simbolo-fundo { background: var(--ardosia); opacity: .45; }
[data-tema="escuro"] .acesso-cartao.vidro .nota { background: rgba(245,248,251,.05); box-shadow: 0 0 0 1px var(--vidro-borda); }