/* KIMBLE — estilo.css
   Toda a aparência do aplicativo. Mexa aqui para cores, fontes e leiaute.
*/
:root{
  --tinta:#1E2761; --tinta2:#3B4A8C; --gelo:#CADCFC; --gelo2:#EEF3FC;
  --lei:#0B5394; --verde:#2C7A4B; --vinho:#7A1F2B; --ocre:#B07A2A;
  --papel:#FFFFFF; --texto:#232634; --mudo:#6B7180; --borda:#DCE1EC;
  --fonteLeitura:Georgia,'Iowan Old Style','Times New Roman',serif;
  --fonteUI:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --tamLeitura:17px; --altLinha:1.75;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--fonteUI);background:#F2F4F9;color:var(--texto);-webkit-tap-highlight-color:transparent}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
a{color:var(--lei)}
.app{max-width:760px;margin:0 auto;min-height:100vh;background:var(--papel);display:flex;flex-direction:column;box-shadow:0 0 40px rgba(30,39,97,.08)}

/* ---------- barra superior ---------- */
.topo{position:sticky;top:0;z-index:40;background:var(--tinta);color:#fff;display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:56px}
.topo h1{font-size:17px;font-weight:700;letter-spacing:.2px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btnIcone{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;flex:none}
.btnIcone:active{background:rgba(255,255,255,.15)}
.hamb{display:flex;flex-direction:column;gap:5px;width:22px}
.hamb span{height:2.5px;background:#fff;border-radius:2px}

/* ---------- gaveta (menu lateral) ---------- */
.veu{position:fixed;inset:0;background:rgba(10,14,30,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s}
.veu.aberta{opacity:1;pointer-events:auto}
.gaveta{position:fixed;top:0;left:0;bottom:0;width:min(310px,84vw);background:var(--tinta);color:#fff;z-index:61;transform:translateX(-105%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto}
.gaveta.aberta{transform:none}
.gaveta .marca{padding:26px 22px 18px;border-bottom:1px solid rgba(255,255,255,.14)}
.marca .logo{font-family:var(--fonteLeitura);font-size:30px;font-weight:700;letter-spacing:.5px}
.marca .logo em{font-style:normal;color:var(--gelo)}
.marca small{display:block;color:#AEBBE6;margin-top:4px;font-size:12.5px}
.gaveta nav{padding:10px 0 24px}
.gaveta .grupo{padding:16px 22px 6px;font-size:11px;letter-spacing:1.4px;color:#8FA0D6;font-weight:700}
.gaveta .item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 22px;font-size:15px;color:#EAF0FF}
.gaveta .item:active,.gaveta .item.ativo{background:rgba(255,255,255,.12)}
.gaveta .item .sim{width:22px;text-align:center;color:var(--gelo);flex:none}
.gaveta .item.capitulo{font-size:13.5px;padding:9px 22px;line-height:1.35}
.gaveta .item.sair{color:#FFC9C9;margin-top:6px}

/* ---------- telas ---------- */
.tela{display:none;flex:1;flex-direction:column}
.tela.ativa{display:flex}
.rolagem{flex:1;overflow-y:auto;padding:18px 18px 90px}

/* estante */
.busca{display:flex;gap:8px;background:var(--gelo2);border:1px solid var(--borda);border-radius:12px;padding:11px 14px;align-items:center;margin-bottom:14px}
.busca input{border:none;background:none;outline:none;flex:1;font-size:15px;color:var(--texto)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{padding:7px 14px;border-radius:999px;background:#fff;border:1.5px solid var(--borda);font-size:13px;color:var(--tinta2);font-weight:600}
.chip.ativo{background:var(--tinta);border-color:var(--tinta);color:#fff}
.secTit{font-size:12px;letter-spacing:1.4px;color:var(--mudo);font-weight:700;margin:6px 0 12px}
.prateleira{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.livro{position:relative;border-radius:8px 12px 12px 8px;padding:16px 14px 14px 20px;min-height:190px;color:#fff;display:flex;flex-direction:column;box-shadow:0 8px 18px rgba(20,26,60,.18);overflow:hidden;text-align:left}
.livro::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:rgba(0,0,0,.28)}
.livro::after{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.25)}
.livro .assunto{font-size:10px;letter-spacing:1.2px;opacity:.85;font-weight:700}
.livro h3{font-family:var(--fonteLeitura);font-size:17.5px;line-height:1.25;margin:8px 0 4px;flex:1}
.livro .meta{font-size:11.5px;opacity:.85}
.progresso{height:5px;background:rgba(255,255,255,.28);border-radius:3px;margin-top:10px;overflow:hidden}
.progresso i{display:block;height:100%;background:#8FE3B0;border-radius:3px}
.livro.breve{background:repeating-linear-gradient(45deg,#E8EBF4,#E8EBF4 10px,#E1E5F0 10px,#E1E5F0 20px);color:var(--mudo);box-shadow:none;border:1.5px dashed var(--borda)}
.livro.breve::before,.livro.breve::after{display:none}
.continuar{margin-top:22px;background:var(--gelo2);border:1px solid var(--borda);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.continuar .icone{width:40px;height:40px;border-radius:10px;background:var(--tinta);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.continuar b{display:block;font-size:14.5px;color:var(--tinta)}
.continuar span{font-size:12.5px;color:var(--mudo)}

/* ficha do livro */
.ficha{align-items:center;text-align:center;display:flex;flex-direction:column}
.capaG{width:150px;height:210px;border-radius:8px 14px 14px 8px;background:var(--tinta);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:16px 12px 16px 20px;position:relative;box-shadow:0 14px 30px rgba(20,26,60,.3);margin:8px auto 16px}
.capaG::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:rgba(0,0,0,.3)}
.capaG .assunto{font-size:10px;letter-spacing:1.4px;opacity:.85;font-weight:700}
.capaG h2{font-family:var(--fonteLeitura);font-size:21px;line-height:1.25;margin-top:8px}
.ficha .sub{color:var(--mudo);font-size:14px;max-width:420px}
.tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px}
.tag{font-size:11.5px;background:var(--gelo2);border:1px solid var(--borda);color:var(--tinta2);padding:4px 10px;border-radius:999px;font-weight:600}
.acoes{display:flex;gap:10px;margin:16px 0 22px;flex-wrap:wrap;justify-content:center}
.btn{padding:12px 20px;border-radius:12px;font-size:14.5px;font-weight:700}
.btn.cheio{background:var(--verde);color:#fff}
.btn.vazio{background:#fff;border:1.5px solid var(--borda);color:var(--tinta)}
.listaSec{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px;text-align:left}
.itemSec{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--borda);border-radius:13px;padding:14px 16px;width:100%;text-align:left}
.itemSec .sim{width:30px;height:30px;border-radius:8px;background:var(--gelo2);color:var(--tinta);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.itemSec b{font-size:14.5px;color:var(--tinta);display:block}
.itemSec span{font-size:12px;color:var(--mudo)}

/* leitor */
.leitor{background:var(--papel);position:relative;overflow:hidden}
.leitura{flex:1;overflow-y:auto;padding:26px 22px 130px;font-family:var(--fonteLeitura);font-size:var(--tamLeitura);line-height:var(--altLinha)}
.leitura h2{font-size:1.45em;color:var(--tinta);line-height:1.3;margin-bottom:.4em}
.leitura h3{font-size:1.12em;color:var(--tinta2);margin:1.4em 0 .5em}
.leitura p{margin:.85em 0;text-align:justify}
.leitura ul{margin:.85em 0 .85em 1.2em}
.leitura li{margin:.45em 0;text-align:justify}
.leitura .baseLegal{font-family:var(--fonteUI);font-size:.78em;color:var(--verde);font-weight:700;margin:-.2em 0 1.2em}
.leitura .destaque{background:var(--gelo2);border-left:4px solid var(--tinta2);border-radius:0 10px 10px 0;padding:14px 16px;margin:1.2em 0;font-size:.94em}
.leitura .destaque b:first-child{color:var(--tinta)}
.lei{color:var(--lei);font-weight:700;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;cursor:pointer}
.fig{margin:1.4em 0;font-family:var(--fonteUI)}
.fig .quadro{border:1px solid var(--borda);border-radius:12px;padding:16px;background:#fff}
.fig figcaption{font-size:.72em;color:var(--mudo);text-align:center;margin-top:8px;font-style:italic}
/* diagramas css */
.duasCol{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.pilha{display:flex;flex-direction:column;gap:6px}
.bloquinho{background:var(--tinta);color:#fff;border-radius:8px;padding:8px 10px;font-size:12.5px;font-weight:700;text-align:center}
.bloquinho.verde{background:var(--verde)}.bloquinho.ocre{background:var(--ocre)}
.setaG{font-size:22px;color:var(--tinta2);text-align:center}
.linhaT{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
.marco{flex:none;width:96px;border-radius:10px;padding:9px 8px;font-size:11px;text-align:center;color:#fff;background:var(--tinta2)}
.marco b{display:block;font-size:14px;margin-bottom:3px}
.marco.claro{background:var(--gelo);color:var(--tinta)}
.marco.verde{background:var(--verde)}.marco.fim{background:var(--vinho)}
.barras{display:flex;flex-direction:column;gap:9px}
.barraL{display:grid;grid-template-columns:150px 1fr 44px;gap:8px;align-items:center;font-size:12px}
.barraL .trilho{background:var(--gelo2);border-radius:6px;height:16px;overflow:hidden}
.barraL .trilho i{display:block;height:100%;background:var(--tinta2);border-radius:6px}
.barraL .val{font-weight:700;color:var(--tinta);text-align:right}
.barraFerr{position:fixed;bottom:0;left:0;right:0;z-index:35;display:flex;justify-content:center;pointer-events:none}
.barraFerr .caixa{pointer-events:auto;display:flex;gap:2px;background:#fff;border:1px solid var(--borda);border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(20,26,60,.12);padding:8px 6px;max-width:760px;width:100%;justify-content:space-around}
.barraFerr .fbtn{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9.5px;color:var(--tinta);padding:6px 4px;border-radius:10px;min-width:44px;flex:1}
.barraFerr .fbtn .ic{font-size:18px}
.barraFerr .fbtn.ligado{background:var(--gelo2)}
.barraFerr .fbtn:active{background:var(--gelo2)}
/* temas de leitura */
.leitor.temaSepia .leitura{background:#F6EEDF;color:#3A3226}
.leitor.temaSepia{background:#F6EEDF}
.leitor.temaEscuro .leitura{background:#14161F;color:#D8DCE8}
.leitor.temaEscuro{background:#14161F}
.leitor.temaEscuro .leitura h2{color:#AFC3F5}.leitor.temaEscuro .leitura h3{color:#93A7E8}
.leitor.temaEscuro .leitura .destaque{background:#1D2233;border-left-color:#93A7E8}
.leitor.temaEscuro .fig .quadro{background:#1B2030;border-color:#2A3148}
.leitor.temaEscuro .lei{color:#7FB4F5}

/* janela legal (modal) */
.modalFundo{position:fixed;inset:0;background:rgba(10,14,30,.5);z-index:70;display:none;align-items:flex-end;justify-content:center}
.modalFundo.aberta{display:flex}
.janelaLei{background:#FDFCF8;width:100%;max-width:640px;max-height:82vh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;position:relative;overflow:hidden;animation:sobe .28s cubic-bezier(.3,.9,.4,1)}
@keyframes sobe{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}}
.janelaLei::before{content:"§";position:absolute;right:-14px;bottom:-46px;font-family:var(--fonteLeitura);font-size:200px;color:rgba(30,39,97,.05);pointer-events:none}
.janelaLei .cab{padding:18px 22px 12px;border-bottom:2px solid var(--tinta)}
.janelaLei .cab .rotulo{font-size:10.5px;letter-spacing:1.6px;color:var(--ocre);font-weight:700}
.janelaLei .cab h3{font-family:var(--fonteLeitura);font-size:18px;color:var(--tinta);margin-top:3px}
.janelaLei .corpo{padding:16px 22px;overflow-y:auto;font-family:var(--fonteLeitura);font-size:15.5px;line-height:1.7;color:#3A3B45;white-space:pre-line}
.janelaLei .corpo .ementa{font-style:italic;color:var(--tinta2)}
.janelaLei .pe{display:flex;gap:10px;padding:14px 22px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--borda)}
.janelaLei .pe .btn{flex:1;text-align:center}

/* listas gerais (vocab, faq, legis, links, siglas, notas) */
.cartao{background:#fff;border:1px solid var(--borda);border-radius:13px;margin-bottom:10px;overflow:hidden}
.cartao .cabC{width:100%;display:flex;align-items:center;gap:10px;padding:14px 16px;text-align:left}
.cartao .cabC b{flex:1;font-size:14.5px;color:var(--tinta)}
.cartao .cabC .seta{color:var(--mudo);transition:transform .2s}
.cartao.aberto .cabC .seta{transform:rotate(180deg)}
.cartao .corpoC{display:none;padding:0 16px 14px;font-size:14px;line-height:1.65;color:#3A3B45}
.cartao.aberto .corpoC{display:block}
.miniBtn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:var(--verde);color:#fff;font-size:12px;font-weight:700;padding:7px 12px;border-radius:9px}
.sigla{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--borda);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.sigla b{background:var(--tinta);color:#fff;border-radius:8px;padding:8px 4px;text-align:center;font-size:12.5px}
.sigla span{font-size:13.5px}
.cardLink{display:flex;flex-direction:column;background:#fff;border:1px solid var(--borda);border-radius:12px;padding:13px 15px;margin-bottom:9px;text-decoration:none}
.cardLink b{color:var(--tinta);font-size:14.5px}
.cardLink span{color:var(--mudo);font-size:12.5px;margin-top:2px}
.aviso{background:var(--gelo2);border:1px solid var(--borda);border-radius:12px;padding:13px 15px;font-size:13px;color:var(--tinta2);margin:14px 0}
.notaCard{background:#FFF9E8;border:1px solid #EAD9A8;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.notaCard small{color:var(--ocre);font-weight:700;font-size:11.5px}
.notaCard p{font-size:13.5px;margin-top:4px}
.notaCard .apagar{color:var(--vinho);font-size:12px;font-weight:700;margin-top:8px}

/* aparência */
.painelAp label{display:block;font-size:13px;font-weight:700;color:var(--tinta);margin:18px 0 8px}
.opcoes{display:flex;gap:10px;flex-wrap:wrap}
.op{padding:11px 16px;border-radius:11px;border:1.5px solid var(--borda);background:#fff;font-size:14px;font-weight:700;color:var(--tinta)}
.op.ativo{border-color:var(--tinta);background:var(--tinta);color:#fff}
.op.sepia{background:#F6EEDF}.op.escuro{background:#14161F;color:#D8DCE8}
.previa{margin-top:20px;border:1px solid var(--borda);border-radius:13px;padding:18px;font-family:var(--fonteLeitura)}

/* calculadora */
.campoC{width:100%;padding:12px 14px;border:1.5px solid var(--borda);border-radius:11px;font-size:15px;background:#fff;color:var(--texto);font-family:inherit}
.campoC:focus{outline:2px solid var(--tinta2);border-color:var(--tinta2)}
.cardAno{border:1px solid var(--borda);border-radius:13px;background:#fff;padding:14px 16px;margin-bottom:12px}
.cardAno .cabA{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cardAno .cabA b{color:var(--tinta);font-size:16px}
.cardAno .totA{color:var(--tinta);font-weight:700;text-align:right}
.cardAno .totA small{color:var(--mudo);font-weight:400}
.cardAno .trilhoA{height:9px;background:var(--gelo2);border-radius:5px;margin:9px 0 10px;overflow:hidden}
.cardAno .trilhoA i{display:block;height:100%;background:var(--tinta2);border-radius:5px}
.cardAno .linhas{font-size:12.5px;color:#3A3B45;line-height:1.6}
.cardAno .notaA{font-size:11.5px;color:var(--mudo);margin-top:6px}

/* apresentação */
.slidePalco{background:var(--tinta);border-radius:14px;color:#fff;aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:center;padding:26px;position:relative;overflow:hidden}
.slidePalco h3{font-family:var(--fonteLeitura);font-size:21px;margin-bottom:10px}
.slidePalco ul{margin-left:18px;font-size:14px;line-height:1.7}
.slidePalco .num{position:absolute;top:12px;right:16px;font-size:12px;opacity:.7}
.slideNav{display:flex;gap:10px;justify-content:center;margin-top:14px}
.slideNav .btn{min-width:80px}
.vazio{color:var(--mudo);text-align:center;padding:40px 20px;font-size:14px}
@media (min-width:640px){ .modalFundo{align-items:center} .janelaLei{border-radius:20px} }

/* conta do leitor */
.seloCat{display:inline-block;padding:5px 14px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:1.2px;color:#fff}
.seloCat.bronze{background:#8C5A2B}
.seloCat.prata{background:#8B95A7}
.seloCat.ouro{background:#B07A2A}

/* proteção de conteúdo — Prata e Bronze (Ouro isento) */
body.protegido .leitura, body.protegido .janelaLei .corpo{
  -webkit-user-select:none; user-select:none;
}
body.protegido .leitura img{ pointer-events:none }
.marcaDagua{
  position:absolute; inset:-15%; z-index:6; pointer-events:none; overflow:hidden;
  display:flex; flex-wrap:wrap; align-content:space-around; justify-content:space-around;
  transform:rotate(-27deg); opacity:.08;
}
.marcaDagua span{
  font:700 13px/3 var(--fonteUI); letter-spacing:1.2px; white-space:nowrap;
  color:var(--tinta); padding:12px 26px;
}
.leitor.temaSepia .marcaDagua span{ color:#7A6A45 }
.leitor.temaEscuro .marcaDagua span{ color:#AFC3F5 }
@media print{
  body.protegido .app, body.protegido .modalFundo, body.protegido .gaveta, body.protegido .veu{ display:none !important }
  body.protegido::after{
    content:"Conteúdo licenciado Kimble — a impressão está disponível na categoria Ouro, sempre com indicação da fonte. kimble.com.br";
    display:block; padding:60px 40px; font:700 16px/1.6 Georgia, serif; color:#1E2761;
  }
}

/* ---------- Fale com o autor ---------- */
.rotuloCampo{display:block;font-size:12.5px;font-weight:700;color:var(--tinta2);letter-spacing:.3px;margin:14px 0 6px}
.contaChars{font-size:12px;color:var(--mudo);text-align:right;margin-top:6px}
.avisoCampo{font-size:13.5px;margin-top:10px;line-height:1.5}
.avisoCampo.ruim{color:var(--vinho);font-weight:600}
.recadoC{background:var(--gelo2);border:1px solid var(--borda);border-radius:11px;padding:12px 14px;font-size:13.5px;color:var(--tinta2);line-height:1.6;margin-bottom:6px}
.recadoC.bom{background:#EAF5EE;border-color:#BFE0CB;color:var(--verde)}
textarea.campoC{resize:vertical;min-height:150px;line-height:1.6}