/* =========================================================
   plataforma.css — folha comum dos módulos da escola
   Identidade institucional da Nova Acrópole (nova-acropole.org.br):
   Noto Sans em tudo, fundo claro, verde #418424 como cor de ação,
   títulos em azul-ardósia e botões em pílula, em caixa alta.
   Cada módulo tem um acento próprio, tirado da mesma paleta oficial.
   ========================================================= */

:root{
  /* ---- Paleta Nova Acropole (nova-acropole.org.br) ---- */
  --bg:#F0F1F1;
  --bg-deep:#E3E6E6;
  --paper:#FFFFFF;
  --paper-hi:#FFFFFF;
  --ink:#212529;
  --ink-soft:#5A6368;
  --ink-faint:#6F787F;
  --slate:#324057;
  --olive:#5BA33A;
  --olive-deep:#418424;
  --terra:#FBB040;
  --terra-deep:#A06509;
  --gold:#FBB040;
  --plum:#2E3092;
  --plum-deep:#0B453D;
  --danger:#DF2C40;
  --danger-deep:#B31F2F;
  --due:#FBB040;
  --due-deep:#A06A0C;
  --rule:rgba(50,64,87,0.14);
  --rule-soft:rgba(50,64,87,0.07);
  --shadow:0 1px 2px rgba(50,64,87,0.04), 0 12px 28px -10px rgba(50,64,87,0.10);
  --accent:#418424;
  --accent-deep:#356B1D;
}

/* acento por módulo */
body.mod-cafe     { --mod:var(--terra-deep); --mod-claro:rgba(251,176,64,0.20); }
body.mod-livraria { --mod:var(--plum-deep);  --mod-claro:rgba(11,69,61,0.10); }
body.mod-admin    { --mod:var(--slate);      --mod-claro:rgba(50,64,87,0.10); }
body.mod-portal   { --mod:var(--accent);     --mod-claro:rgba(65,132,36,0.12); }
body.mod-biblioteca{--mod:var(--plum);       --mod-claro:rgba(46,48,146,0.10); }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:radial-gradient(at 80% 90%, rgba(65,132,36,0.05) 0, transparent 50%);
}
a{color:inherit}
:focus-visible{outline:2px solid var(--mod,var(--accent));outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- cabeçalho ---------- */
.topo{
  background:var(--paper-hi);border-bottom:1px solid var(--rule);
  padding:14px 20px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:50;
}
.voltar{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--rule);border-radius:99px;padding:7px 13px;background:transparent;cursor:pointer;
}
.voltar:hover{background:var(--bg-deep);color:var(--ink)}
.topo-nome{font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:700;font-size:22px;line-height:1.1;flex:1;min-width:0}
.topo-nome em{font-style:normal;font-weight:800;color:var(--mod)}
.topo-acao{display:flex;gap:8px;align-items:center}

.wrap{max-width:1100px;margin:0 auto;padding:26px 20px 90px}

/* ---------- títulos ---------- */
.eyebrow{
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;text-transform:uppercase;
  letter-spacing:0.18em;color:var(--ink-faint);margin-bottom:8px;
}
h1.titulo{
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:700;font-size:40px;line-height:1.05;letter-spacing:0.02em;margin-bottom:6px;
}
h1.titulo em{font-style:normal;font-weight:800;color:var(--mod)}
.subtitulo{color:var(--ink-soft);font-size:15px;margin-bottom:26px;max-width:60ch}
h2.secao{
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:700;font-size:24px;margin:34px 0 14px;display:flex;align-items:center;gap:10px;
}
h2.secao::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ---------- abas ---------- */
.abas{display:flex;gap:6px;border-bottom:1px solid var(--rule);margin-bottom:22px;overflow-x:auto}
.aba{
  background:transparent;border:0;border-bottom:2px solid transparent;
  padding:11px 15px;cursor:pointer;font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;
  color:var(--ink-soft);white-space:nowrap;
}
.aba.ativa{color:var(--mod);border-bottom-color:var(--mod);font-weight:500}

/* ---------- cartões ---------- */
.cartao{
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:18px;margin-bottom:14px;
}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:8px;padding:12px 18px;cursor:pointer;font-size:15px;
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;border:1px solid transparent;transition:opacity 0.15s;
}
.btn:hover{opacity:0.88}
.btn:disabled{opacity:0.45;cursor:not-allowed}
.btn-principal{background:var(--mod);color:var(--paper-hi)}
.btn-linha{background:transparent;border-color:var(--rule);color:var(--ink)}
.btn-perigo{background:transparent;border-color:rgba(223,44,64,0.4);color:var(--danger-deep)}
.btn-pequeno{padding:8px 12px;font-size:13px;border-radius:7px}

/* ---------- formulários ---------- */
.campo{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.campo label{
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10px;text-transform:uppercase;
  letter-spacing:0.14em;color:var(--ink-soft);
}
.campo input,.campo select,.campo textarea{
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;color:var(--ink);
  background:var(--paper-hi);border:1px solid var(--rule);border-radius:8px;padding:12px 13px;width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--mod);outline:none}
.campo .dica{font-size:12.5px;color:var(--ink-faint)}
.linha-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- etiquetas ---------- */
.pill{
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10px;text-transform:uppercase;
  letter-spacing:0.1em;padding:4px 10px;border-radius:99px;white-space:nowrap;
}
.pill-ok{background:rgba(65,132,36,0.18);color:var(--olive-deep)}
.pill-pendente{background:rgba(251,176,64,0.16);color:var(--due-deep)}
.pill-fora{background:rgba(223,44,64,0.12);color:var(--danger-deep)}
.pill-neutro{background:var(--bg-deep);color:var(--ink-soft)}

/* ---------- tabela / listas ---------- */
.tabela{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.tabela th{
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10px;text-transform:uppercase;
  letter-spacing:0.14em;color:var(--ink-soft);text-align:left;
  padding:12px 15px;background:var(--paper-hi);border-bottom:1px solid var(--rule);
}
.tabela td{padding:13px 15px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}

/* ---------- seletor de pessoa ---------- */
.busca-pessoa{position:relative}
.lista-pessoas{
  max-height:230px;overflow-y:auto;border:1px solid var(--rule);border-radius:8px;
  background:var(--paper-hi);margin-top:6px;
}
.item-pessoa{
  padding:13px 15px;cursor:pointer;border-bottom:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.item-pessoa:last-child{border-bottom:0}
.item-pessoa:hover{background:var(--bg-deep)}
.item-pessoa.escolhida{background:var(--mod-claro);border-left:3px solid var(--mod)}
.item-pessoa .nome{font-size:15.5px}
.item-pessoa .turma{font-size:12.5px;color:var(--ink-soft)}

/* ---------- vazio ---------- */
.vazio{
  text-align:center;padding:44px 20px;border:1px dashed var(--rule);
  border-radius:10px;color:var(--ink-soft);
}
.vazio h3{font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;font-size:20px;color:var(--ink);margin-bottom:6px}
.vazio p{font-size:14px;max-width:44ch;margin:0 auto}

/* ---------- aviso ---------- */
.aviso{
  display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:8px;
  font-size:14px;margin-bottom:16px;
}
.aviso-info{background:var(--mod-claro);color:var(--ink)}
.aviso-alerta{background:rgba(251,176,64,0.14);color:var(--due-deep)}

/* ---------- recado (toast) ---------- */
.recado{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140%);
  background:var(--ink);color:var(--paper-hi);padding:13px 20px;border-radius:99px;
  font-size:14.5px;z-index:200;transition:transform 0.25s;max-width:92vw;text-align:center;
}
.recado.aparece{transform:translateX(-50%) translateY(0)}
.recado.erro{background:var(--danger-deep)}
.recado.ok{background:var(--olive-deep)}

/* ---------- janela modal ---------- */
.modal-fundo{
  display:none;position:fixed;inset:0;background:rgba(50,64,87,0.45);
  z-index:150;align-items:center;justify-content:center;padding:18px;
}
.modal-fundo.aberto{display:flex}
.modal{
  background:var(--paper-hi);border:1px solid var(--rule);border-radius:12px;
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;padding:24px;position:relative;
}
.modal-fechar{
  position:absolute;top:12px;right:14px;background:transparent;border:0;
  font-size:26px;line-height:1;cursor:pointer;color:var(--ink-faint);
}

/* ---------- anexo ---------- */
.anexo{
  border:1px dashed var(--rule);border-radius:9px;padding:16px;text-align:center;
  background:var(--paper-hi);cursor:pointer;
}
.anexo:hover{border-color:var(--mod)}
.anexo input{display:none}
.anexo .rotulo{font-size:14.5px;color:var(--ink-soft)}
.anexo.tem-arquivo{border-style:solid;border-color:var(--olive);background:rgba(65,132,36,0.08)}
.miniatura{max-width:100%;max-height:190px;border-radius:8px;margin-top:10px}

/* ---------- carrinho ---------- */
.item-produto{
  display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule-soft);
}
.item-produto:last-child{border-bottom:0}
.item-produto .info{flex:1;min-width:0}
.item-produto .nome-produto{font-size:16px}
.item-produto .preco{font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;color:var(--ink-soft)}
.contador{display:flex;align-items:center;gap:4px}
.contador button{
  width:38px;height:38px;border-radius:8px;border:1px solid var(--rule);
  background:var(--paper-hi);font-size:19px;cursor:pointer;color:var(--ink);line-height:1;
}
.contador .qtd{min-width:30px;text-align:center;font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px}

.total-barra{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0 6px;border-top:2px solid var(--rule);margin-top:6px;
}
.total-barra .rot{font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;
  text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-soft)}
.total-barra .val{font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:29px;font-weight:700}

/* ---------- celular ---------- */
@media(max-width:700px){
  h1.titulo{font-size:31px}
  .wrap{padding:20px 15px 90px}
  .linha-campos{grid-template-columns:1fr}
  .grade{grid-template-columns:1fr}
  .topo-nome{font-size:18px}
  .modal{max-width:100%;border-radius:14px 14px 0 0;max-height:94vh}
  .modal-fundo{align-items:flex-end;padding:0}
  .btn{width:100%}
  .btn-inline{width:auto}
  .tabela thead{display:none}
  .tabela,.tabela tbody,.tabela tr,.tabela td{display:block;width:100%}
  .tabela tr{border-bottom:1px solid var(--rule);padding:12px 4px}
  .tabela tr:last-child{border-bottom:0}
  .tabela td{border-bottom:0;padding:5px 14px}
  .tabela td::before{
    content:attr(data-rot);display:block;
    font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:9.5px;text-transform:uppercase;
    letter-spacing:0.14em;color:var(--ink-faint);margin-bottom:2px;
  }
}

/* ---------- logo no cabeçalho do módulo ---------- */
.topo{gap:12px}
.topo-logo{height:44px;width:auto;display:block;flex-shrink:0}
@media(max-width:700px){ .topo-logo{height:36px} }
.logo-hero{display:flex;justify-content:center;margin:6px 0 18px}
.logo-hero img{max-width:300px;width:100%;height:auto}


/* =========================================================
   Identidade Nova Acropole — titulos Noto Sans 700 em
   azul-ardosia, botoes em pilula e caixa alta como no site.
   ========================================================= */
h1.titulo,h2.secao,.topo-nome,.vazio h3{color:var(--slate)}
h1.titulo{letter-spacing:0.01em}
h2.secao{letter-spacing:0.03em}
.eyebrow{font-weight:700;color:var(--accent)}
.btn{border-radius:99px;text-transform:uppercase;letter-spacing:0.06em;font-weight:700;font-size:14px}
.btn-pequeno{border-radius:99px;font-size:12.5px;letter-spacing:0.05em}
.campo label,.tabela th,.pill,.total-barra .rot{font-weight:700}
.aba.ativa{font-weight:700}
.cartao{border-radius:8px}
.campo input,.campo select,.campo textarea{border-radius:6px}

.contador .qtd,.item-produto .preco,.voltar,.tabela td::before{font-weight:700}


/* =========================================================
   Linha do tempo do histórico (usada por café, livraria e
   biblioteca). O acento sai de --mod quando existe; na
   biblioteca, que não tem módulos, cai para --accent.
   ========================================================= */
.hist-filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;margin-bottom:6px}
.hist-acoes{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}

.painel-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:16px 0 8px}
.num-cartao{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:14px 16px}
.num-cartao .rot{font-size:10px;text-transform:uppercase;letter-spacing:0.14em;font-weight:700;color:var(--ink-soft)}
.num-cartao .val{font-size:24px;font-weight:700;color:var(--slate);line-height:1.2;margin-top:4px}
.num-cartao .obs{font-size:12.5px;color:var(--ink-soft)}
.num-cartao.destaque .val{color:var(--mod,var(--accent))}
.num-cartao.pendente .val{color:var(--due-deep)}

.linha-tempo{margin-top:8px}
.lt-dia{margin-bottom:24px}
.lt-dia-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.lt-dia-data{font-weight:700;color:var(--slate);font-size:15px}
.lt-dia-semana{font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint);font-weight:700}
.lt-dia-total{margin-left:auto;font-weight:700;color:var(--mod,var(--accent))}
.lt-dia-qtd{font-size:12px;color:var(--ink-soft)}
.lt-eventos{position:relative;padding-left:22px;margin-top:8px}
.lt-eventos::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;background:var(--rule)}
.lt-evento{position:relative;padding:9px 0}
.lt-ponto{position:absolute;left:-21px;top:15px;width:10px;height:10px;border-radius:50%;
  background:var(--mod,var(--accent));box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--rule)}
.lt-topo{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lt-hora{font-size:11px;font-weight:700;letter-spacing:0.06em;color:var(--ink-faint)}
.lt-titulo{font-weight:700;color:var(--ink)}
.lt-valor{margin-left:auto;font-weight:700;color:var(--slate)}
.lt-pessoa{font-size:14px;color:var(--ink-soft);margin-top:2px}
.lt-turma{color:var(--ink-faint)}
.lt-detalhe{font-size:13.5px;color:var(--ink-soft);margin-top:3px}
.lt-anexo{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--mod,var(--accent))}
.lt-evento.tipo-devolucao .lt-ponto{background:var(--olive-deep)}
.lt-evento.tipo-emprestimo .lt-ponto{background:var(--plum)}
.lt-evento.tipo-fila .lt-ponto{background:var(--due-deep)}
.lt-evento.tipo-atraso .lt-ponto{background:var(--danger)}

/* barras de ganho por dia e por mês */
.barra-linha{display:grid;grid-template-columns:118px 1fr 104px;gap:10px;align-items:center;padding:5px 0}
.barra-rot{font-size:13px;color:var(--ink-soft)}
.barra-trilho{background:var(--bg-deep);border-radius:99px;height:10px;overflow:hidden}
.barra-preenche{height:100%;background:var(--mod,var(--accent));border-radius:99px;min-width:2px}
.barra-val{text-align:right;font-weight:700;font-size:13.5px}
@media(max-width:700px){
  .barra-linha{grid-template-columns:92px 1fr 84px;gap:8px}
  .lt-valor{margin-left:0}
  .lt-dia-total{margin-left:0;width:100%}
}