/* ==========================================================================
   ESPACE ÉLÈVE + MATRÍCULA — o sistema da carta sobre a aplicação
   Carrega DEPOIS de styles.css. A estrutura do app (grades, calendário,
   tabelas, estados) fica intacta; o que muda aqui é o vestuário: papel com
   grão, tipografia, cor, fios e botões do handoff.
   ========================================================================== */

/* --- escala fluida, igual à do site público ------------------------------- */
html{font-size:clamp(16px, 1.1111vw, 28.8px);}

/* --- tokens da carta ------------------------------------------------------ */
:root{
  --papel:#F0EADD;
  --creme:#F7F3EA;
  --creme-escuro:#E7DFCE;
  --branco:#FFFDF8;
  --carvao:#1C1B18;
  --verde:#565B3E;
  --terracota:#A0452F;
  --marrom:#5C4F42;
  --linha:rgba(28,27,24,.18);
  --moldura:#F4EFE3;

  --font-display:'EB Garamond',Georgia,serif;
  --font-body:'EB Garamond',Georgia,serif;
  --font-ui:'Jost','Inter',sans-serif;
  --font-stamp:'Special Elite',monospace;
  --font-plume:'Homemade Apple',cursive;

  --emboss:0 1px 0 rgba(255,252,245,.85), 0 -1px 1px rgba(70,58,44,.28), 0 2px 2px rgba(255,252,245,.5);
  --emboss-soft:0 1px 0 rgba(255,252,245,.7), 0 -1px 1px rgba(70,58,44,.18);
}

/* --- papel com grão ------------------------------------------------------- */
body{background:var(--papel);position:relative;font-family:var(--font-body);}
.grain{position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:multiply;
  background-image:url(paper-grain.webp);background-repeat:repeat;}
.grain-1{opacity:.52;background-size:84px 84px;}
.grain-2{opacity:.22;background-size:197px 197px;background-position:37px 61px;}
.grain-3{opacity:.30;background-size:41px 41px;background-position:13px 27px;}
body > header,body > main,body > footer,body > .pn-topbar{position:relative;z-index:1;}

/* --- tipografia ----------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;color:var(--carvao);
  letter-spacing:.12em;text-transform:uppercase;text-wrap:pretty;}
h1,h2{text-shadow:var(--emboss);}
h3,h4{text-shadow:var(--emboss-soft);}
h1 em,h2 em,h3 em{font-style:normal;}
.kicker,.eyebrow,.pn-ob-rot,.pn-marca-rot,.lbl,.field-label{
  font-family:var(--font-stamp) !important;letter-spacing:.2em !important;
  text-transform:uppercase !important;color:var(--terracota);}
.lede,.pn-lede{font-family:var(--font-ui);font-weight:300;}
p,li,td,th,label,input,select,textarea,button{font-family:var(--font-ui);font-weight:300;}
strong,b{font-weight:400;}
.auth-note,.mat-desc{font-family:var(--font-body) !important;font-style:italic;}

/* --- fios e cantos: raio único de 2px ------------------------------------- */
*,*::before,*::after{border-radius:0;}
.card,.auth-card,.pn-card,.btn,input,select,textarea,.tag,.chip,.pn-aba,
.pn-bloco,.rv-card,.ms-card{border-radius:2px !important;}
.pn-avatar,.pn-lapis,.pn-ponto,[class*="circulo"],[class$="-dot"]{border-radius:50% !important;}

/* --- botões --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;
  min-height:2.625rem;padding:0 1.375rem;border:1px solid var(--carvao);background:transparent;
  color:var(--carvao);font-family:var(--font-display);font-weight:500;font-size:0.78125rem;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;}
.btn-primary{background:transparent;border-color:var(--terracota);color:var(--terracota);}
.btn-primary:hover{background:var(--terracota);color:var(--branco);}
.btn-outline,.btn-dark-outline{background:transparent;border-color:var(--carvao);color:var(--carvao);}
.btn-outline:hover,.btn-dark-outline:hover{background:var(--carvao);color:var(--branco);}
.btn-sharp{border-radius:2px !important;}
:focus-visible{outline:1px solid var(--terracota);outline-offset:2px;}

/* --- blocos: creme e fio, sem sombra nem borda grossa --------------------- */
.card,.auth-card{background:var(--creme);border:0;border-top:1px solid var(--linha);
  box-shadow:none;}
.card.accent-l{border-left:2px solid var(--terracota);}
.card.accent-v{border-left:2px solid var(--verde);}
.auth-card{border:1px solid var(--linha);border-top:1px solid var(--linha);background:var(--branco);}
.auth-msg{border-left-width:2px;background:var(--creme);font-family:var(--font-ui);}

/* --- topbar do painel ----------------------------------------------------- */
.pn-topbar{background:var(--papel);backdrop-filter:none;border-bottom:1px solid var(--linha);}
.pn-marca-rot{font-family:var(--font-stamp);letter-spacing:.2em;opacity:.7;color:var(--terracota);}
.pn-aba{font-family:var(--font-display) !important;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--carvao);opacity:.7;background:none;text-decoration:none;
  border-bottom:1px solid transparent;border-radius:0 !important;}
.pn-aba:hover{opacity:1;}
.pn-aba.on{opacity:1;background:none;color:var(--carvao);
  border-bottom:1px solid var(--terracota);font-weight:500;}
.pn-eu-nome{font-family:var(--font-display);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;font-size:0.75rem;}
.pn-avatar{background:var(--verde);color:var(--branco);font-family:var(--font-stamp);
  letter-spacing:.06em;}

/* --- abas e rótulos de aba genéricos -------------------------------------- */
.auth-tab{font-family:var(--font-display);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;}
.auth-tab.sel{color:var(--terracota);border-bottom-color:var(--terracota);}

/* --- etiquetas ------------------------------------------------------------ */
.tag,.chip{font-family:var(--font-display);letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(28,27,24,.35);background:transparent;color:var(--verde);}

/* --- tabelas -------------------------------------------------------------- */
th{font-family:var(--font-stamp);letter-spacing:.16em;text-transform:uppercase;
  color:var(--terracota);font-weight:400;}
td{font-family:var(--font-ui);font-weight:300;}
tr{border-color:rgba(28,27,24,.16);}

/* --- formulários ---------------------------------------------------------- */
input,select,textarea{background:var(--branco);border:1px solid rgba(28,27,24,.3);
  color:var(--carvao);}
input:focus,select:focus,textarea:focus{border-color:var(--terracota);}

/* --- rodapé --------------------------------------------------------------- */
/* escopado no .foot (o verso de envelope). Bare « footer » pegava também o
   rodapé do painel e o do admin e punha o manifesto em caixa alta. */
.foot{border-top:1px solid var(--linha);background:transparent;}
.foot,.foot .flags,.foot .foot-row{font-family:var(--font-stamp);letter-spacing:.16em;
  text-transform:uppercase;color:var(--carvao);}

/* --- cabeçalho e rodapé da carta ------------------------------------------
   Estas telas usavam a topbar e o rodapé antigos do styles.css. A marcação foi
   trocada pela da home; estas regras vêm depois e substituem as antigas. */
.topbar{position:static;background:transparent;backdrop-filter:none;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0.875rem clamp(1rem,3vw,2.5rem);padding:1.375rem clamp(1.5rem,4vw,3.5rem);
  border-bottom:1px solid var(--linha);}
.topbar .brand{display:flex;align-items:center;gap:0.75rem;flex:none;text-decoration:none;}
.topbar .brand img{width:2.125rem;height:2.125rem;object-fit:contain;}
.topbar .brand span{font-family:var(--font-display);font-size:0.90625rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--verde);white-space:nowrap;}
.topbar nav{display:flex;flex-wrap:wrap;gap:0.5rem clamp(0.875rem,2.4vw,2.125rem);
  justify-content:center;flex:1 1 26.25rem;min-width:0;align-items:center;}
.topbar nav a{color:var(--carvao);opacity:.85;text-decoration:none;white-space:nowrap;
  font-family:var(--font-display);font-size:0.78125rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;padding:0;border-radius:0;}
.topbar nav a:hover{opacity:1;color:var(--carvao);}
.topbar .right{display:flex;align-items:center;gap:1.375rem;flex:none;margin-left:auto;}
.topbar .aluno{color:var(--carvao);white-space:nowrap;text-decoration:none;
  font-family:var(--font-display);font-size:0.78125rem;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid rgba(28,27,24,.35);padding-bottom:2px;}
.topbar .btn-mini{min-height:2.25rem;padding:0 1.125rem;font-size:0.71875rem;}

.foot{border-top:1px solid var(--linha);padding:2.125rem clamp(1.5rem,4vw,3.5rem) 2.75rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:1.375rem 2.5rem;font-family:var(--font-stamp);font-size:0.71875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--carvao);background:transparent;}
.foot div{display:flex;flex-direction:column;gap:0.5rem;opacity:.8;}
.foot .right{align-items:flex-end;text-align:right;}
.foot .copy{opacity:.75;}
.foot a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(28,27,24,.25);}
.foot a:hover{color:var(--terracota);border-color:var(--terracota);}

/* "Área do aluno" fica oculto no desktop (o .right já tem) e aparece só no menu mobile */
.topbar nav .aluno-m{display:none;}
@media (max-width:860px){
  .topbar nav{flex:1 1 100%;flex-direction:column;align-items:flex-start;gap:0;}
  .topbar nav a{width:100%;padding:0.5rem 0.375rem;border-bottom:1px solid var(--linha);}
  .topbar [data-m="hide-m"]{display:none !important;}
  .topbar nav .aluno-m{display:block;border-bottom:0;border-top:1px solid var(--linha);margin-top:0.375rem;padding-top:0.5rem;font-weight:600;color:var(--verde) !important;}
  .topbar-sub{display:none;}
  .btn{white-space:normal;height:auto;padding:0.625rem 1.125rem;line-height:1.35;text-align:center;}
}

/* --- rodapé do painel ------------------------------------------------------
   Era uma faixa carvão com texto claro. Não existe fundo escuro neste sistema:
   vira papel com fio, como o verso de envelope do site. */
.pn-footer{background:transparent;color:var(--carvao);border-top:1px solid var(--linha);
  padding:2rem 0;}
.pn-footer-manifesto{font-family:var(--font-body);font-style:italic;font-size:0.9375rem;
  color:var(--terracota);}
.pn-footer-flags{font-family:var(--font-stamp);letter-spacing:.18em;text-transform:uppercase;
  color:var(--carvao);opacity:.7;}

/* --- formulário: rótulo datilografado -------------------------------------- */
label,.field-label,.auth-card label{font-family:var(--font-stamp) !important;
  font-size:0.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--carvao);
  opacity:.75;font-weight:400;}
.lede,.pn-lede,.auth-card .lede{font-style:normal;}

/* --- « je ne sais quoi » e outros textos que eram claros sobre escuro ------ */
.sec.dark,.bloco-escuro,[class*="-escuro"]{background:transparent;color:var(--carvao);}

/* --- matrícula ------------------------------------------------------------
   O formulário tem folha própria dentro do HTML. Aqui só os botões e as
   etiquetas entram no sistema: contorno em vez de pílula preenchida. */
.mat-btn-primary{background:transparent !important;border:1px solid var(--terracota) !important;
  color:var(--terracota) !important;border-radius:2px !important;
  font-family:var(--font-display) !important;font-weight:500 !important;font-size:0.78125rem !important;
  letter-spacing:.2em !important;text-transform:uppercase !important;
  padding:0 1.375rem !important;min-height:2.625rem !important;
  transition:background-color .25s ease,color .25s ease !important;box-shadow:none !important;}
.mat-btn-primary:hover{background:var(--terracota) !important;color:var(--branco) !important;}
.mat-btn-secondary{background:transparent !important;border:1px solid var(--carvao) !important;
  color:var(--carvao) !important;border-radius:2px !important;
  font-family:var(--font-display) !important;font-weight:500 !important;font-size:0.78125rem !important;
  letter-spacing:.2em !important;text-transform:uppercase !important;
  padding:0 1.375rem !important;min-height:2.625rem !important;box-shadow:none !important;}
.mat-btn-secondary:hover{background:var(--carvao) !important;color:var(--branco) !important;}
.mat-h1{font-family:var(--font-display) !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;text-shadow:var(--emboss);}
.mat-lbl,.mat-contract-kicker{font-family:var(--font-stamp) !important;letter-spacing:.18em !important;
  text-transform:uppercase !important;}
.mat-card,.mat-contract-box{border-radius:2px !important;box-shadow:none !important;}
.mat-pill{border-radius:2px !important;font-family:var(--font-display) !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;}

/* --- voltar para a aba de origem ------------------------------------------
   O painel tem abas; as sub-telas são páginas separadas. Sem isto só existia
   « voltar ao painel », que jogava a aluna no Aujourd'hui e a fazia procurar a
   aba de novo. Agora a moldura diz de qual aba a tela saiu e volta para ela. */
.pn-voltar{display:inline-flex;align-items:center;gap:0.375rem;flex:none;
  font-family:var(--font-ui);font-size:0.8125rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--marrom);text-decoration:none;white-space:nowrap;
  padding:0.375rem 0.75rem;border:1px solid var(--linha);border-radius:0.25rem;
  background:var(--branco);transition:border-color .2s ease,color .2s ease;}
.pn-voltar span{font-size:0.9375rem;line-height:1;}
.pn-voltar:hover{border-color:var(--terracota);color:var(--terracota);}
.pn-footer-voltar{font-family:var(--font-ui);font-size:0.8125rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--marrom);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;}
.pn-footer-voltar:hover{color:var(--terracota);}
@media (max-width:860px){
  .pn-topbar-inner{flex-wrap:wrap;}
  .pn-voltar{order:-1;}
  .pn-abas{flex:1 1 100%;}
}

/* ── Leque do livro (Manuels Pédagogiques) ──────────────────────────────────
   Acordeão nativo <details>/<summary> com visual editorial da marca.
   Três níveis: livro → unidade → dossier → linha de páginas.             */

/* Livro (nível 0) */
.leque-livro{border:1px solid var(--linha);border-radius:3px;margin-top:20px;overflow:hidden;}
.leque-livro-titulo{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 18px;cursor:pointer;list-style:none;
  font-family:var(--font-stamp);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--card);user-select:none;}
.leque-livro-titulo::-webkit-details-marker{display:none;}
.leque-livro-titulo::marker{display:none;}
.leque-livro-titulo::after{
  content:'▸';font-size:.8rem;opacity:.45;transition:transform .2s;
  display:inline-block;transform:rotate(0deg);margin-left:auto;flex-shrink:0;}
.leque-livro[open] .leque-livro-titulo::after{transform:rotate(90deg);opacity:.7;}
.leque-livro-titulo:hover{background:var(--creme-escuro);}
.leque-livro[open] .leque-livro-titulo{border-bottom:1px solid var(--linha);}
.leque-livro-nome{color:var(--carvao);font-size:.7rem;}

/* Unidade (nível 1) */
.leque-unidade{border-bottom:1px solid var(--linha);}
.leque-unidade:last-child{border-bottom:0;}
.leque-unidade-titulo{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 18px;cursor:pointer;list-style:none;
  font-family:var(--font-body);font-size:.9rem;font-weight:500;
  background:var(--fundo);user-select:none;}
.leque-unidade-titulo::-webkit-details-marker{display:none;}
.leque-unidade-titulo::marker{display:none;}
.leque-unidade[open]>.leque-unidade-titulo{
  border-bottom:1px solid var(--linha);color:var(--verde);}

/* Dossier (nível 2) */
.leque-dossier-titulo{
  padding:8px 18px 4px;font-family:var(--font-stamp);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terracota);border-top:1px solid var(--linha);margin-top:0;}
.leque-dossier-titulo:first-child{border-top:0;}

/* Linhas de páginas (nível 3) */
.leque-lista{list-style:none;margin:0;padding:0 0 6px;}
.leque-item{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;
  padding:7px 18px;font-family:var(--font-body);font-size:.85rem;
  border-top:1px solid var(--linha);}
.leque-item:first-child{border-top:0;}
/* Aulas com <details> interno: o padding sai do summary, não do <li> */
.leque-item:has(.leque-aula-det){display:block;padding:0;}
.leque-aula-sum{padding:7px 18px;}

.leque-pgs{
  flex:0 0 86px;font-family:var(--font-stamp);font-size:.6rem;
  letter-spacing:.1em;color:var(--marrom);text-transform:uppercase;white-space:nowrap;}
.leque-aula-nr{
  flex:0 0 52px;font-family:var(--font-stamp);font-size:.6rem;
  letter-spacing:.1em;color:var(--verde);text-transform:uppercase;white-space:nowrap;}
.leque-tema{flex:1 1 180px;color:var(--carvao);}
.leque-tema-vazia{color:var(--marrom);opacity:.45;font-style:italic;}
.leque-data{flex:0 0 auto;font-size:.78rem;color:var(--marrom);opacity:.7;white-space:nowrap;}
.leque-acoes{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap;}

.leque-futura{opacity:.5;}
.leque-devoir{background:transparent;}
.leque-nota-devoir{
  font-family:var(--font-stamp);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--terracota);opacity:.7;font-style:normal;}

.leque-contagem{
  font-family:var(--font-ui);font-size:.7rem;color:var(--marrom);
  opacity:.65;white-space:nowrap;}
.leque-sem-resumo{
  font-family:var(--font-ui);font-size:.73rem;color:var(--marrom);opacity:.5;font-style:italic;}

@media (max-width:600px){
  .leque-pgs{flex:0 0 70px;}
  .leque-aula-nr{flex:0 0 44px;}
  .leque-tema{flex:1 1 100%;}
  .leque-acoes{flex:0 0 100%;}
}