/* ============================================================
   Sala de Matemática · Método Neon
   Só o que esta sala usa. Letras, cores e a capa vêm do estilo.css.
   ============================================================ */

.folha p{ line-height:1.78; }
.folha li{ line-height:1.7; margin:8px 0; }

.chave{
  border-left:3px solid var(--azul); padding:6px 0 6px 18px;
  margin:20px 0 8px; font-weight:600; max-width:62ch;
}
.aula h4{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--azul);
  margin:36px 0 6px;
}
.aula h4 + p{ margin-top:0; }

/* A conta escrita em destaque, no meio do texto. */
.mat{
  font-family:var(--serif); font-size:20px; line-height:1.8;
  margin:12px 0; padding:10px 16px; overflow-x:auto;
  background:var(--caixa); border:1px solid var(--linha); border-radius:4px;
}
.mat b{ color:var(--tinta); }

/* ---------- ERRO → CORREÇÃO ---------- */
.correcao{ margin:22px 0; border:1px solid var(--linha); border-radius:4px; overflow:hidden; background:var(--caixa); }
.correcao > div{ padding:12px 16px; }
.correcao .errado{ border-left:4px solid var(--vermelho); }
.correcao .certo{ border-left:4px solid var(--verde); border-top:1px solid var(--linha); }
.correcao b.rot{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:2px; }
.correcao .errado b.rot{ color:var(--vermelho); }
.correcao .certo b.rot{ color:var(--verde); }
.correcao p{ margin:4px 0; }

/* ---------- TABELAS ---------- */
.tab-wrap{ overflow-x:auto; }
table.tab{ border-collapse:collapse; margin:12px 0; font-size:16px; }
table.tab th, table.tab td{ padding:7px 16px 7px 0; border-bottom:1px solid var(--linha); text-align:left; vertical-align:top; }
table.tab th{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fraco); font-weight:400; }
table.tab td.n{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- DESENHOS INTERATIVOS ---------- */
.lab{ margin:26px 0 12px; padding:18px 18px 14px; border:1px solid var(--linha); border-radius:6px; background:var(--caixa); }
.lab .lab-tit{ font-weight:700; font-size:17px; margin:0; }
.lab .lab-sub{ font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--fraco); margin:3px 0 14px; }
.lab svg{ display:block; width:100%; height:auto; max-width:640px; margin:0 auto; color:var(--tinta); }
.lab svg text{ font-family:var(--mono); font-size:12px; fill:var(--dim); }
.controles{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:14px 0 4px; font-family:var(--mono); font-size:13px; }
.controles label{ display:flex; align-items:center; gap:10px; flex:1 1 260px; }
.controles input[type=range]{ flex:1; accent-color:var(--azul); }
.controles select{ font-family:var(--mono); font-size:14px; padding:4px 6px; }
.controles button, .chip{
  font-family:var(--mono); font-size:13px; padding:6px 13px; border-radius:999px;
  border:1.5px solid var(--linha-forte); background:var(--papel); color:var(--tinta); cursor:pointer;
}
.controles button:hover, .chip:hover{ border-color:var(--azul); }
.chip[aria-pressed="true"], .controles button[aria-pressed="true"]{ background:var(--tinta); color:var(--papel); border-color:var(--tinta); }
.leitura{ font-family:var(--mono); font-size:14.5px; margin:10px 0 0; line-height:1.75; }
.leitura b{ font-size:17px; color:var(--tinta); }
.grande{ font-family:var(--serif); font-size:52px; font-weight:700; text-align:center; margin:6px 0; font-variant-numeric:tabular-nums; }

/* ---------- EXERCÍCIOS E FECHO ---------- */
.exercicios{ margin:28px 0 8px; padding:14px 18px; border:1px dashed var(--linha-forte); border-radius:6px; }
.exercicios > b.rot, .pra-levar > b.rot{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }
.exercicios > b.rot{ color:var(--fraco); }
.exercicios ol{ margin:6px 0; padding-left:22px; }
.exercicios details{ margin-top:10px; font-family:var(--mono); font-size:13px; line-height:1.7; }
.exercicios summary{ cursor:pointer; color:var(--azul); }
.pra-levar{ margin-top:34px; padding:16px 18px; border-radius:6px; background:rgba(42,120,214,.07); border:1px solid rgba(42,120,214,.28); }
.pra-levar > b.rot{ color:var(--azul); }
.pra-levar p{ margin:0; font-size:18px; }

/* ---------- LISTA DE AULAS (entrada da sala) ---------- */
ol.lista-aulas{ list-style:none; padding:0; margin:18px 0 0; border-top:1px solid var(--linha); }
ol.lista-aulas li{ margin:0; border-bottom:1px solid var(--linha); }
ol.lista-aulas a{ display:grid; grid-template-columns:52px 1fr auto; gap:0 16px; align-items:baseline; padding:18px 0; color:inherit; text-decoration:none; }
ol.lista-aulas .num{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--azul); }
ol.lista-aulas .nome{ display:block; font-size:21px; font-weight:600; }
ol.lista-aulas .fina{ display:block; color:var(--dim); font-size:16px; margin-top:2px; }
ol.lista-aulas .seta{ font-family:var(--mono); font-size:12.5px; color:var(--fraco); }
ol.lista-aulas a:hover .nome{ color:var(--azul); }

/* ---------- CÁLCULO COMPLETO (o mesmo molde da sala de energia) ---------- */
.calculo{ margin:24px 0 14px; padding:18px 20px 16px; background:var(--caixa);
  border:1px solid var(--linha); border-left:4px solid var(--verde); border-radius:4px; }
.calculo .calc-tit{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--verde); margin:0 0 8px; }
.calculo ol{ list-style:none; padding:0; margin:0; }
.calculo ol > li{ display:grid; grid-template-columns:170px 1fr; gap:4px 18px; margin:0; padding:11px 0; border-top:1px solid var(--linha); }
.calculo ol > li > b{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--tinta); line-height:1.5; padding-top:5px; }
.calculo ol > li > div > p{ margin:0; }
.calculo .eq{ font-family:var(--serif); font-size:18px; line-height:1.75; margin:0; }
.calculo .eq b{ font-weight:700; color:var(--tinta); }
.calculo ul.dados{ margin:0; padding-left:18px; }
.calculo ul.dados li{ margin:3px 0; line-height:1.6; }
.calculo .resposta{ margin:14px 0 0; padding:12px 16px; font-size:19px; line-height:1.5;
  border:2px solid var(--verde); border-radius:4px; background:rgba(0,131,0,.06); }
.calculo .confere{ margin:10px 0 0; font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--dim); }
.calculo .confere b{ color:var(--verde); }

/* ---------- REGRA DE SINAIS ---------- */
.sinais{ display:grid; grid-template-columns:repeat(3,64px); gap:6px; margin:16px 0 6px; font-family:var(--mono); font-size:26px; font-weight:700; text-align:center; }
.sinais span{ line-height:60px; border-radius:6px; }
.sinais .canto{ color:var(--fraco); font-size:20px; }
.sinais .cab{ background:var(--caixa); border:1px solid var(--linha); color:var(--tinta); }
.sinais .mais{ background:rgba(0,131,0,.12); border:2px solid #008300; color:#006600; }
.sinais .menos{ background:rgba(227,73,72,.12); border:2px solid #e34948; color:#b3261e; }
.sinais-leg{ font-family:var(--mono); font-size:13px; color:var(--dim); margin:4px 0 14px; }
.sinais-leg b.mais{ color:#006600; } .sinais-leg b.menos{ color:#b3261e; }

/* ---------- TABUADA ---------- */
.tabuada{ display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:3px; max-width:560px; margin:0 auto; font-family:var(--mono); font-size:14px; }
.tabuada span, .tabuada button{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:4px; min-width:0; }
.tabuada .cab, .tabuada .canto{ color:var(--fraco); font-weight:700; }
.tabuada button{ font:inherit; padding:0; border:1px solid var(--linha); background:var(--papel); color:var(--tinta); cursor:pointer; }
.tabuada button:hover{ border-color:var(--azul); }
.tabuada button.dentro{ background:rgba(42,120,214,.16); border-color:rgba(42,120,214,.45); }
.tabuada button.alvo{ background:#2a78d6; border-color:#2a78d6; color:#ffffff; font-weight:700; }
.chips-tab{ display:flex; flex-wrap:wrap; gap:6px; }

/* ---------- MENU DE TODAS AS AULAS DE MATEMÁTICA ---------- */
.menu-mat{ margin:6px 0 34px; padding:16px 18px; border:1px solid var(--linha); border-radius:6px; background:var(--caixa); }
.menu-mat > b.rot{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#5b3fc4; margin-bottom:12px; }
.menu-mat .colunas{ display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; }
.menu-mat h3{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 6px; }
.menu-mat h3 a{ color:var(--tinta); }
.menu-mat h3 .aqui{ font-weight:400; color:var(--fraco); text-transform:none; letter-spacing:0; }
.menu-mat p.grupo{ font-family:var(--mono); font-size:11px; color:var(--fraco); margin:10px 0 2px; }
.menu-mat ol{ list-style:none; margin:0; padding:0; }
.menu-mat li{ margin:0; }
.menu-mat li a{ display:flex; gap:9px; padding:4px 0; color:var(--tinta); text-decoration:none; font-size:15.5px; line-height:1.35; }
.menu-mat li a:hover, .menu-mat li a:focus-visible{ color:var(--azul); text-decoration:underline; text-underline-offset:3px; }
.menu-mat .num{ font-family:var(--mono); font-size:11px; color:var(--fraco); flex:none; padding-top:3px; }

/* ---------- FOTO DO QUADRO ---------- */
.foto-quadro{ margin:24px 0; }
.foto-quadro img{ display:block; width:100%; height:auto; border-radius:6px; border:1px solid var(--linha); }
.foto-quadro figcaption{ font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--dim); margin-top:8px; }

@media (max-width:600px){
  .mat{ font-size:17.5px; }
  .grande{ font-size:40px; }
  .calculo{ padding:14px 12px; }
  .calculo ol > li{ grid-template-columns:1fr; gap:4px; }
  .calculo ol > li > b{ padding-top:0; }
  .calculo .eq{ font-size:16.5px; }
  .calculo .resposta{ font-size:17px; }
  ol.lista-aulas a{ grid-template-columns:36px 1fr; }
  ol.lista-aulas .seta{ display:none; }
  .tabuada{ font-size:11px; gap:2px; }
  .menu-mat .colunas{ grid-template-columns:1fr; }
}