/* language: CSS, file: web/public/estilo.css
   Diario Facil SC — identidade visual unica para pagina de vendas e painel.
   Paleta: verde-seducao profundo (confianca institucional) + verde-menta de
   acento (o "facil" do nome). Tipografia grande, espaco generoso, contraste
   alto: a maioria dos professores abre isto no celular, entre duas aulas. */

:root {
  --verde-900: #06281D;
  --verde-800: #0B3D2E;
  --verde-700: #12543E;
  --verde-600: #1A6B4F;
  --menta-400: #7CE0B0;
  --menta-300: #A5EDCB;
  --menta-100: #E4F8EF;

  --tinta: #12211C;
  --tinta-media: #4A5F57;
  --tinta-clara: #7C8F87;
  --papel: #FFFFFF;
  --papel-fundo: #F5F8F6;
  --borda: #DFE7E3;

  --alerta: #B4401F;
  --alerta-fundo: #FDF1EC;
  --ok: #146B47;
  --ok-fundo: #E8F6EF;
  --aviso: #8A5B14;
  --aviso-fundo: #FDF6E7;

  --raio: 14px;
  --raio-g: 22px;
  --sombra-1: 0 1px 2px rgba(6, 40, 29, .06), 0 4px 14px rgba(6, 40, 29, .05);
  --sombra-2: 0 2px 6px rgba(6, 40, 29, .08), 0 18px 46px rgba(6, 40, 29, .12);
  --largura: 1120px;
  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* `display: inline-flex` nos botoes vence o `[hidden]` do user-agent, entao
   qualquer elemento com a classe .botao continuava visivel mesmo com hidden.
   Esta regra devolve ao atributo o poder de esconder. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -.022em; margin: 0; font-weight: 750; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.12rem; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
em { font-style: normal; color: var(--verde-600); }
i { font-style: normal; }

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

.topo {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px max(20px, calc((100vw - var(--largura)) / 2));
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borda);
}

.marca { display: flex; align-items: center; gap: 10px; }
.marca-simbolo {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--verde-800); color: var(--menta-400);
}
.marca-simbolo svg { width: 20px; height: 20px; }
.marca-nome { font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; display: inline-flex; align-items: baseline; gap: 7px; }
.marca-nome b { font-weight: 800; }
/* "SC" e a sigla do estado, nao um sufixo truncado: precisa de peso e corpo
   maiores que um <i> comum para ler como selo, e nao como resto de palavra. */
.marca-nome i {
  color: var(--verde-700); font-weight: 800; font-size: .82rem;
  letter-spacing: .1em; padding: 2px 7px; border-radius: 6px;
  background: var(--menta-100); border: 1px solid #C7EBDA;
}
.app-topo .marca-nome i { color: var(--verde-900); background: var(--menta-400); border-color: transparent; }

.topo-nav { display: flex; align-items: center; gap: 26px; font-size: .95rem; font-weight: 550; }
.topo-nav a:not(.botao) { color: var(--tinta-media); }
.topo-nav a:not(.botao):hover { color: var(--verde-700); }

/* ------------------------------------------------------------------ botoes */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 1px solid transparent; border-radius: 10px;
  font-family: inherit; font-size: .95rem; font-weight: 650; cursor: pointer;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
  white-space: nowrap;
}
.botao:active { transform: translateY(1px); }
.botao-primario { background: var(--verde-700); color: #fff; box-shadow: var(--sombra-1); }
.botao-primario:hover { background: var(--verde-600); box-shadow: var(--sombra-2); }
.botao-claro { background: var(--verde-800); color: #fff; }
.botao-claro:hover { background: var(--verde-700); }
.botao-fantasma { background: transparent; color: var(--verde-800); border-color: #B9C9C2; }
.botao-fantasma:hover { background: var(--menta-100); border-color: var(--verde-600); }
.botao-grande { padding: 15px 28px; font-size: 1.02rem; border-radius: 12px; }
.botao-largo { width: 100%; }
.botao-perigo { background: transparent; color: var(--alerta); border-color: #EBCFC5; }
.botao-perigo:hover { background: var(--alerta-fundo); }
.botao:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------------ capa */

.capa {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center;
  max-width: var(--largura); margin: 0 auto; padding: 68px 20px 84px;
}
.selo {
  display: inline-block; padding: 5px 13px; margin-bottom: 20px;
  background: var(--menta-100); color: var(--verde-700);
  border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .01em;
}
.capa-sub { margin-top: 22px; font-size: 1.12rem; color: #3C5148; max-width: 33em; }
.capa-acoes { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.capa-nota { margin-top: 16px; font-size: .88rem; color: #6A7D75; }

/* Dito aqui em cima, onde a duvida nasce, e nao so no rodape. Um professor que
   acha que isto e produto oficial da SED se decepciona depois — e a decepcao
   custa mais que a venda. */
.capa-independente {
  margin-top: 20px; padding: 11px 15px; border-radius: 10px;
  background: var(--papel-fundo); border-left: 3px solid var(--tinta-clara);
  font-size: .85rem; color: var(--tinta-media);
}

/* A segunda linha do titulo e a promessa, nao o gancho: precisa de menos corpo
   para a primeira dominar a leitura em vez de competir com ela. */
.capa-texto h1 em { display: block; font-size: .72em; line-height: 1.28; margin-top: 8px; }

.capa-demo {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px; border-radius: var(--raio-g);
  background: linear-gradient(160deg, var(--verde-800), var(--verde-900));
  box-shadow: var(--sombra-2);
}
.balao { padding: 14px 17px; border-radius: 16px; font-size: .95rem; }
.balao time { display: block; margin-top: 6px; font-size: .72rem; opacity: .6; }
.balao-voce { background: #fff; color: var(--tinta); border-bottom-right-radius: 5px; align-self: flex-end; max-width: 92%; }
.balao-sistema { background: rgba(255,255,255,.10); color: #EAF6F1; border: 1px solid rgba(124,224,176,.28); border-bottom-left-radius: 5px; max-width: 92%; }
.balao-titulo { font-weight: 700; margin-bottom: 9px; color: var(--menta-300); }
.balao-ok { display: flex; gap: 11px; align-items: flex-start; background: var(--menta-100); color: var(--verde-800); }
.lista-plano { display: flex; flex-direction: column; gap: 7px; font-size: .9rem; }
.lista-plano li { padding-left: 15px; position: relative; }
.lista-plano li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--menta-400); }
.balao-acoes { display: flex; gap: 8px; margin-top: 13px; }
.pilula { padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .8rem; font-weight: 650; }
.pilula-ok { background: var(--menta-400); color: var(--verde-900); }
.check { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; margin-top: 1px; }
.check svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ faixa */

.faixa {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--borda); border-block: 1px solid var(--borda);
}
.faixa-item { background: var(--papel-fundo); padding: 26px 20px; text-align: center; }
.faixa-item b { display: block; font-size: 1.9rem; font-weight: 800; color: var(--verde-700); letter-spacing: -.03em; }
.faixa-item span { display: block; margin-top: 5px; font-size: .92rem; font-weight: 500; color: #3C5148; }

/* ------------------------------------------------------------------ secoes */

.secao { max-width: var(--largura); margin: 0 auto; padding: 82px 20px; }
.secao-sub { margin-top: 14px; font-size: 1.08rem; color: var(--tinta-media); max-width: 42em; }
.secao h2 + .grade-3, .secao h2 + .grade-2, .secao-sub + .grade-3, .secao-sub + .grade-2 { margin-top: 40px; }

.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.cartao {
  padding: 26px; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--papel); box-shadow: var(--sombra-1);
}
.cartao h3 { margin-bottom: 9px; }
.cartao p { color: var(--tinta-media); font-size: .96rem; }
.cartao-ok { border-top: 3px solid var(--ok); }
.cartao-nao { border-top: 3px solid var(--tinta-clara); }

.lista-check, .lista-x { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font-size: .95rem; }
.lista-check li, .lista-x li { padding-left: 26px; position: relative; color: var(--tinta-media); }
.lista-check li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--ok); font-weight: 800;
}
.lista-x li::before {
  content: "✕"; position: absolute; left: 0; top: 0;
  color: var(--tinta-clara); font-weight: 800;
}

/* --------------------------------------------------------------- assinatura */

/* Faixa de situacao no topo do painel. Fica acima de tudo porque e a primeira
   coisa que o professor precisa saber: o teste esta acabando, ou acabou. */
.faixa-plano {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--raio); margin-bottom: 16px;
  font-size: .94rem; font-weight: 600;
}
.faixa-aviso { background: var(--aviso-fundo); border: 1px solid #EDDCB4; color: var(--aviso); }
.faixa-erro { background: var(--alerta-fundo); border: 1px solid #EBCFC5; color: var(--alerta); }
.faixa-plano .botao { padding: 9px 18px; font-size: .9rem; }

.situacao-plano { font-size: 1.05rem; font-weight: 600; color: var(--tinta); }
.acoes-assinar { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }

.pix-area { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; margin-top: 16px; }
.pix-area img {
  width: 210px; height: 210px; padding: 10px; background: #fff;
  border: 1px solid var(--borda); border-radius: var(--raio);
}
.pix-lado { flex: 1 1 280px; min-width: 260px; }
.pix-valor { font-size: 1.5rem; font-weight: 800; color: var(--verde-700); margin-bottom: 14px; }
.pix-rotulo { display: block; font-size: .82rem; color: var(--tinta-clara); margin-bottom: 6px; }
#pix-codigo {
  width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .76rem; line-height: 1.5; word-break: break-all;
  padding: 11px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--papel-fundo); color: var(--tinta-media); resize: vertical;
}

.lista-pagamentos { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.linha-pagamento {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--borda); font-size: .93rem;
}
.linha-pagamento:last-child { border-bottom: none; }
.etiqueta {
  padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700;
}
.etiqueta-ok { background: var(--ok-fundo); color: var(--ok); }
.etiqueta-neutra { background: var(--papel-fundo); color: var(--tinta-clara); }

/* ------------------------------------------------------- app instalavel */

/* Convite para instalar. Fica no topo do painel, com acao clara e um "agora
   nao" que o professor pode tocar sem culpa. */
#faixa-instalar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 15px 18px; border-radius: var(--raio); margin-bottom: 16px;
  background: linear-gradient(135deg, #0B3D2E 0%, #14563F 100%);
  color: #fff;
}
.instalar-texto { display: flex; flex-direction: column; gap: 3px; flex: 1 1 300px; }
.instalar-texto strong { font-size: .98rem; }
.instalar-texto span { font-size: .86rem; color: rgba(255,255,255,.82); line-height: 1.5; }
.instalar-texto b { color: var(--verde-claro); }
.instalar-acoes { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
#faixa-instalar .botao-primario { background: var(--verde-claro); color: var(--verde-900); }
#faixa-instalar .botao-fantasma {
  color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); background: transparent;
}
#faixa-instalar .botao-fantasma:hover { background: rgba(255,255,255,.1); }

/* Quando o app roda instalado, a faixa nunca aparece — mas se aparecer, o
   padding extra respeita o notch do iPhone. */
@media (display-mode: standalone) {
  body.app-corpo { padding-top: env(safe-area-inset-top); }
}

/* Dizer onde o produto pode falhar vende mais do que esconder: o professor ja
   desconfia de promessa perfeita, e o risco aqui e real e conhecido. */
.risco {
  margin-top: 26px; padding: 26px 28px; border-radius: var(--raio);
  background: var(--aviso-fundo); border: 1px solid #EDDCB4;
}
.risco h3 { color: var(--aviso); margin-bottom: 12px; }
.risco p { color: #6B4A12; font-size: .96rem; }
.risco p + p { margin-top: 11px; }
.risco b { color: var(--aviso); }

/* ------------------------------------------------------------------ como funciona */

.secao-escura {
  max-width: none; background: var(--verde-900); color: #EAF6F1;
  padding-inline: max(20px, calc((100vw - var(--largura)) / 2));
}
.secao-escura .secao-sub { color: #A9C6BB; }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; counter-reset: p; }
.passos li { padding: 26px; border-radius: var(--raio); background: rgba(255,255,255,.05); border: 1px solid rgba(124,224,176,.18); }
.passo-num {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 15px;
  border-radius: 10px; background: var(--menta-400); color: var(--verde-900);
  font-weight: 800; font-size: 1rem;
}
.passos h3 { margin-bottom: 8px; }
.passos p { color: #A9C6BB; font-size: .95rem; }

.destaque {
  margin-top: 40px; padding: 30px; border-radius: var(--raio);
  background: linear-gradient(120deg, rgba(124,224,176,.14), rgba(124,224,176,.04));
  border: 1px solid rgba(124,224,176,.3);
}
.destaque h3 { color: var(--menta-300); margin-bottom: 10px; }
.destaque p { color: #CFE5DB; }

/* A prova mais forte que este produto tem nao e depoimento: e mostrar o relato
   virando registro. Um professor reconhece a propria frase ali na hora. */
.antes-depois {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px;
  align-items: stretch; margin-top: 40px;
}
.ad-caixa {
  padding: 24px; border-radius: var(--raio);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
}
.ad-caixa-ok { border-color: rgba(124,224,176,.4); background: rgba(124,224,176,.07); }
.ad-rotulo {
  margin-bottom: 12px; font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #8FB3A6;
}
.ad-caixa-ok .ad-rotulo { color: var(--menta-400); }
.ad-texto { color: #EAF6F1; font-size: 1rem; line-height: 1.65; }
.ad-diario {
  margin-top: 14px; padding: 13px 15px; border-radius: 10px;
  background: rgba(0,0,0,.24); color: #CFE5DB;
  font-size: .9rem; line-height: 1.6; font-style: italic;
}
.ad-conferido { margin-top: 13px; font-size: .85rem; font-weight: 700; color: var(--menta-400); }
.ad-seta {
  display: grid; place-items: center; font-size: 1.7rem;
  color: var(--menta-400); font-weight: 700;
}

/* ------------------------------------------------------------------ preco */

.caixa-preco {
  max-width: 480px; margin: 0 auto; padding: 40px 34px; text-align: center;
  border: 1px solid var(--borda); border-radius: var(--raio-g);
  background: var(--papel); box-shadow: var(--sombra-2);
}
.preco { margin: 14px 0 26px; font-weight: 800; color: var(--verde-800); letter-spacing: -.04em; line-height: 1; }
.preco .cifrao { font-size: 1.5rem; vertical-align: top; margin-right: 3px; }
.preco { font-size: 4.2rem; display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.preco .centavos { font-size: 1.9rem; }
.preco .periodo { font-size: 1rem; font-weight: 600; color: var(--tinta-clara); letter-spacing: 0; margin-left: 6px; }
.lista-preco { text-align: left; margin-bottom: 28px; }

/* ------------------------------------------------------------------ final + rodape */

.secao-final { text-align: center; padding-block: 96px; }
.secao-final p { margin: 16px auto 30px; color: var(--tinta-media); max-width: 34em; }

.rodape {
  display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  padding: 40px max(20px, calc((100vw - var(--largura)) / 2));
  background: var(--papel-fundo); border-top: 1px solid var(--borda);
}
.rodape-nota { margin-top: 10px; max-width: 44em; font-size: .84rem; color: var(--tinta-clara); }
.rodape-nav { display: flex; gap: 22px; font-size: .93rem; font-weight: 550; color: var(--tinta-media); }
.rodape-nav a:hover { color: var(--verde-700); }

/* ------------------------------------------------------------------ painel */

.app-corpo { background: var(--papel-fundo); min-height: 100vh; }

.app-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px max(16px, calc((100vw - 1000px) / 2));
  background: var(--verde-800); color: #fff;
}
.app-topo .marca-simbolo { background: rgba(255,255,255,.12); }
.app-topo .marca-nome i { color: var(--menta-400); }
.app-topo .topo-nav a:not(.botao) { color: #B9D6CB; }
.app-topo .botao-claro { background: rgba(255,255,255,.14); }
.app-topo .botao-claro:hover { background: rgba(255,255,255,.22); }

.app-main { max-width: 1000px; margin: 0 auto; padding: 30px 16px 80px; }
.app-main.estreito { max-width: 480px; }

.cartao-app {
  padding: 26px; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--papel); box-shadow: var(--sombra-1); margin-bottom: 20px;
}
.cartao-app > h2 { font-size: 1.28rem; margin-bottom: 6px; }
.cartao-app > .ajuda { font-size: .92rem; color: var(--tinta-media); margin-bottom: 20px; }

.campo { margin-bottom: 16px; }
.campo label { display: block; margin-bottom: 6px; font-size: .88rem; font-weight: 650; color: var(--tinta); }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 1rem;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda); border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--verde-600);
  box-shadow: 0 0 0 3px rgba(26, 107, 79, .13);
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.campo .dica { margin-top: 6px; font-size: .82rem; color: var(--tinta-clara); }

/* O professor de escola publica manda audio, nao texto. O microfone fica
   sobreposto ao canto do campo, no lugar onde o polegar ja esta. */
.campo-relato { position: relative; }
.campo-relato textarea { padding-bottom: 58px; }
.gravador { position: absolute; right: 10px; bottom: 10px; }
.botao-microfone {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--verde-700); color: #fff;
  box-shadow: 0 2px 10px rgba(6,40,29,.22);
  transition: background .15s, transform .12s;
}
.botao-microfone:hover { background: var(--verde-600); transform: scale(1.05); }
.botao-microfone:active { transform: scale(.97); }
.botao-microfone svg { width: 21px; height: 21px; }
.botao-microfone.ativo { background: var(--alerta); }

.gravando {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 12px 15px; border-radius: 10px;
  background: var(--alerta-fundo); border: 1px solid #EBCFC5;
  font-size: .92rem; color: var(--alerta); font-weight: 600;
}
.gravando .botao { margin-left: auto; padding: 7px 14px; font-size: .87rem; }
.pulso {
  width: 11px; height: 11px; border-radius: 50%; background: var(--alerta);
  animation: pulsar 1.1s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.72); }
}

/* Digitar a senha do sistema da SED no celular, sem ver o que se digita, e a
   origem mais comum de "nao consigo conectar". O botao Mostrar resolve. */
.campo-senha { position: relative; display: flex; }
.campo-senha input { padding-right: 92px; }
.ver-senha {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 7px 12px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--papel-fundo); color: var(--verde-700);
  font-family: inherit; font-size: .82rem; font-weight: 700;
}
.ver-senha:hover { background: var(--menta-100); }

.aviso {
  padding: 13px 16px; border-radius: 10px; font-size: .92rem;
  margin-bottom: 16px; border: 1px solid transparent;
}
.aviso-erro { background: var(--alerta-fundo); border-color: #EBCFC5; color: var(--alerta); }
.aviso-ok { background: var(--ok-fundo); border-color: #BFE3D1; color: var(--ok); }
.aviso-atencao { background: var(--aviso-fundo); border-color: #EDDCB4; color: var(--aviso); }
.aviso-info { background: var(--menta-100); border-color: #C7EBDA; color: var(--verde-700); }

.linha-turmas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip-turma {
  padding: 8px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  background: var(--menta-100); color: var(--verde-700); border: 1px solid #C7EBDA;
}

.tabela { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabela th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--borda); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-clara); }
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:last-child td { border-bottom: none; }

.etiqueta { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.etiqueta-ok { background: var(--ok-fundo); color: var(--ok); }
.etiqueta-erro { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta-neutra { background: var(--papel-fundo); color: var(--tinta-media); }

.vazio { padding: 40px 20px; text-align: center; color: var(--tinta-clara); font-size: .95rem; }

.carregando { display: inline-flex; align-items: center; gap: 9px; color: var(--tinta-media); font-size: .93rem; }
.gira {
  width: 15px; height: 15px; border: 2px solid var(--borda);
  border-top-color: var(--verde-600); border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.abas { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--borda); }
.aba {
  padding: 11px 18px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--tinta-media);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.aba.ativa { color: var(--verde-700); border-bottom-color: var(--verde-700); }

/* ------------------------------------------------------------- meu dia
   A tela que o professor abre na porta da sala. Foi desenhada para o celular
   primeiro: alvos grandes, pouco texto, o botao de lancar sempre visivel. */

#aba-dia { padding-bottom: 8px; }

.dia-cabecalho { margin-bottom: 18px; }
.dia-cabecalho h2 { font-size: 1.45rem; letter-spacing: -.02em; }
.dia-cabecalho .ajuda { margin-top: 5px; font-size: .93rem; color: var(--tinta-media); }

/* Avisos e progresso: faixas no topo, antes das turmas. */
.faixa-dia {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 17px; border-radius: var(--raio); margin-bottom: 13px;
  font-size: .92rem; line-height: 1.45;
}
.faixa-dia strong { font-weight: 700; }
.faixa-dia span { color: inherit; opacity: .88; }

.faixa-ok { background: var(--ok-fundo); border: 1px solid #BFE3D1; color: var(--ok); }
.faixa-aviso { background: var(--aviso-fundo); border: 1px solid #EDDCB4; color: var(--aviso); }
.faixa-atencao { background: var(--alerta-fundo); border: 1px solid #EBCFC5; color: var(--alerta); }
.faixa-neutro { background: var(--papel-fundo); border: 1px solid var(--borda); color: var(--tinta-media); }

/* Cartao da turma: o item que o professor toca. */
.cartao-turma { padding: 20px 22px; }
.cartao-turma:last-child { margin-bottom: 8px; }

.turma-topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 12px;
}
.turma-nome { font-size: 1.18rem; letter-spacing: -.01em; margin-bottom: 3px; }
.turma-topo .ajuda { margin: 0; font-size: .87rem; color: var(--tinta-media); }

.turma-alunos {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 999px;
  background: var(--menta-100); color: var(--verde-700);
  font-size: .8rem; font-weight: 700; white-space: nowrap;
}

.turma-marcas { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }

.turma-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.turma-acoes .botao { flex: 1 1 auto; }

.etiqueta-aviso { background: var(--aviso-fundo); color: var(--aviso); }

/* Lista de alunos em risco. */
.lista-risco { display: flex; flex-direction: column; gap: 2px; }
.linha-risco {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.linha-risco:last-child { border-bottom: none; }
.linha-risco strong { font-weight: 650; font-size: .96rem; }
.risco-turma { display: block; margin-top: 2px; font-size: .8rem; color: var(--tinta-clara); }
.risco-motivo {
  flex: 0 1 auto; text-align: right;
  font-size: .85rem; color: var(--aviso);
}

/* ------------------------------------------------------------- tela da turma
   A lista de chamada. Cada aluno e um alvo grande, porque o professor marca
   isso em pe, na porta da sala, muitas vezes com o celular numa mao so. */

.lista-alunos { display: flex; flex-direction: column; gap: 7px; }

.aluno {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 15px 17px;
  border: 1px solid var(--borda); border-radius: 12px;
  background: var(--papel); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 1rem; color: var(--tinta);
  transition: background .12s, border-color .12s, transform .06s;
}
.aluno:active { transform: scale(.985); }

.aluno-nome { flex: 1 1 auto; font-weight: 550; line-height: 1.3; }

/* A marca e o unico lugar onde a cor importa. Verde = presente, vermelho =
   falta, ambar = justificada. O professor bate o olho e sabe. */
.aluno-marca {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-weight: 800; font-size: .9rem; letter-spacing: .02em;
}

.aluno-presente { background: var(--ok-fundo); border-color: #BFE3D1; }
.aluno-presente .aluno-marca { background: var(--ok); color: #fff; }

.aluno-falta { background: var(--alerta-fundo); border-color: #EBCFC5; }
.aluno-falta .aluno-marca { background: var(--alerta); color: #fff; }

.aluno-justificada { background: var(--aviso-fundo); border-color: #EDDCB4; }
.aluno-justificada .aluno-marca { background: var(--aviso); color: #fff; }

.cartao-gravar { border-top: 3px solid var(--verde-600); }

.resumo-lancamento { margin: 6px 0 20px; }
.linha-resumo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: .95rem;
}
.linha-resumo:last-child { border-bottom: none; }
.linha-resumo span { color: var(--tinta-media); }
.linha-resumo strong { font-weight: 700; }

@media (max-width: 560px) {
  .aluno { padding: 17px 16px; }
}

@media (max-width: 560px) {
  .turma-topo { flex-direction: column; gap: 8px; }
  .turma-alunos { align-self: flex-start; }
  .linha-risco { flex-direction: column; gap: 4px; }
  .risco-motivo { text-align: left; }
  .turma-acoes .botao { flex: 1 1 100%; }
}

.plano-preview { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; margin: 18px 0; }
.plano-preview-cab { padding: 12px 16px; background: var(--papel-fundo); border-bottom: 1px solid var(--borda); font-size: .88rem; font-weight: 650; color: var(--tinta-media); }
.plano-preview-corpo { padding: 16px; }
.plano-item { padding: 12px 0; border-bottom: 1px dashed var(--borda); }
.plano-item:last-child { border-bottom: none; }
.plano-item b { color: var(--verde-700); }
.plano-item p { margin-top: 5px; font-size: .92rem; color: var(--tinta-media); }

/* ------------------------------------------------------------------ responsivo */

@media (max-width: 900px) {
  .capa { grid-template-columns: 1fr; gap: 40px; padding-top: 44px; padding-bottom: 56px; }
  .grade-3, .passos { grid-template-columns: 1fr; }
  .grade-2 { grid-template-columns: 1fr; }
  .faixa { grid-template-columns: repeat(2, 1fr); }
  .topo-nav a:not(.botao) { display: none; }
  .secao { padding-block: 58px; }
  /* A seta vira para baixo: na vertical, "->" apontando para o lado nao diz
     nada e ainda ocupa uma linha inteira. */
  .antes-depois { grid-template-columns: 1fr; gap: 14px; }
  .ad-seta { font-size: 1.4rem; transform: rotate(90deg); }
}

@media (max-width: 560px) {
  .topo { padding: 12px 16px; }
  .marca-nome { font-size: .98rem; }
  .capa-acoes .botao { width: 100%; }
  .faixa-item b { font-size: 1.5rem; }
  .preco { font-size: 3.2rem; }
  .caixa-preco { padding: 30px 22px; }
  .cartao-app { padding: 20px; }
  .abas { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}