/* Aula Pronta — app da professora na identidade nova (caderno). Carrega DEPOIS de base.css, componentes.css e app.css:
   troca os tokens (cores, fontes, raios, sombras) e refina as peças. Os nomes antigos (--brand, --accent...) continuam valendo. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fontes/BricolageGrotesque-latim.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fontes/InstrumentSans-latim.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fontes/JetBrainsMono-latim.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --papel: #F6F8F1; --papel-2: #E8EBE6; --creme: #F1F4EC; --branco: #FFFFFF; --linha: rgba(12, 43, 33, .14); --linha-2: rgba(12, 43, 33, .32); --lousa: #0C2B21;
  --tinta: #0C2B21; --tinta-2: #4F6259; --tinta-3: #5A6B62;
  --verde: #0C2B21; --verde-2: #07190F; --verde-claro: #FFF3B8;
  --laranja: #FFE14A; --laranja-2: #0C2B21; --laranja-claro: #FFF3B8;
  --visto: #FFE14A; --visto-claro: #FFF3B8;
  --ok: #0F5C33; --ok-claro: #D7EFE0; --erro: #B3350F; --erro-claro: #FFE3CF; --ambar: #9A4208; --ambar-claro: #FFE3CF;
  --folha: #1E9E5A; --manga: #FF7A2F; --piscina: #2B9BB8;

  --font-logo: "Bricolage Grotesque", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-nota: "Bricolage Grotesque", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-sm: 8px; --radius-md: 14px; --radius: 18px; --radius-lg: 24px;
  --shadow-sm: none; --shadow: 0 4px 0 var(--tinta); --shadow-lg: 0 6px 0 var(--tinta); --shadow-modal: 0 8px 0 var(--tinta);
  --shadow-accent: 0 4px 0 var(--tinta); --shadow-brand: 0 4px 0 #000;
  --focus: 0 0 0 4px #FFE14A;
  /* mesmos raios, relevos e tamanhos da landing (css/novo.css). O app e o painel não carregam novo.css, então repetem aqui. */
  --r-xs: 6px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-pill: 999px;
  --relevo-s: 3px; --relevo-m: 6px; --relevo-l: 8px; --relevo: var(--relevo-m);
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 18px; --t-xl: 20px; --t-2xl: 24px; --t-3xl: 32px; --t-4xl: 40px;
}

body { background-color: var(--papel); background-image: linear-gradient(rgba(12,43,33,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(12,43,33,.045) 1px, transparent 1px); background-size: 32px 32px; font-family: "Instrument Sans", system-ui, sans-serif; }
h1, h2 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-variation-settings: normal; font-weight: 800; letter-spacing: -.03em; }
h3, h4 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; letter-spacing: -.015em; }
::selection { background: #FFE14A; }
:focus-visible { outline: 3px solid #FFE14A; outline-offset: 2px; }

/* logo */
.logo { color: var(--tinta); font-weight: 800; font-size: 1.35rem; letter-spacing: -.035em; }
.logo { gap: 0; }
.logo-mark { width: 36px; height: 36px; margin-right: 10px; border-radius: 0; background: url("/img/marca/simbolo.svg") center / contain no-repeat; box-shadow: none; }
.logo mark { padding: .04em .18em; margin-left: .26em; background: #FFE14A; border-radius: var(--r-xs); color: inherit; }

/* botões */
.btn { border-width: 2px; border-color: var(--tinta); font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 var(--relevo-s) 0 var(--tinta); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--tinta); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }
.btn-primary, .btn-cta, .modal-foot .btn-primary { background: #FFE14A; color: var(--tinta); border-color: var(--tinta); box-shadow: 0 var(--relevo-s) 0 var(--tinta); }
.btn-primary:hover, .btn-cta:hover { background: var(--marca-texto); box-shadow: 0 5px 0 var(--tinta); }
.btn-teal, .btn-verde { background: var(--tinta); color: #fff; border-color: var(--tinta); box-shadow: 0 var(--relevo-s) 0 #000; }
.btn-teal:hover, .btn-verde:hover { background: var(--mata-2); }
.btn-ghost, .btn-contorno { background: #fff; border-color: var(--tinta); color: var(--tinta); }
.btn-ghost:hover, .btn-contorno:hover { border-color: var(--tinta); color: var(--tinta); background: #FFF3B8; box-shadow: 0 5px 0 var(--tinta); }
.btn.carregando::after { border-color: rgba(12, 43, 33, .25); border-top-color: var(--tinta); }
.btn[disabled], .btn[aria-disabled="true"] { box-shadow: none; }

/* campos */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"]), select, textarea) { border: 2px solid var(--tinta); border-radius: var(--radius-md); }
:where(input, select, textarea):focus-visible { border-color: var(--tinta); box-shadow: 0 0 0 4px #FFE14A; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--tinta); }

/* superfícies */
.splash { background: var(--papel); }
.splash-logo { color: var(--tinta); gap: 0; }
.splash-logo .logo-mark { width: 52px; height: 52px; border-radius: 0; margin-right: 12px; }
.splash-bar { background: var(--papel-2); border: 2px solid var(--tinta); }
.splash-bar i { background: #FFE14A; }
.hl { background: linear-gradient(transparent 58%, #FFE14A 58%, #FFE14A 92%, transparent 92%); }
.eyebrow { font-family: var(--f-mono); letter-spacing: .12em; font-weight: 500; color: var(--tinta-2); }

/* ícones que usavam o laranja como cor */
.side-nav a.nav-criar svg, .prox-data .ic, .data-card h3 .ic, .datas h3 .ic, .btn.premium .ei-svg, .saldo-pill .ei-svg { color: var(--tinta); }
.side-nav a.nav-criar::before { background: #FFE14A; }
.pl-selo, .pl-card:has(input:checked)::after { background: #FFE14A; color: var(--tinta); border: 1.5px solid var(--tinta); }
.pl-card:has(input:checked) { border-color: var(--tinta); box-shadow: 0 5px 0 var(--tinta); background: #FFF3B8; }
.bottom-nav .bn-criar i { background: #FFE14A !important; color: var(--tinta); border: 2px solid var(--tinta); box-shadow: 0 var(--relevo-s) 0 var(--tinta); }
.loader-bar i { background: linear-gradient(90deg, var(--tinta), #FFE14A); }
.modal-head { background: #FFE14A; }
.modal-head h2 { color: var(--tinta); }

/* cartões: contorno e relevo de caderno */
.banner, .passos, .panel, .aula-card, .tool-card, .esc-card, .prox-data, .data-card, .hist-item, .mat-card, .ap-vazio, .modal-box, .modal, .pl-card, .set-card, .card-set { border: 2px solid var(--tinta); }
.banner, .passos, .panel, .tool-card, .esc-card, .aula-card, .pl-card, .data-card { box-shadow: 0 var(--relevo-s) 0 var(--tinta); }
.banner, .passos { border-radius: var(--r-lg); }
.busca { border: 2px solid var(--tinta); box-shadow: 0 var(--relevo-s) 0 var(--tinta); background: #fff; }
.tool-mini .ic { border: 2px solid var(--tinta); border-radius: var(--r-md); box-shadow: 0 var(--relevo-s) 0 var(--tinta); transition: transform .18s var(--ease-pop), box-shadow .18s; }
.tool-mini:hover .ic { transform: translateY(-2px); box-shadow: 0 5px 0 var(--tinta); }
.tool-mini.mais .ic { background: #FFE14A; border-color: var(--tinta); }
.side-nav a.active { background: #FFE14A; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.side-nav a.nav-criar { background: none; }
.side-nav a.nav-criar.active { background: #FFE14A; }
.side-label { font-family: var(--f-mono); letter-spacing: .12em; font-weight: 500; }
.sidebar { border-right: 2px solid var(--tinta); }

/* tutorial e menu de dúvidas sem mascote: o símbolo da logo faz o papel */
.tour-card, .duvidas-menu { border: 2px solid var(--tinta); box-shadow: 0 var(--relevo-m) 0 var(--tinta); }
.tour-card::before { border-color: var(--tinta); }
.tour-tico { width: 76px; left: -10px; top: -44px; filter: none; }
.tour-pontos { margin-left: 70px; }
.tour-pontos i.on { background: var(--tinta); }
.duvidas-tico { width: 44px; top: -30px; filter: none; }
.duvidas-btn { background: var(--tinta); border: 2px solid var(--tinta); }

/* jogos e quiz na tela cheia: fundo verde-escuro e alternativas nas cores da marca */
.jg-show, .sl-show { background: #0C2B21; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; }
.jg-show button { border: 2px solid rgba(255,255,255,.55); background: transparent; font-family: "Bricolage Grotesque", system-ui, sans-serif; }
.jg-show button:hover:not([disabled]) { background: rgba(255,255,255,.14); }
.jg-show button.prim { background: #FFE14A; color: #0C2B21; border-color: #FFE14A; box-shadow: 0 var(--relevo-s) 0 #000; }
.jgq-top, .jgf-top, .jgq-fim p { color: rgba(255,255,255,.75); }
.jgq-alt { border: 3px solid #fff; color: #0C2B21; font-family: "Bricolage Grotesque", system-ui, sans-serif; }
.jgq-alt.c0 { background: #FF7A2F; } .jgq-alt.c1 { background: #7FD0E6; } .jgq-alt.c2 { background: #FFE14A; } .jgq-alt.c3 { background: #7FDBA5; } .jgq-alt.c4 { background: #fff; }
.jgq-l { background: #0C2B21; color: #fff; border-radius: 50%; }
.jgq-alt.certa { box-shadow: 0 0 0 6px #FFE14A; }
.jgq-exp { border: 3px solid #FFE14A; }
.jgq-tempo { border: 2px solid rgba(255,255,255,.55); background: transparent; }
.jgm-c.jgm-c { background: #1D4A38; border: 2px solid rgba(255,255,255,.6); }
.sl-capa { background: #0C2B21; }

/* início: só a saudação com o nome, sem avatar nem ícone */
.b-inicio:not(.conf-top) .banner-art { display: none; }
.banner.b-inicio.tem-foto { margin-top: 0; }

/* Material gerado, no celular: "Editar pedido" em cima e o título com a largura toda (antes ficavam espremidos lado a lado) */
@media (max-width: 640px) {
  .res-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .res-titulo { width: 100%; }
}

/* Botão "Dúvidas?": só o ícone, para cobrir menos o conteúdo; o texto abre ao passar o mouse ou ao focar.
   O texto continua no botão (não usa display:none), então leitores de tela seguem lendo "Dúvidas?". */
.duvidas-btn { width: auto; min-width: 48px; min-height: 48px; padding: 0 12px; gap: 0; justify-content: center; }
.duvidas-btn span { display: inline-block !important; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s var(--ease-pop, ease), margin .3s; }
.duvidas-btn:hover span, .duvidas-btn:focus-visible span, .duvidas-btn[aria-expanded="true"] span { max-width: 96px; margin-left: 8px; }
@media (hover: none) { .duvidas-btn:hover span { max-width: 0; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .duvidas-btn span { transition: none; } }