/* Diário Plaud — celular primeiro. Sem framework, sem fonte externa. */

:root {
  --fundo: #ffffff;
  --fundo-2: #f6f7f9;
  --fundo-3: #eceef2;
  --texto: #1a1d23;
  --texto-2: #5b6472;
  --borda: #dfe3ea;
  --acento: #1f6feb;
  --acento-suave: #dbeafe;
  --marca: #fff3cd;
  --sensivel: #b45309;
  --raio: 10px;
  --largura: 62rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1115;
    --fundo-2: #161a21;
    --fundo-3: #1e242e;
    --texto: #e6e9ef;
    --texto-2: #98a1b0;
    --borda: #2a313d;
    --acento: #6ea8ff;
    --acento-suave: #16293f;
    --marca: #4a3b0a;
    --sensivel: #f0b429;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- topo */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0));
}
.marca { font-weight: 700; font-size: 1.05rem; color: var(--texto); }
.menu {
  display: flex; gap: .25rem; margin-top: .5rem;
  overflow-x: auto; scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  flex: 0 0 auto;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--fundo-2);
  color: var(--texto-2);
  font-size: .88rem;
  white-space: nowrap;
}
.menu a.ativo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }

main { max-width: var(--largura); margin: 0 auto; padding: 1rem 1rem 4rem; }

.rodape {
  max-width: var(--largura); margin: 0 auto;
  padding: 0 1rem 2rem;
  color: var(--texto-2); font-size: .8rem;
}

/* ---------------------------------------------------------------- busca */
.busca-caixa { position: relative; margin-bottom: .75rem; }
#q {
  width: 100%; padding: .8rem 1rem; font-size: 1.05rem;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo-2); color: var(--texto);
}
#q:focus { outline: 2px solid var(--acento); border-color: transparent; }

.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.filtros select, .filtros input[type=month] {
  padding: .45rem .55rem; font-size: .85rem;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--fundo-2); color: var(--texto);
  max-width: 100%;
}
.limpar {
  padding: .45rem .7rem; font-size: .85rem; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 8px;
  background: none; color: var(--texto-2);
}

.aviso-expansao {
  background: var(--acento-suave); color: var(--texto);
  border-radius: 8px; padding: .5rem .7rem;
  font-size: .84rem; margin-bottom: .8rem;
}

.contagem { color: var(--texto-2); font-size: .85rem; margin: .2rem 0 .8rem; }

/* ---------------------------------------------------------------- cartões */
.cartao {
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: .8rem .9rem; margin-bottom: .6rem; background: var(--fundo-2);
}
.cartao h3 { margin: 0 0 .3rem; font-size: 1rem; line-height: 1.35; }
.cartao h3 a { color: var(--texto); }
.meta { color: var(--texto-2); font-size: .8rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.trecho { margin: .5rem 0 0; font-size: .92rem; color: var(--texto); }
.trecho .hora { color: var(--texto-2); font-variant-numeric: tabular-nums; }

mark { background: var(--marca); color: inherit; padding: 0 .1em; border-radius: 3px; }

.tag {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  background: var(--fundo-3); color: var(--texto-2); font-size: .75rem;
}
.tag.sensivel { background: transparent; color: var(--sensivel); border: 1px solid currentColor; }
.tag.inferido { border: 1px dashed var(--borda); background: none; }

/* ---------------------------------------------------------------- conteúdo */
.conteudo h1 { font-size: 1.5rem; line-height: 1.25; margin: .2rem 0 .8rem; }
.conteudo h2 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; padding-top: .6rem; border-top: 1px solid var(--borda); }
.conteudo h3 { font-size: 1.02rem; margin: 1.2rem 0 .4rem; }
.conteudo p { margin: .6rem 0; }
.conteudo ul, .conteudo ol { padding-left: 1.2rem; }
.conteudo li { margin: .25rem 0; }
.conteudo code {
  background: var(--fundo-3); padding: .1rem .35rem;
  border-radius: 5px; font-size: .88em;
}
.conteudo blockquote {
  margin: .8rem 0; padding: .5rem .9rem;
  border-left: 3px solid var(--acento); background: var(--fundo-2);
  color: var(--texto);
}
.conteudo blockquote p { margin: .3rem 0; }
.conteudo hr { border: 0; border-top: 1px solid var(--borda); margin: 1.4rem 0; }

.tabela-rolagem { overflow-x: auto; margin: .8rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { border: 1px solid var(--borda); padding: .4rem .55rem; text-align: left; vertical-align: top; }
th { background: var(--fundo-3); font-weight: 600; }

/* ---------------------------------------------------------------- gravação */
.cabecalho-grav { margin-bottom: 1rem; }
.cabecalho-grav h1 { font-size: 1.35rem; margin: 0 0 .4rem; }

.transcricao { margin-top: 1rem; }
.transcricao details > summary {
  cursor: pointer; padding: .6rem .8rem;
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: var(--raio); font-weight: 600;
}
.fala { margin: .7rem 0; }
.fala .hora {
  color: var(--texto-2); font-size: .78rem;
  font-variant-numeric: tabular-nums; margin-right: .4rem;
}

.irmaos { background: var(--acento-suave); border-radius: var(--raio); padding: .7rem .9rem; margin: 1rem 0; }
.irmaos h4 { margin: 0 0 .4rem; font-size: .9rem; }
.irmaos ol { margin: 0; padding-left: 1.1rem; font-size: .9rem; }

/* ---------------------------------------------------------------- listas */
.grade { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 42rem) { .grade { grid-template-columns: 1fr 1fr; } }

.mes-titulo {
  position: sticky; top: 5.4rem; z-index: 5;
  background: var(--fundo); padding: .5rem 0 .3rem;
  font-size: 1.05rem; border-bottom: 1px solid var(--borda); margin-top: 1.2rem;
}

.carregando { color: var(--texto-2); }
.vazio { color: var(--texto-2); padding: 2rem 0; text-align: center; }

.barra-progresso {
  height: 3px; background: var(--acento); width: 0;
  position: fixed; top: 0; left: 0; z-index: 50;
  transition: width .25s ease;
}