/* Sistema visual v2 — Inter, superfícies claras, verde-petróleo. Figma "Interface · v2". */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/fonts/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/inter/inter-latin-600-normal.woff2') format('woff2'); }

:root {
  --bg: #f6f8fa;
  --surface: #ffffff;
  --ink: #182230;
  --muted: #526170;
  --primary: #146b60;
  --soft: #e6f2ef;
  --line: #d7dfe5;
  --warning: #8a5100;
  --warning-bg: #fff2d9;
  --error: #b42318;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nav-h: 80px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.v2 [hidden] { display: none !important; }
body.v2 {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.45 var(--sans);
}
.v2 a { color: var(--primary); }
.v2 :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Estrutura ---------- */
.v2-main { max-width: 760px; margin: 0 auto; padding: 24px 20px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
.v2-main.largo { max-width: 1000px; }

.v2-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 0 8px; }
.v2-cab h1 { margin: 0; font-size: 28px; line-height: 40px; font-weight: 600; }
.v2-cab .sub { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.v2-cab .linha { display: flex; align-items: center; gap: 12px; width: 100%; }
.v2-cab .status { margin-left: auto; font-size: 13px; color: var(--muted); }
.v2-cab .status.erro { color: var(--error); font-weight: 600; }

.pilha { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.pilha-12 { display: flex; flex-direction: column; gap: 12px; }
.fila { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grade { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Tipografia ---------- */
.t-secao { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.t-rotulo { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.t-corpo { margin: 0; font-size: 16px; line-height: 23px; }
.t-muted { color: var(--muted); }
.t-peq { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.t-mini { margin: 0; font-size: 13px; line-height: 19px; color: var(--muted); }
.t-vazio { margin: 0; font-size: 16px; line-height: 23px; color: var(--muted); }

/* ---------- Botões (v2/Botão) ---------- */
.b {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--primary);
  font: 600 14px/20px var(--sans); text-align: center; text-decoration: none;
  cursor: pointer; width: 100%;
}
.b.primary { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.b.quiet { border-color: transparent; }
.b.selected { background: var(--soft); border-color: transparent; }
.b.perigo { color: var(--error); }
.b.auto { width: auto; }
.b:hover { border-color: var(--primary); }
.b.quiet:hover, .b.selected:hover { border-color: transparent; background: var(--soft); }
.b.primary:hover { background: #0f5a51; }
.b:active { transform: translateY(1px); }
.b[disabled] { opacity: .5; cursor: default; }
form.b-form { margin: 0; display: contents; }

/* ---------- Cartões ---------- */
.card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; background: var(--surface); border-radius: 16px; }
.card.soft { background: var(--soft); }
.card.aviso { background: var(--warning-bg); }
.card.p20 { padding: 20px; }
.card h2 { margin: 0; font-size: 24px; line-height: 34px; font-weight: 600; }
.card h2 a { color: inherit; text-decoration: none; }
.card .h22 { margin: 0; font-size: 22px; line-height: 31px; font-weight: 600; }
.card.soft .h22 { color: var(--primary); }
.card.aviso .titulo { margin: 0; font-size: 16px; line-height: 23px; font-weight: 600; color: var(--warning); }
.card .hora { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--primary); }

.identidade { display: flex; gap: 16px; align-items: flex-start; }
.identidade > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Avatar do cão: sem foto no cadastro, mostra a inicial. */
.avatar {
  flex: none; width: 64px; height: 64px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--soft); color: var(--primary);
  font-size: 28px; font-weight: 600;
}
.avatar.grande { width: 100%; height: 148px; font-size: 56px; }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo > span { font-size: 14px; line-height: 20px; font-weight: 500; }
.in {
  width: 100%; min-height: 48px; padding: 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font: 400 16px/1.4 var(--sans);
}
.in:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
textarea.in { resize: vertical; }
.busca { display: flex; flex-direction: column; gap: 8px; margin: 0; }

/* ---------- Semana (Meu dia) ---------- */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.semana a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60px; border-radius: 8px; background: var(--surface);
  color: var(--primary); font: 600 14px/20px var(--sans); text-decoration: none;
  position: relative;
}
.semana a.on { background: var(--soft); }
.semana a.tem::after { content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }

/* ---------- Lista de linhas (habilidades, histórico) ---------- */
.linhas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.linhas li { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.linhas b { font-weight: 600; }
.nivel { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.nivel i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--primary); }
.nivel i.on { background: var(--primary); }

.linha-tempo { display: flex; flex-direction: column; gap: 20px; }
.linha-tempo h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }

/* ---------- Navegação (v2/Navegação) ---------- */
.v2-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; gap: 4px;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--surface);
  box-shadow: 0 -1px 0 var(--line);
}
.v2-nav .marca { display: none; }
.v2-nav a {
  flex: 1; max-width: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 4px; border-radius: 12px;
  color: var(--muted); font: 600 12px/17px var(--sans); text-decoration: none;
}
.v2-nav a img { width: 24px; height: 24px; }
.v2-nav a .on { display: none; }
.v2-nav a[aria-current] { background: var(--soft); color: var(--primary); }
.v2-nav a[aria-current] .on { display: block; }
.v2-nav a[aria-current] .off { display: none; }
.v2-nav .extra { display: none; }

/* ---------- Computador: menu lateral ---------- */
@media (min-width: 1024px) {
  .v2-nav {
    top: 24px; bottom: auto; right: auto; left: 0;
    width: 148px; height: auto;
    flex-direction: column; justify-content: flex-start; gap: 8px;
    padding: 12px 12px 16px;
    box-shadow: none;
  }
  .v2-nav .marca { display: block; padding: 0 0 12px; text-decoration: none; }
  .v2-nav .marca b { display: block; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--primary); }
  .v2-nav .marca small { display: block; margin-top: 8px; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
  .v2-nav a:not(.marca) { flex: none; max-width: none; height: 48px; padding: 12px; font-size: 14px; color: var(--primary); }
  .v2-nav a img { display: none; }
  .v2-nav a[aria-current] img.on { display: none; }
  .v2-nav .extra { display: flex; }
  .v2-main { margin-left: 148px; max-width: none; padding: 24px 32px 48px; }
  .v2-main > * { max-width: 1100px; }
  .grade { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
  .grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
}

/* ---------- Folhas / diálogos ---------- */
.v2 .sheet {
  border: 0; border-radius: 16px; padding: 20px;
  width: min(520px, calc(100vw - 24px));
  background: var(--surface); color: var(--ink);
  font-family: var(--sans);
}
.v2 .sheet::backdrop { background: rgba(24, 34, 48, .45); }
.v2 .sheet h2 { font: 600 20px/28px var(--sans); margin: 0 0 12px; }
.v2 .sheet form { display: grid; gap: 12px; }
.v2 .sheet .row { display: flex; justify-content: flex-end; gap: 8px; }
.v2 .sheet .row .b { width: auto; padding: 12px 16px; }
.v2 .sheet label { display: grid; gap: 8px; font: 500 14px/20px var(--sans); }
.v2 .sheet input, .v2 .sheet textarea {
  min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 8px;
  font: 400 16px var(--sans); color: var(--ink); background: var(--surface);
}
.v2 .sheet .hint { color: var(--muted); font-size: 14px; margin: 0; }
.v2 .previa { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; max-height: 220px; overflow: auto; font-size: 14px; }
.v2 .previa .aviso { color: var(--error); }

/* Menu "Mais" */
.v2 .more { position: relative; }
.v2 .more summary { list-style: none; }
.v2 .more summary::-webkit-details-marker { display: none; }
.v2 .more .menu {
  position: absolute; right: 0; top: 54px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(24, 34, 48, .14);
  min-width: 230px; padding: 6px;
}
.v2 .more .menu form { margin: 0; }
.v2 .more .menu button, .v2 .more .menu a {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 12px; border-radius: 8px;
  font: 500 15px var(--sans); color: var(--ink); text-decoration: none; cursor: pointer;
}
.v2 .more .menu button:hover, .v2 .more .menu a:hover { background: var(--soft); }
.v2 .more .menu .danger { color: var(--error); }

/* ---------- Documento (ficha em papel) dentro da interface v2 ---------- */
.doc-nota { margin: 0; font-size: 13px; line-height: 19px; color: var(--muted); }
.v2 .ficha { margin: 4px 0 24px; }
.v2 .fab {
  position: fixed; right: 16px; z-index: 35;
  bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--primary); color: #fff;
  font: 600 15px var(--sans);
  box-shadow: 0 6px 18px rgba(20, 107, 96, .3);
  cursor: pointer;
}
@media (min-width: 1024px) { .v2 .fab { bottom: 24px; } }

/* ---------- Aula em andamento ---------- */
.b.fundo { background: var(--surface); }
.estado-salvo { margin: 0; padding: 12px; background: var(--soft); color: var(--primary); font: 500 13px/19px var(--sans); }
.estado-salvo.erro { background: #fdecea; color: var(--error); }
.exercicio { display: flex; flex-direction: column; gap: 8px; }
.exercicio h3 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.resultado { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.escolha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.escolha .b { padding: 12px 4px; }
.escolha .b.marcado { background: var(--soft); border: 2px solid var(--primary); }
.resultado .estado { margin: 0; font: 500 13px/19px var(--sans); color: var(--muted); }
.resultado .estado.ok { color: var(--primary); }
.aula { padding-bottom: 72px; }
.barra-fixa {
  position: fixed; left: 0; right: 0; z-index: 38;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 8px 20px 16px; background: var(--bg);
}
.barra-fixa .b { max-width: 720px; margin: 0 auto; }
@media (min-width: 1024px) {
  .barra-fixa { left: 148px; bottom: 0; padding: 12px 32px 20px; }
  .barra-fixa .b { max-width: 1100px; margin: 0; }
}
.v2 .sheet.painel { width: min(350px, calc(100vw - 24px)); }
.v2 .sheet.painel h2 { font-size: 24px; line-height: 34px; }
.v2 .sheet .pilha-12 .b { width: 100%; }
.erro-form { margin: 0; color: var(--error); font-weight: 600; font-size: 14px; }

/* ---------- Agenda ---------- */
.b.cancelado { color: var(--muted); text-decoration: line-through; }
.b.sem-acao { cursor: default; }
.b.sem-acao:hover { border-color: var(--line); }
.b.perigo-cheio { background: var(--error); border-color: var(--error); color: var(--surface); }
.b.perigo-cheio:hover { background: #912018; border-color: #912018; }
.sem-link { color: inherit !important; text-decoration: none; }
.sem-borda { border: 0; padding: 0; margin: 0; min-width: 0; }
.sem-borda legend { padding: 0; margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--primary); font: 600 14px/20px var(--sans); cursor: pointer;
}
.chip:has(input:checked) { background: var(--soft); border-color: var(--primary); }
.chip input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }
.recorrencia { display: flex; flex-direction: column; gap: 12px; }
.recorrencia summary { list-style: none; }
.recorrencia summary::-webkit-details-marker { display: none; }
.recorrencia[open] summary { margin-bottom: 12px; background: var(--soft); border-color: transparent; }
.calendario { padding: 12px 8px; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-dia-semana { font: 500 12px/20px var(--sans); color: var(--muted); }
.cal-grade a {
  position: relative; display: grid; place-items: center; min-height: 44px; border-radius: 8px;
  color: var(--primary); font: 600 14px/20px var(--sans); text-decoration: none;
}
.cal-grade a.on { background: var(--soft); }
.cal-grade a.tem::after { content: ''; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }

/* ---------- Login ---------- */
.login-v2 { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-v2 form { width: min(390px, 100%); }
.login-v2 .erro { margin: 0; color: var(--error); font-weight: 600; font-size: 14px; }
.login-v2 .marca { margin: 0; font-size: 20px; font-weight: 600; color: var(--primary); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.reduzir-movimento) { scroll-behavior: smooth; }
  .v2 .b, .v2 .chip, .v2-nav a { transition: background-color .15s ease, border-color .15s ease, transform .1s ease; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .b:active { transform: none; }
}
.reduzir-movimento *, .reduzir-movimento *::before, .reduzir-movimento *::after { transition: none !important; animation: none !important; }
.reduzir-movimento .b:active { transform: none; }
.in.mono { font: 14px/1.45 ui-monospace, Consolas, monospace; }
.item-sugerido { display: flex; flex-direction: column; gap: 8px; }
img.avatar { object-fit: cover; padding: 0; }

/* ---------- Sem conexão / sincronização ---------- */
.estado-salvo.local { background: var(--warning-bg); color: var(--warning); }
.resultado .estado.local { color: var(--warning); }
.sinc { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--warning-bg); }
.sinc .titulo { margin: 0; font-weight: 600; color: var(--warning); }
.sinc.erro { background: #fdecea; }
.sinc.erro .titulo { color: var(--error); }
.aviso-rede {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; margin: 0;
  padding: 6px 16px calc(6px); padding-top: max(6px, env(safe-area-inset-top));
  background: var(--warning-bg); color: var(--warning); font: 500 13px/19px var(--sans); text-align: center;
}

/* ---------- Plano: carrossel de aulas, preparar, aula por cão ---------- */
.carrossel {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -20px; padding: 4px 20px 8px; scroll-padding: 0 20px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel-item { flex: 0 0 86%; max-width: 420px; scroll-snap-align: start; }
.carrossel-pontos { display: flex; justify-content: center; gap: 6px; }
.carrossel-pontos span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; }
.carrossel-pontos span.feito { background: #9cc9c0; }
.carrossel-pontos span.on { background: var(--primary); width: 20px; border-radius: 4px; }

.progresso { display: flex; flex-direction: column; gap: 6px; }
.progresso-barra { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progresso-barra span { display: block; height: 100%; background: var(--primary); border-radius: 4px; }

.aula-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--surface); border-radius: 16px; border: 2px solid transparent; }
.aula-card.status-proxima { border-color: var(--primary); }
.aula-card.status-feita { opacity: .92; }
.aula-card-topo { display: flex; justify-content: space-between; align-items: center; }
.aula-num { font: 600 13px/19px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.aula-foco { margin: 0; font: 600 22px/30px var(--sans); }
.aula-caes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aula-caes li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--bg); border-radius: 8px; font-size: 15px; }
.aula-caes b { font-weight: 500; color: var(--muted); }
.aula-card-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

.selo { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font: 600 12px/17px var(--sans); background: var(--bg); color: var(--muted); }
.selo-proxima, .selo-pronta { background: var(--soft); color: var(--primary); }
.selo-feita { background: #e8f5e9; color: #1d6b2f; }
.selo-rascunho { background: var(--warning-bg); color: var(--warning); }
.selo-grande { align-self: flex-start; padding: 6px 14px; font-size: 14px; }
.aviso-texto { color: var(--warning); }

.v2 a.card-link { text-decoration: none; color: var(--ink); border: 2px solid transparent; }
.card-link .t-peq, .card-link .t-mini { color: var(--muted); }
.card-link:hover { border-color: var(--line); }
.card-link .b { pointer-events: none; }

.sobre-plano summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.sobre-plano summary::-webkit-details-marker { display: none; }
.sobre-plano[open] summary { margin-bottom: 12px; }

.in-grande { font-size: 20px; font-weight: 600; }
.b.mini { min-height: 40px; width: auto; padding: 8px 12px; font-size: 13px; }
.b.b-grande { min-height: 60px; font-size: 17px; }
.ex-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: ex; }
.ex-cartao { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border-radius: 16px; border: 1px solid var(--line); }
.ex-cartao:not(.ori)::before { counter-increment: ex; content: 'Exercício ' counter(ex); font: 600 12px/17px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.ex-texto { font-size: 17px; }
.ex-acoes { display: flex; justify-content: flex-end; gap: 4px; }
.preparar { padding-bottom: 72px; }

.lista-simples { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 23px; }
.resumo-caes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.resumo-caes .card { gap: 12px; }
.resumo-resultados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.resumo-resultados li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bg); border-radius: 8px; }
.resumo-resultados b { font-weight: 600; color: var(--primary); white-space: nowrap; }
.resumo-resultados li.pendente b { color: var(--warning); }

/* Aula: abas dos cães + painéis deslizantes */
.aula-andamento { display: flex; flex-direction: column; gap: 16px; }
.abas-caes {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto;
  margin: 0 -20px; padding: 8px 20px; background: var(--bg); scrollbar-width: none;
}
.abas-caes::-webkit-scrollbar { display: none; }
.aba-cao {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 14px 6px 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: 600 15px/20px var(--sans); color: var(--ink); cursor: pointer;
}
.aba-cao .avatar { width: 38px; height: 38px; border-radius: 50%; font-size: 16px; }
.aba-cao small { font: 600 12px/17px var(--sans); color: var(--muted); background: var(--bg); border-radius: 999px; padding: 2px 8px; }
.aba-cao.on { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.aba-cao.on small { background: rgba(255, 255, 255, .2); color: var(--surface); }
.painel-caes { align-items: flex-start; }
.painel-caes .carrossel-item { flex-basis: 100%; max-width: none; display: flex; flex-direction: column; gap: 16px; }
.aula .exercicio.card { gap: 12px; padding: 20px; }
.aula .exercicio h3 { font-size: 20px; line-height: 28px; }
.aula .escolha { grid-template-columns: 1fr; gap: 8px; }
.aula .escolha .b { min-height: 56px; font-size: 17px; }
.detalhes-link { align-self: flex-start; padding: 8px 0; font: 500 14px/20px var(--sans); color: var(--muted) !important; }
@media (min-width: 560px) {
  .aula .escolha { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .carrossel { margin: 0; padding: 4px 0 8px; scroll-padding: 0; }
  .carrossel-item { flex-basis: 360px; }
  .abas-caes { margin: 0; padding: 8px 0; }
  .painel-caes .carrossel-item { flex-basis: 100%; }
}

/* ---------- Ficha completa (editor com salvamento automático) ---------- */
.ficha-sec { gap: 14px; scroll-margin-top: 16px; }
.ficha-sec .t-secao { margin: 0; }
.indice { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
.indice::-webkit-scrollbar { display: none; }
.indice a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 13px/18px var(--sans); text-decoration: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.seg button {
  min-height: 48px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--primary); font: 600 14px/18px var(--sans); cursor: pointer;
}
.seg button.on { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.seg-nivel button.on { background: var(--soft); border-color: var(--primary); color: var(--primary); }
.atrib { display: flex; flex-direction: column; gap: 6px; }
.atrib-nome { font: 500 14px/20px var(--sans); }
.atrib-escala { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.atrib-escala .dia-btn { position: relative; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.atrib-escala .dia-btn i { position: absolute; inset: 3px; border-radius: 3px; }
.atrib-escala .dia-btn.on { border-color: var(--primary); }
.atrib-escala .dia-btn.on i { background: var(--primary); }
.atrib-escala .dia-btn::after { content: attr(data-val); position: relative; font: 600 12px/1 var(--sans); color: var(--muted); }
.atrib-escala .dia-btn.on::after { color: var(--surface); }
.lista-v2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-texto li, .linha-edit { display: flex; gap: 8px; align-items: flex-start; }
.lista-texto li .in, .linha-edit .in { flex: 1; min-width: 0; }
.linha-edit .in.data { flex: 0 0 150px; }
.medalha { flex: none; align-self: center; font-size: 20px; }
.hab, .sessao { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg); border-radius: 12px; }
.hab-topo { display: flex; gap: 8px; align-items: center; }
.hab-topo .in { flex: 1; min-width: 0; }
.missao { display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: var(--bg); border-radius: 12px; }
.missao .check {
  flex: none; width: 32px; height: 32px; margin-top: 8px; border: 2px solid var(--primary); border-radius: 8px;
  background: var(--surface); cursor: pointer; position: relative;
}
.missao .check.on { background: var(--primary); }
.missao .check.on::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--surface); font: 700 18px/1 var(--sans); }
.missao-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.missao-txt .obs { font-size: 14px; color: var(--muted); min-height: 40px; }
.missao:has(.check.on) .missao-txt textarea:first-child { text-decoration: line-through; color: var(--muted); }
.v2 .f-del {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.v2 .f-del:hover { background: #fdecea; color: var(--error); }
.v2 .f-add {
  align-self: flex-start; min-height: 44px; padding: 10px 16px; border: 1px dashed var(--primary); border-radius: 8px;
  background: transparent; color: var(--primary); font: 600 14px/20px var(--sans); cursor: pointer;
}
textarea.in.auto { resize: none; overflow: hidden; }
.b.cao-link { justify-content: flex-start; gap: 12px; text-align: left; }
.b.cao-link .avatar { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }
.b.cao-link span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.b.cao-link small { font-weight: 400; color: var(--muted); }
@media (min-width: 1024px) { .indice { margin: 0; padding: 0; } }
.ficha-v2:has(~ .fab), main:has(.fab) .ficha-v2 { padding-bottom: 80px; }