/* Projeto de Estudo Lex — interface.
   Sem fonte externa, sem CDN: o app abre offline e não fala com ninguém.
   Claro e escuro pelo tema do sistema. */

:root{
  --fundo:      #f6f4f0;
  --papel:      #ffffff;
  --tinta:      #1c1a17;
  --tinta-fraca:#6b6660;
  --linha:      #e2ddd5;
  --realce:     #2f6f6b;
  --realce-cl:  #e4f0ef;
  --sombra:     0 1px 2px rgba(28,26,23,.06), 0 8px 24px rgba(28,26,23,.06);
  --raio:       10px;
  --rail:       260px;
}

@media (prefers-color-scheme: dark){
  :root{
    --fundo:      #16181a;
    --papel:      #1e2124;
    --tinta:      #ecebe8;
    --tinta-fraca:#9aa0a6;
    --linha:      #2e3338;
    --realce:     #7fd1c9;
    --realce-cl:  #22312f;
    --sombra:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}

/* Precisa vir antes de tudo: várias caixas aqui são display:flex ou grid, e
   isso venceria o atributo hidden do HTML — a cortina e o menu de cores
   apareciam sozinhos ao abrir o app. */
[hidden]{display:none !important}

html,body{height:100%}

body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font:15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------ topo */

.topo{
  display:flex; align-items:center;
  gap:22px; padding:12px 18px;
  background:var(--papel);
  border-bottom:1px solid var(--linha);
  position:sticky; top:0; z-index:40;
}

/* Chama-se nome-app, e NÃO 'marca', porque '.marca' é o retângulo colorido
   desenhado por cima da página — que é position:absolute. Com o mesmo nome, o
   nome do app herdava aquilo e ficava por baixo da primeira aba. */
.nome-app{flex:none; font-weight:650; letter-spacing:-.01em; font-size:17px}
.abas{margin-right:auto}
.acoes{flex:none; display:flex; gap:8px; align-items:center}

.botao{
  font:inherit; font-size:13.5px; font-weight:550;
  padding:7px 13px; border-radius:8px;
  border:1px solid var(--linha); background:var(--papel); color:var(--tinta);
  cursor:pointer; white-space:nowrap;
}
.botao:hover{border-color:var(--tinta-fraca)}
.botao.primario{background:var(--realce); border-color:var(--realce); color:#fff}
.botao.primario:hover{filter:brightness(1.08)}
.botao.sutil{border-color:transparent; background:transparent; color:var(--tinta-fraca)}
.botao.sutil:hover{background:var(--fundo); color:var(--tinta)}
.botao.pequeno{font-size:12px; padding:3px 8px}

/* ------------------------------------------------------------ corpo */

.corpo{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr) var(--rail);
  align-items:start;
  min-height:calc(100vh - 57px);
}

@media (max-width:1100px){
  .corpo{grid-template-columns:200px minmax(0,1fr)}
  .trilho-dir{display:none}
}

.trilho{
  position:sticky; top:57px;
  max-height:calc(100vh - 57px); overflow-y:auto;
  padding:16px 14px;
  border-right:1px solid var(--linha);
}
.trilho-dir{border-right:0; border-left:1px solid var(--linha)}

.trilho-titulo{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-fraca); margin-bottom:10px;
}

.vazio-lateral{font-size:13px; color:var(--tinta-fraca); line-height:1.5}

/* ------------------------------------------------------------ documentos */

.lista-docs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}

.lista-docs button{
  width:100%; text-align:left; font:inherit; cursor:pointer;
  background:transparent; border:0; border-radius:8px;
  padding:8px 10px; color:var(--tinta);
}
.lista-docs button:hover{background:var(--fundo)}
.lista-docs li.ativo button{background:var(--realce-cl)}

.doc-nome{display:block; font-size:13.5px; font-weight:550;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc-meta{display:block; font-size:11.5px; color:var(--tinta-fraca); margin-top:1px}

/* ------------------------------------------------------------ palco */

.palco{padding:22px 26px 120px; min-width:0}

.acolhida{max-width:520px; margin:8vh auto 0; text-align:center}
.acolhida h1{font-size:26px; letter-spacing:-.02em; margin:0 0 10px}
.acolhida p{color:var(--tinta-fraca); margin:0 0 18px}
.passos{
  text-align:left; display:inline-block; margin:0; padding-left:20px;
  color:var(--tinta-fraca); font-size:14px; line-height:1.9;
}
.passos b{color:var(--tinta)}
.miudo{font-size:12px; margin-top:24px}

.doc-topo{display:flex; gap:8px; align-items:center; margin:0 auto 18px; max-width:900px}
.doc-titulo,.doc-materia{
  font:inherit; color:var(--tinta); background:transparent;
  border:1px solid transparent; border-radius:7px; padding:5px 8px;
}
.doc-titulo{flex:1; font-size:18px; font-weight:600; letter-spacing:-.01em}
.doc-materia{width:130px; font-size:13px; color:var(--tinta-fraca)}
.doc-titulo:hover,.doc-materia:hover{border-color:var(--linha)}
.doc-titulo:focus,.doc-materia:focus{outline:0; border-color:var(--realce); background:var(--papel)}

.paginas{max-width:900px; margin:0 auto}

/* ------------------------------------------------------------ página */

.pagina{
  position:relative; margin:0 0 8px;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio); box-shadow:var(--sombra); overflow:hidden;
}
.pagina img{
  display:block; width:100%; height:auto;
  image-orientation:from-image;      /* foto de celular deitada fica em pé */
  user-select:none; -webkit-user-drag:none;
}
.camada{position:absolute; inset:0; cursor:crosshair; touch-action:none}

.marca{
  position:absolute; border-radius:3px; cursor:pointer;
  background:var(--cor); opacity:.28;
  box-shadow:inset 0 -2px 0 var(--cor);
  transition:opacity .12s;
}
.marca:hover{opacity:.42}
.marca.focada{opacity:.5}

/* No índice: a marcação pinada ganha um canto virado, como uma orelha de
   página dobrada. É o sinal de que ela subiu pro índice. */
.marca.pinada::after{
  content:""; position:absolute; right:0; top:0;
  border-width:0 9px 9px 0; border-style:solid;
  border-color:transparent var(--cor) transparent transparent;
}
/* Pergunta ainda sem resposta: contorno tracejado, porque falta fechar. */
.marca.aberta-q{outline:2px dashed var(--cor); outline-offset:1px}

.fantasma{
  position:absolute; border:2px dashed var(--realce);
  background:rgba(47,111,107,.12); border-radius:3px; pointer-events:none;
}

.num-pagina{
  position:absolute; right:8px; bottom:6px; z-index:2;
  font-size:11px; color:var(--tinta-fraca);
  background:var(--papel); border:1px solid var(--linha);
  border-radius:20px; padding:1px 8px; opacity:.85; pointer-events:none;
}

/* ------------------------------------------------------------ expansão */

/* O painel NUNCA sobrepõe a prova: ele empurra o que vem depois.
   grid-template-rows 0fr -> 1fr anima altura sem precisar saber a altura. */
.expansao{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .18s ease;
  margin:0 0 8px; border-left:3px solid var(--cor);
  background:var(--papel);
  border-radius:0 var(--raio) var(--raio) 0;
}
.expansao.on{grid-template-rows:1fr; box-shadow:var(--sombra)}
.expansao > .dentro{overflow:hidden}          /* obrigatório para o 0fr */
.expansao.on > .dentro{padding:14px 16px}

.exp-topo{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.exp-tipo{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-fraca);
}
.exp-tipo.t-pergunta{color:var(--cor)}
.exp-tipo.t-juizo{font-style:italic}
.exp-papel{
  font-size:11px; font-weight:600; color:var(--tinta-fraca);
  border-left:1px solid var(--linha); padding-left:8px;
}
.exp-espaco{flex:1}

.exp-rotulo{
  font:inherit; font-size:15px; font-weight:600; width:100%;
  border:0; border-bottom:1px solid var(--linha); background:transparent;
  color:var(--tinta); padding:3px 0 5px; margin-bottom:8px;
}
.exp-rotulo:focus{outline:0; border-bottom-color:var(--realce)}

.exp-nota{
  font:inherit; font-size:14px; line-height:1.6; width:100%; min-height:74px;
  border:1px solid var(--linha); border-radius:8px; background:var(--fundo);
  color:var(--tinta); padding:9px 11px; resize:vertical;
}
.exp-nota:focus{outline:0; border-color:var(--realce); background:var(--papel)}

.exp-pe{display:flex; gap:6px; align-items:center; margin-top:9px; flex-wrap:wrap}
.exp-pe .salvo{font-size:12px; color:var(--tinta-fraca); margin-left:auto}

/* Três botões e nunca mais: a regra das duas canetas do método, mais a cor
   reservada às obras. Não existe caminho na tela para uma quarta cor. */
.trocar-papel{display:flex; gap:5px}
.trocar-papel button{
  width:18px; height:18px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; background:var(--c);
}
.trocar-papel button.on{border-color:var(--tinta)}

/* ------------------------------------------------------------ pin */

.pin-caixa{margin-top:10px}
.pin-botao.on{color:var(--realce); font-weight:650}
.exp-linha{
  font:inherit; font-size:13.5px; width:100%; margin-top:7px;
  border:1px solid var(--linha); border-radius:7px; background:var(--fundo);
  color:var(--tinta); padding:7px 10px;
}
.exp-linha:focus{outline:0; border-color:var(--realce); background:var(--papel)}
.pin-dica{font-size:11.5px; color:var(--tinta-fraca); margin:6px 0 0; line-height:1.45}

/* ------------------------------------------------------------ o fio */

.fio{margin-top:10px}
.fio-titulo{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-fraca); margin-bottom:6px;
}
/* Cada entrada do fio carrega a data dela. É o que preserva as duas vozes:
   a pergunta de meses atrás e a resposta de hoje, lado a lado. */
.fio-item{
  border-left:2px solid var(--linha); padding:0 0 8px 10px;
  font-size:13.5px; line-height:1.5;
}
.fio-item.fecha{border-left-color:var(--cor)}
.fio-data{font-size:11px; color:var(--tinta-fraca); margin-bottom:2px}

.fio-nova{margin-top:8px}
.fio-nova textarea{
  font:inherit; font-size:13.5px; width:100%; min-height:60px;
  border:1px solid var(--realce); border-radius:8px; background:var(--papel);
  color:var(--tinta); padding:8px 10px; resize:vertical;
}
.fio-nova textarea:focus{outline:0}
.fecha-check{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--tinta-fraca); margin:7px 0;
}

/* ------------------------------------------------------------ abas */

.abas{display:flex; gap:2px}
.aba{
  font:inherit; font-size:13px; font-weight:550; cursor:pointer;
  border:0; background:transparent; color:var(--tinta-fraca);
  padding:6px 11px; border-radius:8px;
  display:inline-flex; align-items:center; gap:6px;
}
.aba:hover{background:var(--fundo); color:var(--tinta)}
.aba.on{background:var(--realce-cl); color:var(--tinta)}
.bolha{
  min-width:17px; height:17px; padding:0 5px; border-radius:9px;
  background:var(--realce); color:#fff;
  font-size:10.5px; font-weight:700; line-height:17px; text-align:center;
}

/* ------------------------------------------------------------ paletas */

.paletas{
  position:fixed; right:18px; top:56px; z-index:50;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio); box-shadow:var(--sombra); padding:6px;
  display:flex; flex-direction:column; gap:2px; min-width:190px;
}
.opcao-paleta{
  display:flex; align-items:center; gap:10px; width:100%;
  font:inherit; font-size:13px; cursor:pointer; text-align:left;
  border:0; background:transparent; color:var(--tinta);
  padding:7px 9px; border-radius:8px;
}
.opcao-paleta:hover{background:var(--fundo)}
.opcao-paleta.on{background:var(--realce-cl)}
.amostras{display:flex; gap:3px}
.amostras i{width:13px; height:13px; border-radius:50%; display:block}

/* ------------------------------------------------------------ trilhas */

.trilha{margin-bottom:16px}
.trilha-nome{
  font-size:11px; font-weight:600; color:var(--tinta-fraca);
  margin:0 0 5px 10px; letter-spacing:.02em;
}

/* ------------------------------------------------------------ índice */

.vista{min-width:0}

.indice-topo{max-width:760px; margin:0 auto 14px}
.indice-topo h2{font-size:20px; letter-spacing:-.01em; margin:0 0 4px}
.indice-topo .miudo{margin:0 0 12px}

.contagem{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px}
.conta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--tinta-fraca);
}
.conta i{width:9px; height:9px; border-radius:50%; display:block}
.aviso-equilibrio.quebrado{color:var(--tinta); font-weight:600}

.indice-lista{
  list-style:none; margin:0 auto; padding:0; max-width:760px;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio); box-shadow:var(--sombra); overflow:hidden;
}
.indice-item{
  display:flex; align-items:baseline; gap:10px; cursor:pointer;
  padding:9px 14px; border-bottom:1px solid var(--linha);
  border-left:3px solid var(--cor);
}
.indice-item:last-child{border-bottom:0}
.indice-item:hover{background:var(--fundo)}
.indice-pagina{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; color:var(--tinta-fraca); flex:none; min-width:44px;
}
.indice-linha{flex:1; font-size:14px; line-height:1.45}
/* Obras e autores em cor distinta, para o olho achar batendo — é exatamente o
   uso que o método dá à terceira caneta. */
.indice-item.obra .indice-linha{color:var(--cor); font-weight:550}
.indice-q{color:var(--cor); font-weight:700}
.indice-fio{font-size:11px; color:var(--tinta-fraca)}

#btn-copiar-indice{display:block; margin:14px auto 0}

/* ------------------------------------------------------------ dica */

/* A caixinha que explica o botão. Aparece na hora, sem o atraso de um segundo
   e meio do title= do navegador, e responde também ao teclado. */
.dica{
  position:fixed; z-index:100; max-width:270px;
  background:var(--tinta); color:var(--fundo);
  font-size:12.5px; line-height:1.45;
  padding:7px 11px; border-radius:8px;
  box-shadow:var(--sombra); pointer-events:none;
}

/* ------------------------------------------------------------ manual */

.guia{max-width:640px; margin:0 auto; padding-bottom:40px}

/* O "o que isso é", antes do "como se usa". */
.guia h1{font-size:27px; line-height:1.25; letter-spacing:-.02em; margin:0 0 16px}
.guia h1 + div p{font-size:15.5px; line-height:1.65; margin:0 0 14px}

/* Só o subtítulo do topo é caixa alta. O > impede que os títulos numerados
   dos blocos, que também são h3, herdem isso. */
.guia > h3{font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--tinta-fraca); margin:26px 0 10px}
.guia-ajuda{margin:0 0 40px; padding-left:20px}
.guia-ajuda li{
  font-size:14.5px; line-height:1.6; color:var(--tinta-fraca); margin-bottom:8px;
}

.guia h2{
  font-size:23px; letter-spacing:-.015em; margin:0 0 6px;
  padding-top:26px; border-top:1px solid var(--linha);
}
.guia .miudo{margin:0 0 26px}

.guia-bloco{margin-bottom:22px}
.guia-bloco h3{
  font-size:15px; font-weight:650; margin:0 0 5px; letter-spacing:-.005em;
}
.guia-bloco p{margin:0; color:var(--tinta-fraca); line-height:1.6; font-size:14.5px}

.guia-fim{
  margin:30px 0 18px; padding-top:18px;
  border-top:1px solid var(--linha);
  font-size:14px; color:var(--tinta-fraca);
}

/* ------------------------------------------------------------ livro */

.livro{max-width:760px; margin:0 auto}
.livro .miudo{margin:0 0 14px}

.livro-lancar{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio); padding:10px; margin-bottom:16px;
}
.livro-pagina{width:78px}
.livro-linha{flex:1; min-width:220px}
.livro-pagina,.livro-linha{
  font:inherit; font-size:14px; color:var(--tinta);
  border:1px solid var(--linha); border-radius:7px;
  background:var(--fundo); padding:7px 10px;
}
.livro-pagina:focus,.livro-linha:focus{
  outline:0; border-color:var(--realce); background:var(--papel);
}
.livro-cores{display:flex; gap:5px}
.livro-cores button{
  width:20px; height:20px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; background:var(--c);
}
.livro-cores button.on{border-color:var(--tinta)}

.livro .indice-lista{margin-bottom:14px}
.livro .expansao{margin:0; border-radius:0}

/* ------------------------------------------------------------ perguntas */

#vista-perguntas h2{font-size:20px; letter-spacing:-.01em; margin:0 auto 14px; max-width:760px}
.perguntas-lista{list-style:none; margin:0 auto; padding:0; max-width:760px;
  display:flex; flex-direction:column; gap:10px}
.perguntas-lista li{
  background:var(--papel); border:1px solid var(--linha);
  border-left:3px solid var(--cor); border-radius:0 var(--raio) var(--raio) 0;
  padding:12px 14px;
}
.p-topo{display:flex; gap:10px; align-items:baseline; margin-bottom:8px}
.p-onde{font-size:12px; color:var(--tinta-fraca); flex:1}
.p-tempo{font-size:12px; color:var(--cor); font-weight:600}
.p-voz{margin-bottom:9px; font-size:14px; line-height:1.5}
.p-quem{
  display:block; font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tinta-fraca); margin-bottom:3px;
}

/* A flag escolhida diz que esta marcação subiu para o índice. */
.marca-flag{color:var(--cor); font-weight:700; margin-left:6px; font-size:12px}

.indice-flag{
  flex:none; min-width:22px; color:var(--cor); font-weight:700;
  font-size:13px; text-align:center;
}

.menu-titulo{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-fraca); padding:9px 9px 4px;
}
.menu-titulo:first-child{padding-top:4px}

.amostras-flag{
  display:inline-flex; gap:4px; min-width:46px;
  font-size:13px; font-weight:700; color:var(--tinta-fraca);
}

.antes{
  margin-top:12px; border-top:1px solid var(--linha); padding-top:10px;
}
.antes-titulo{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-fraca); margin-bottom:6px;
}
.antes-item{font-size:13px; color:var(--tinta-fraca); margin-bottom:5px; line-height:1.45}
.antes-item b{color:var(--tinta); font-weight:550}
.antes-onde{font-size:11.5px; opacity:.8}

.ia-off{
  margin-top:10px; font-size:12px; color:var(--tinta-fraca);
  background:var(--fundo); border:1px dashed var(--linha);
  border-radius:8px; padding:7px 10px;
}

/* ------------------------------------------------------------ paleta */

.paleta{
  position:fixed; z-index:60; display:flex; gap:6px; padding:7px;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:999px; box-shadow:var(--sombra);
}
.paleta button{
  width:26px; height:26px; border-radius:50%; border:0; cursor:pointer;
  background:var(--c); position:relative;
}
.paleta button:hover{transform:scale(1.12)}
.paleta button::after{
  content:attr(data-nome); position:absolute; left:50%; top:calc(100% + 7px);
  transform:translateX(-50%); white-space:nowrap; font-size:11px;
  background:var(--tinta); color:var(--papel); padding:2px 7px; border-radius:5px;
  opacity:0; pointer-events:none; transition:opacity .12s;
}
.paleta button:hover::after{opacity:1}

/* ------------------------------------------------------------ lista de marcações */

.filtros{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px}
.filtros button{
  font:inherit; font-size:11.5px; cursor:pointer;
  border:1px solid var(--linha); background:transparent; color:var(--tinta-fraca);
  border-radius:999px; padding:3px 9px 3px 6px;
  display:inline-flex; align-items:center; gap:5px;
}
.filtros button::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--c, transparent);
}
.filtros button.on{border-color:var(--tinta); color:var(--tinta)}

.lista-marcas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.lista-marcas li{
  border-left:3px solid var(--cor); border-radius:0 7px 7px 0;
  background:var(--papel); padding:7px 9px; cursor:pointer;
}
.lista-marcas li:hover{box-shadow:var(--sombra)}
.marca-rotulo{font-size:13px; font-weight:600; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.marca-nota{font-size:12px; color:var(--tinta-fraca); margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.marca-onde{font-size:11px; color:var(--tinta-fraca); opacity:.8; margin-top:3px}

/* ------------------------------------------------------------ avisos */

.aviso{
  padding:9px 18px; font-size:13px;
  background:var(--realce-cl); color:var(--tinta);
  border-bottom:1px solid var(--linha);
}
.aviso code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; background:var(--papel); padding:1px 6px; border-radius:5px;
  border:1px solid var(--linha);
}

.cortina{
  position:fixed; inset:0; z-index:80;
  background:rgba(47,111,107,.16); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
}
.cortina div{
  background:var(--papel); border:2px dashed var(--realce);
  border-radius:16px; padding:26px 40px; font-size:17px; font-weight:600;
}

.recado{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:90;
  background:var(--tinta); color:var(--fundo);
  padding:9px 16px; border-radius:999px; font-size:13px; box-shadow:var(--sombra);
}

/* ---------------------------------------------------------------- entrada

   A cortina de entrada. Cobre tudo, porque enquanto ninguem entrou nao ha
   nada por baixo que faca sentido mostrar. */

.entrada {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papel, #F6F3ED);
  padding: 24px;
}

.entrada-caixa {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entrada-caixa h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.01em;
}

.entrada-assinatura {
  margin: 0 0 20px;
  opacity: 0.62;
  font-size: 14px;
}

.entrada-caixa label {
  font-size: 13px;
  opacity: 0.72;
  margin-top: 10px;
}

.entrada-caixa input {
  font: inherit;
  font-size: 16px;             /* 16px ou o Safari do iPhone da zoom ao focar */
  padding: 10px 12px;
  border: 1px solid var(--linha, #E3DDD1);
  border-radius: 8px;
  background: #fff;
}

.entrada-caixa input:focus {
  outline: 2px solid var(--tinta, #14130F);
  outline-offset: 1px;
}

.entrada-caixa button {
  font: inherit;
  margin-top: 20px;
  padding: 11px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--tinta, #14130F);
  color: var(--papel, #F6F3ED);
  cursor: pointer;
}

.entrada-caixa button[disabled] { opacity: 0.55; cursor: default; }

.entrada-erro {
  margin: 12px 0 0;
  font-size: 14px;
  color: #C0472F;
}

/* O caminho para a tela de contas. Discreto: quem administra sabe que existe,
   e quem estuda nao precisa que isto dispute atencao com o material. */
.link-contas {
  margin-left: 14px;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  opacity: .55;
  white-space: nowrap;
}
.link-contas:hover { opacity: 1; }