/* Componentes. `.bloco__elemento--modificador`, tudo em português.
 *
 * Elevação é hairline de 1px + --papel-1 sobre --papel-0. `box-shadow` está
 * fora do sistema: sombra sobre papel morno suja.
 */

/* ------------------------------------------------------------------ cartão */

.cartao {
  background: var(--papel-1);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
  padding: var(--esp-5);
}

.lista { display: flex; flex-direction: column; gap: var(--esp-4); }

/* ------------------------------------------------- cartão de pessoa (Hoje) */

.pessoa {
  display: flex; align-items: center; gap: var(--esp-4);
  background: var(--papel-1);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
  overflow: hidden;
}

.pessoa__corpo {
  flex: 1; min-width: 0;
  padding: var(--esp-5) 0 var(--esp-5) var(--esp-5);
  min-height: 96px;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--esp-2);
}
.pessoa__corpo:active { background: var(--papel-2); }

.pessoa__nome {
  font-family: var(--fonte-serif);
  font-size: var(--t-500);
  line-height: var(--lh-titulo);
  color: var(--tinta-1);
  overflow-wrap: anywhere;
}

.pessoa__nota {
  font-size: var(--t-200);
  color: var(--tinta-2);
  display: flex; align-items: baseline; gap: 0 var(--esp-3);
  min-width: 0;
}
/* O texto do pedido cabe numa linha e corta com reticências; o "há 2 dias"
 * nunca é espremido, porque é a informação que faz a lista se reordenar.
 *
 * O `flex-basis: 55%` dá um piso ao pedido: sem ele, um "há quanto tempo"
 * comprido tomava a linha inteira e sobrava "O e..." do pedido — que é pior
 * que não mostrar pedido nenhum. */
.pessoa__nota > :first-child {
  flex: 1 1 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pessoa__nota > :last-child {
  flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* O alvo mais tocado do app inteiro. 64px, e a área clicável passa dos 64
 * porque o padding do pai também recebe o toque. */
.pessoa__check {
  width: var(--check); height: var(--check);
  flex-shrink: 0;
  margin-right: var(--esp-5);
  border-radius: var(--raio-cheio);
  border: 2px solid var(--linha-2);
  background: var(--papel-1);
  display: grid; place-items: center;
  color: transparent;
  font-size: 30px; line-height: 1;
  transition: background var(--dur-3) var(--saida),
              border-color var(--dur-3) var(--saida),
              transform var(--dur-2) var(--saida);
}
.pessoa__check:active { transform: scale(0.92); }

.pessoa__check--feito {
  background: var(--recebido);
  border-color: var(--recebido);
  color: #FFF;
  animation: brotar var(--dur-3) var(--saida);
}

@keyframes brotar {
  from { transform: scale(0.9); }
  to   { transform: scale(1); }
}

.pessoa--feita .pessoa__nome { color: var(--tinta-2); }

/* --------------------------------------------------------- seção recolhida */

.recolhivel { margin-top: var(--esp-6); }

.recolhivel__botao {
  width: 100%; min-height: var(--toque-min);
  display: flex; align-items: center; gap: var(--esp-3);
  color: var(--tinta-2); font-size: var(--t-200);
  padding: var(--esp-3) var(--esp-2);
  border-radius: var(--raio-1);
}
.recolhivel__botao:active { background: var(--papel-2); }
.recolhivel__seta { transition: transform var(--dur-2) var(--saida); }
.recolhivel[open] .recolhivel__seta { transform: rotate(90deg); }
.recolhivel__conteudo { padding-top: var(--esp-4); }

/* ------------------------------------------------------------------ botões */

.botao {
  display: flex; align-items: center; justify-content: center;
  gap: var(--esp-3);
  min-height: var(--botao-alto);
  width: 100%;
  padding: 0 var(--esp-5);
  border-radius: var(--raio-1);
  font-size: var(--t-400);
  font-weight: 500;
  transition: background var(--dur-1) var(--saida),
              transform var(--dur-1) var(--saida);
}
.botao:active { transform: scale(0.985); }

.botao--principal { background: var(--ancora); color: #FFF; }
.botao--principal:active { background: var(--ancora-alto); }

.botao--secundario {
  background: var(--papel-1);
  color: var(--tinta-1);
  border: 1px solid var(--linha-2);
}
.botao--secundario:active { background: var(--papel-2); }

.botao--discreto {
  background: none; color: var(--ancora);
  min-height: var(--toque-min); font-size: var(--t-300);
}

/* O único vermelho do app, e ele só existe dentro de uma confirmação. */
.botao--destrutivo { background: var(--destrutivo); color: #FFF; }

.botao--menor { min-height: var(--toque-min); font-size: var(--t-300); }

/* A ação de sessão, no pé da lista. NÃO é sticky.
 *
 * A primeira versão flutuava fixa sobre o conteúdo, e o resultado era um
 * cartão de pessoa permanentemente cortado ao meio pela barra — a tela parecia
 * quebrada. E o toque que importa nesta tela não é este botão: é o círculo de
 * cada cartão, que já está sempre à mão. Um botão secundário não tem direito a
 * 90px permanentes de uma tela de celular. */
.rodape-acao {
  margin-top: var(--esp-7);
  padding-bottom: var(--esp-4);
}

/* ---------------------------------------------------------- cartão de aviso */

.aviso {
  display: flex; align-items: center; gap: var(--esp-4);
  min-height: 72px;
  width: 100%;
  padding: var(--esp-4) var(--esp-5);
  background: var(--atencao-tenue);
  border: 1px solid var(--atencao);
  border-radius: var(--raio-2);
  color: var(--tinta-1);
  margin-bottom: var(--esp-6);
}
.aviso__texto { flex: 1; font-size: var(--t-300); }
.aviso__conta {
  font-family: var(--fonte-mono); font-weight: 500;
  color: var(--atencao);
}
.aviso svg, .abas svg, .linha__seta svg { display: block; }

/* ------------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-cheio);
  font-size: var(--t-100); font-weight: 500;
  background: var(--papel-2); color: var(--tinta-2);
}
.chip--ativo      { background: var(--ancora-tenue);   color: var(--ancora); }
.chip--respondido { background: var(--recebido-tenue); color: var(--recebido); }
.chip--vencido    { background: var(--atencao-tenue);  color: var(--atencao); }

/* -------------------------------------------------------------- cronômetro */

.orando {
  flex: 1;
  display: flex; flex-direction: column;
  padding: var(--esp-6) var(--esp-5) var(--esp-5);
  overflow-y: auto;
}

.orando__nome {
  font-family: var(--fonte-serif);
  font-size: var(--t-600);
  line-height: var(--lh-titulo);
  text-align: center;
}

.orando__pedidos {
  margin-top: var(--esp-6);
  display: flex; flex-direction: column; gap: var(--esp-4);
}

.orando__pedido {
  font-family: var(--fonte-serif);
  font-size: var(--t-300);
  color: var(--tinta-2);
  line-height: var(--lh-corpo);
  text-align: center;
  padding: 0 var(--esp-3);
}

.orando__relogio {
  flex: 1;
  display: grid; place-items: center;
  min-height: 140px;
  padding: var(--esp-7) 0;
}

.relogio {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: var(--t-800);
  letter-spacing: var(--tr-numero);
  color: var(--ancora);
  line-height: 1;
}
.relogio--pausado { color: var(--tinta-3); }

.orando__acoes { display: flex; flex-direction: column; gap: var(--esp-4); }

.confirmacao {
  text-align: center;
  color: var(--recebido);
  font-size: var(--t-400);
  padding: var(--esp-6) 0;
}

/* ------------------------------------------------------------ linha simples */

.linha {
  display: flex; align-items: center; gap: var(--esp-4);
  width: 100%;
  min-height: 72px;
  padding: var(--esp-4) var(--esp-5);
  background: var(--papel-1);
  border: 1px solid var(--linha-1);
  border-radius: var(--raio-2);
}
.linha:active { background: var(--papel-2); }
.linha__corpo { flex: 1; min-width: 0; }
/* `display: block` porque os dois são <span>: em linha, "Ana Clara" e
 * "há 2 dias" colavam num só borrão ("Ana Clarahá 2 dias"). */
.linha__titulo {
  display: block;
  font-family: var(--fonte-serif); font-size: var(--t-400);
  line-height: var(--lh-titulo);
  overflow-wrap: anywhere;
}
.linha__nota {
  display: block;
  font-size: var(--t-200); color: var(--tinta-2); margin-top: 2px;
}
.linha__seta { color: var(--tinta-3); font-size: var(--t-400); }

/* ------------------------------------------------------------------- folha
 * Cobre a tela inteira. Uma folha NUNCA abre outra folha: a navegação tem dois
 * níveis e nenhum a mais, porque o terceiro é onde as pessoas se perdem.
 */
.folha {
  position: fixed; inset: 0; z-index: 30;
  background: var(--papel-0);
  display: flex; flex-direction: column;
  animation: subir var(--dur-3) var(--saida);
}

@keyframes subir { from { transform: translateY(2%); opacity: 0; } }

.folha__topo {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  padding-top: max(var(--esp-3), env(safe-area-inset-top));
  border-bottom: 1px solid var(--linha-1);
  background: var(--papel-1);
}
.folha__voltar {
  min-height: var(--toque-min); min-width: var(--toque-min);
  display: flex; align-items: center; gap: var(--esp-2);
  padding: 0 var(--esp-3);
  color: var(--ancora); font-size: var(--t-300);
  border-radius: var(--raio-1);
}
.folha__titulo { flex: 1; font-size: var(--t-400); font-weight: 500; }
.folha__corpo {
  flex: 1; overflow-y: auto;
  padding: var(--esp-5) var(--esp-5) var(--esp-8);
  padding-bottom: max(var(--esp-8), env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------- formulários */

.campo { display: block; margin-bottom: var(--esp-6); }
.campo__rotulo {
  display: block; margin-bottom: var(--esp-3);
  font-size: var(--t-300); font-weight: 500;
}
.campo__dica {
  display: block; margin-top: var(--esp-2);
  font-size: var(--t-200); color: var(--tinta-2);
}
.campo__entrada, .campo__area {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--esp-4);
  background: var(--papel-1);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-1);
  font-size: var(--t-200);
}
.campo__area { min-height: 140px; resize: vertical; line-height: var(--lh-corpo); }
.campo__entrada:focus, .campo__area:focus {
  border-color: var(--ancora); outline-offset: 0;
}

.escolhas { display: flex; flex-direction: column; gap: var(--esp-3); }

.escolha {
  display: flex; align-items: center; gap: var(--esp-4);
  min-height: var(--toque-min);
  padding: var(--esp-4);
  background: var(--papel-1);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-1);
  font-size: var(--t-300);
}
.escolha--marcada {
  border-color: var(--ancora); background: var(--ancora-tenue);
  color: var(--ancora); font-weight: 500;
}
.escolha__marca {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--raio-cheio);
  border: 2px solid var(--linha-2);
  display: grid; place-items: center; color: transparent;
  font-size: 15px;
}
.escolha--marcada .escolha__marca {
  border-color: var(--ancora); background: var(--ancora); color: #FFF;
}

/* ------------------------------------------------------ faixa de estado */

.faixa {
  padding: var(--esp-2) var(--esp-5);
  font-size: var(--t-100);
  color: var(--tinta-3);
  background: var(--papel-0);
  border-bottom: 1px solid var(--linha-1);
  display: flex; align-items: center; gap: var(--esp-3);
  /* 44px, não 28: esta faixa é o caminho permanente até a única configuração
   * do app, e um alvo de 28px não se acerta com o polegar. */
  min-height: 44px;
  width: 100%;
  text-align: left;
}
.faixa--atencao { color: var(--atencao); font-weight: 500; }
.faixa__ponto {
  width: 7px; height: 7px; border-radius: var(--raio-cheio);
  background: currentColor; flex-shrink: 0; opacity: 0.7;
}

/* --------------------------------------------------------------- números */

.numeros { display: flex; flex-direction: column; gap: var(--esp-6); }
.numero__valor {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: var(--t-700);
  letter-spacing: var(--tr-numero);
  line-height: var(--lh-apertada);
}
.numero__rotulo { color: var(--tinta-2); font-size: var(--t-200); margin-top: var(--esp-2); }

/* O gráfico: sete barras em SVG à mão. Nenhuma biblioteca. */
.grafico { width: 100%; height: 132px; display: block; }
.grafico__barra { fill: var(--ancora); }
.grafico__barra--vazia { fill: var(--linha-1); }
.grafico__rotulo { fill: var(--tinta-3); font-size: 11px; font-family: var(--fonte-mono); }

/* ------------------------------------------------------------------- vazio
 * O estado vazio é a primeira tela que ele vai ver. Ela não pode parecer erro.
 */
.vazio {
  text-align: center;
  padding: var(--esp-8) var(--esp-5);
  color: var(--tinta-2);
}
.vazio__titulo {
  font-family: var(--fonte-serif); font-size: var(--t-500);
  color: var(--tinta-1); margin-bottom: var(--esp-4);
}
.vazio__texto { font-size: var(--t-300); line-height: var(--lh-corpo); }

/* --------------------------------------------------------------- diálogo */

.dialogo {
  position: fixed; inset: 0; z-index: 40;
  background: color-mix(in srgb, var(--tinta-1) 45%, transparent);
  display: flex; align-items: flex-end;
}
.dialogo__caixa {
  width: 100%;
  background: var(--papel-1);
  border-radius: var(--raio-2) var(--raio-2) 0 0;
  padding: var(--esp-6) var(--esp-5);
  padding-bottom: max(var(--esp-6), env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--esp-4);
  animation: subir var(--dur-3) var(--saida);
}
.dialogo__titulo { font-size: var(--t-400); font-weight: 500; }
.dialogo__texto { color: var(--tinta-2); font-size: var(--t-300); }

/* ------------------------------------------------------- prosa e ações
 *
 * Tudo daqui para baixo existe porque a CSP do `web/_headers` NÃO tem
 * `'unsafe-inline'`, e `style-src 'self'` bloqueia também o atributo
 * `style="..."`, não só a tag `<style>`. Isso não apareceu em
 * desenvolvimento — o servidor local não manda cabeçalho nenhum — e só
 * estourou no domínio publicado, com seis violações e o layout quebrado
 * nos pontos afetados.
 *
 * `el()` agora recusa a chave `style` para que a lição não se perca.
 */

/* Parágrafo explicativo dentro de uma folha. */
.prosa {
  font-size: var(--t-300);
  line-height: var(--lh-corpo);
  color: var(--tinta-2);
}
.prosa--tinta { color: var(--tinta-1); }

/* O texto de um pedido lido fora da tela de orar: alinhado à esquerda,
 * porque ali ele é conteúdo de leitura, não invocação centralizada. */
.texto-do-pedido {
  font-family: var(--fonte-serif);
  font-size: var(--t-300);
  line-height: var(--lh-corpo);
  color: var(--tinta-2);
}

/* Pilha de botões. O gap substitui as margens que antes iam inline. */
.acoes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}
.acoes--folgada { gap: var(--esp-4); margin-top: var(--esp-6); }
.acoes--solta   { gap: var(--esp-4); margin-top: var(--esp-7); }

/* Os sete dias da semana, em linha e quebrando. */
.dias-da-semana {
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: var(--esp-4);
}
.dias-da-semana .escolha { flex: 0 0 auto; min-width: 72px; }

/* ------------------------------------------------------------- espaços
 * Um punhado de utilitárias de espaçamento, e só de espaçamento. Elas
 * existem porque a alternativa seria inventar um nome de componente para
 * cada margem de 12px — o que tornaria `componentes.css` ilegível sem
 * ganhar nada.
 */
.m-topo-3 { margin-top: var(--esp-4); }
.m-topo-4 { margin-top: var(--esp-5); }
.m-topo-5 { margin-top: var(--esp-6); }
.m-topo-6 { margin-top: var(--esp-7); }
.m-base-2 { margin-bottom: var(--esp-3); }
.m-base-3 { margin-bottom: var(--esp-4); }
.m-base-4 { margin-bottom: var(--esp-5); }
.m-base-5 { margin-bottom: var(--esp-6); }
.cresce   { flex: 1; }
.m-topo-2 { margin-top: var(--esp-3); }

/* Respiro entre dois botões que não estão dentro de uma `.acoes`. */
.separador { height: var(--esp-4); }

/* O nome grande, alinhado à esquerda: no topo da tela de uma pessoa ele é
 * título de página, não invocação centralizada. */
.orando__nome--esquerda { text-align: left; }

/* Número que acompanha, em vez de liderar (a duração no histórico). */
.num--secundario { color: var(--tinta-2); }

/* A faixa é status À ESQUERDA e destino À DIREITA. A primeira versão era só o
 * status, clicável e sem nenhuma pista disso — e como o outro caminho para os
 * Ajustes era um link de texto miúdo, o usuário não achou onde colar a senha
 * do aplicativo. Afordância invisível não existe. */
.faixa__estado {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.faixa__ir {
  display: flex; align-items: center; gap: var(--esp-2);
  flex: 0 0 auto;
  color: var(--ancora);
  font-weight: 500;
}
.faixa--atencao .faixa__ir { color: inherit; }
.faixa:active { background: var(--papel-2); }

/* Ícone à esquerda numa linha de lista. */
.linha__icone {
  flex: 0 0 auto;
  color: var(--tinta-3);
  display: block;
}

/* Passos numerados. Aparecem abertos, nunca dentro de um recolhível: são a
 * única configuração do app, feitas uma vez na vida por alguém que não mexe
 * com GitHub. Esconder repetiria o erro que fez a tela de Ajustes não ser
 * encontrada na primeira vez. */
.passos {
  list-style: none;
  counter-reset: passo;
  display: flex; flex-direction: column; gap: var(--esp-4);
  margin: 0; padding: 0;
}
.passos li {
  counter-increment: passo;
  position: relative;
  padding-left: 40px;
  font-size: var(--t-200);
  line-height: var(--lh-corpo);
  color: var(--tinta-2);
}
.passos li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px;
  border-radius: var(--raio-cheio);
  background: var(--ancora-tenue);
  color: var(--ancora);
  font-family: var(--fonte-mono); font-size: var(--t-100); font-weight: 500;
  display: grid; place-items: center;
}
.passos strong {
  color: var(--tinta-1);
  font-weight: 500;
  overflow-wrap: anywhere;
}