/* Do desenho ao programa: o notebook desenhado se abre na tela do Caderninho
   e três cards entram, um atrás do outro: Resumo, Evolução e Briefing. Tudo
   aqui começa com .notebook / .nb-. O relógio, o traço e o roteiro estão em
   notebook.js.

   A tela segue o programa (interface/estilo.py, tema claro, e
   pagina_paciente.py): Figtree num peso só, cards creme de cantos redondos,
   chips no par cor cheia / cor diluída (rascunho = acento, conferida =
   sucesso, não conferida = neutro). As cores com prefixo --nb-p vêm de lá;
   o fundo da tela foi amostrado das capturas reais (img/consulta.webp e
   img/transcricao.webp). Dentro da tela as medidas são em em, sobre uma fonte
   que acompanha a largura do quadro (cqi): a composição é a mesma do notebook
   ao ultrawide, e a letra cresce junto com o quadro.

   Sem JS (e antes de notebook.js montar a cena, que ele faz quando a seção
   chega perto): a tela aparece inteira, no estado final, parada: os três
   cards prontos, a evolução assinada e a carta fora do envelope, com a fita
   crepe sobre o nome. O que só
   existe durante o movimento (.nb-antes) fica invisível aqui. */
.notebook {
  --nb-traco: 2.5px;
  /* da carta (o esquema do envelope) */
  --nb-app-texto: #1f1d14;
  --nb-app-hora: #56584a;
  /* do programa */
  --nb-p-texto: #201e1d;
  --nb-p-suave: #645c50;
  --nb-p-acento: #ae5f2a;
  --nb-p-acento-solto: #96501f;
  --nb-p-sucesso: #56633f;
  --nb-p-sucesso-fraco: rgba(86, 99, 63, .16);
  --nb-p-neutro-fraco: rgba(94, 86, 74, .16);
  --nb-p-superficie: #fffdf9;
  --nb-p-borda: #e5ddcf;
  /* Largura do palco: 1240 px (a do protótipo) até onde a tela deixa; com tela
     alta (1920×1080, ultrawide) cresce até o quadro inteiro caber na altura, com
     teto de 1880. O quadro é o palco menos a coluna do lado (280 + 44) e tem
     16:10, então (100vh - 240px) × 1,6 + 324px é o palco cujo quadro cabe. */
  --nb-largura: clamp(1240px, calc((100vh - 240px) * 1.6 + 324px), 1880px);
  container: nb / inline-size;
  color-scheme: light;
  /* Em cima, pouco: o capítulo logo acima já termina com ar (o quadro preso fica no meio da tela). */
  padding: clamp(32px, 4.5vw, 72px) clamp(16px, 4vw, 48px) clamp(36px, 5vw, 64px);
  background: var(--creme);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ---------- Palco ---------- */
.nb-palco { max-width: var(--nb-largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 44px; align-items: start; }
.nb-quadro-caixa { position: relative; min-width: 0; }
.nb-quadro {
  container: nbq / inline-size;
  position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
  background: #f4f0e7;
  box-shadow: 0 34px 70px -34px rgba(20, 30, 20, .5), 0 0 0 1px rgba(31, 42, 32, .08);
}
.nb-selo {
  position: absolute; z-index: 3; top: -13px; left: 18px; margin: 0;
  padding: 6px 12px; border-radius: 999px;
  background: var(--tinta); color: var(--creme);
  font-size: 12px; font-weight: 500; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(20, 30, 20, .55);
}

/* Pausar / Ver de novo, logo abaixo do quadro (o mesmo feitio do botão do capítulo) */
.nb-sob { display: flex; align-items: center; margin: 14px 0 0; }
.nb-pausa {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 15px 0 13px;
  border: 1px solid rgba(31, 42, 32, .16); border-radius: 999px; background: rgba(255, 255, 255, .42); color: var(--tinta);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: transform 160ms var(--saida), background-color 160ms ease;
}
.nb-pausa svg { width: 12px; height: 12px; flex: none; }
.nb-pausa::after { content: ""; position: absolute; inset: -6px; } /* alvo de 48 px */
.nb-pausa:active { transform: scale(.97); }
.nb-pausa:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.nb-pausa .nb-i-denovo, .nb-pausa[data-tocando="0"] .nb-i-pausa { display: none; }
.nb-pausa[data-tocando="0"] .nb-i-denovo { display: block; }
@media (hover: hover) and (pointer: fine) { .nb-pausa:hover { background: #fff; } }
/* Até notebook.js montar a cena, o botão não fica ali sem fazer nada (sem mexer na altura). */
.notebook:not(.nb-anda) .nb-sob { visibility: hidden; }

/* O desenho: traço de espessura fixa em qualquer tela (non-scaling-stroke). */
.nb-desenho { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: opacity, transform; }
.nb-desenho path { stroke-width: var(--nb-traco); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nb-desenho .nb-v { display: none; }
.nb-desenho[data-v="0"] .nb-v0,
.nb-desenho[data-v="1"] .nb-v1,
.nb-desenho[data-v="2"] .nb-v2 { display: inline; }
.notebook[data-estado="programa"] .nb-desenho { visibility: hidden; }

/* ---------- A tela do programa (tamanho cheio, nunca escala) ---------- */
.nb-replica {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: .85em;
  /* em cima, o respiro do selo (que sai 14 px para dentro do quadro) */
  padding: 1.85em 1.2em 1.2em;
  font-family: "Figtree", var(--fonte);
  font-size: 13px; /* navegador sem cqi */
  font-size: max(12.5px, 1.6cqi);
  line-height: 1.42;
  background:
    radial-gradient(90% 80% at 100% 100%, rgba(222, 190, 160, .75), rgba(222, 190, 160, 0) 70%),
    linear-gradient(100deg, #ced1bc 0%, #d9d7c4 42%, #e6d2bf 100%);
  color: var(--nb-p-texto);
  clip-path: inset(0 round 16px);
  /* 0.004 e não 0: com opacidade zero o Chrome não pinta a camada, e a primeira
     pintura caía no meio da revelação (quadro de 550 ms num Chrome frio, CPU 4x). */
  opacity: 0.004; will-change: opacity, clip-path;
  cursor: default;
}
.notebook[data-estado="programa"] .nb-replica { opacity: 1; }
.nb-replica p, .nb-replica h3, .nb-replica h4, .nb-replica ul, .nb-replica ol { margin: 0; }

/* Quem é, no alto: o avatar, o nome e a sessão que acabou. */
.nb-t-topo { display: flex; align-items: center; gap: .7em; min-width: 0; }
.nb-t-avatar { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--nb-p-sucesso); color: #f6f8dc; font-size: .95em; }
.nb-t-quem { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .65em; }
.nb-t-nome { font-size: 1.28em; line-height: 1.2; }
.nb-t-mudo { font-size: .86em; color: var(--nb-p-suave); }
.nb-t-status { margin-left: auto; flex: none; }
/* Aqui o texto fica direto sobre o fundo verde-pêssego da tela, e não sobre o card creme:
   com o suave do programa, "sessão 1 · 10 de setembro" ficava em 4,2:1 e o chip "sessão
   encerrada" em 3,7:1. Um tom mais fundo, só nesta linha, passa de 4,5:1 (5,0 e 5,7). */
.nb-t-topo { --nb-p-suave: #4f483f; }

/* Chips: o par cor cheia no texto / cor diluída no fundo, como os do programa. */
.nb-chip { display: inline-block; padding: .16em .72em; border-radius: .72em; font-size: .82em; line-height: 1.35; white-space: nowrap; }
/* O fundo do rascunho é um passo mais fundo que o acento_fraco do programa (#fff2eb): sobre o card creme, aquele sumia. */
.nb-chip-rascunho { color: var(--nb-p-acento-solto); background: #fbe3d4; }
.nb-chip-ok { color: var(--nb-p-sucesso); background: var(--nb-p-sucesso-fraco); }
.nb-chip-neutro { color: var(--nb-p-suave); background: var(--nb-p-neutro-fraco); }

/* Troca de estado no mesmo lugar: as versões ficam empilhadas na mesma célula.
   A última é o estado final (e a que o leitor de tela lê); as .nb-antes só
   aparecem durante o roteiro. */
.nb-troca { display: inline-grid; justify-items: start; align-items: center; }
.nb-troca > * { grid-area: 1 / 1; }
.nb-antes { opacity: 0; }

/* ---------- Os três cards ---------- */
.nb-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: .85em; }
.nb-card {
  position: relative; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: .55em;
  padding: .95em 1em 1em; border-radius: 1em; overflow: hidden;
  background: linear-gradient(180deg, rgba(252, 249, 243, .92), rgba(248, 243, 235, .86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(70, 60, 40, .06), 0 1em 2em -1.4em rgba(60, 50, 30, .42);
}
.nb-card-topo { display: flex; align-items: center; gap: .55em; min-width: 0; }
.nb-card-titulo { font-size: 1.12em; font-weight: 400; line-height: 1.25; color: var(--nb-p-texto); }
.nb-card-meta { font-size: .8em; color: var(--nb-p-suave); }

/* Resumo */
.nb-resumo-txt { font-size: .94em; line-height: 1.5; }
.nb-temas { padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35em; margin-top: .15em; font-size: .88em; line-height: 1.42; }
.nb-temas li { position: relative; padding-left: .85em; }
.nb-temas li::before { content: ""; position: absolute; left: 0; top: .62em; width: .32em; height: .32em; border-radius: 50%; background: var(--nb-p-suave); }
.nb-temas b { font-weight: 600; }

/* Evolução: o prontuário estruturado, seção por seção */
.nb-evo-corpo { position: relative; min-height: 0; }
.nb-gerar-caixa { position: absolute; inset: 0 0 auto; display: flex; justify-content: center; padding-top: 1.6em; pointer-events: none; }
.nb-gerar { opacity: 0; }
.nb-secoes { padding: 0; list-style: none; display: flex; flex-direction: column; gap: .42em; }
.nb-secao { padding: .48em .68em .52em; border-radius: .7em; background: var(--nb-p-superficie); border: 1px solid var(--nb-p-borda); }
.nb-secao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .5em; margin-bottom: .18em; }
.nb-secao-nome { min-width: 0; padding-top: .2em; font-size: .7em; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; color: var(--nb-p-suave); }
.nb-secao-topo .nb-troca { flex: none; }
.nb-secao-topo .nb-chip { font-size: .72em; padding: .12em .62em; }
.nb-secao-txt { font-size: .86em; line-height: 1.38; }
.nb-card-pe { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45em .6em; }
.nb-progresso { font-size: .78em; color: var(--nb-p-suave); }
.nb-assinar { justify-items: end; }
.nb-botao { display: inline-block; padding: .36em 1em; border-radius: 999px; font-size: .8em; line-height: 1.3; white-space: nowrap; }
.nb-botao-principal { background: var(--nb-p-acento); color: #fff; }
.nb-botao-apagado { background: rgba(94, 86, 74, .12); color: #8a8274; }
.nb-assinado { font-size: .84em; color: var(--nb-p-sucesso); white-space: nowrap; }

/* Briefing */
.nb-b-bloco { display: flex; flex-direction: column; gap: .3em; }
.nb-b-parou { margin-top: .1em; }
.nb-b-titulo { font-size: .9em; font-weight: 400; color: var(--nb-p-texto); }
.nb-b-lista { padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3em; font-size: .88em; line-height: 1.42; }
.nb-b-lista li { position: relative; padding-left: .85em; }
.nb-b-lista li::before { content: ""; position: absolute; left: 0; top: .62em; width: .32em; height: .32em; border-radius: 50%; background: var(--nb-p-suave); }

/* ---------- Lado: notas e o esquema do envelope ---------- */
.nb-lado { display: flex; flex-direction: column; gap: 26px; padding-top: 86px; min-width: 0; transition: opacity .6s var(--saida) .55s; }
/* Enquanto é desenho, a coluna fica em segundo plano; ela acende logo depois que a janela do programa termina de abrir (e não disputa quadro com ela). */
.notebook[data-estado="desenho"] .nb-lado { opacity: .38; transition-delay: 0s; }
.nb-nota { position: relative; margin: 0; padding-left: 16px; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--tinta); text-wrap: pretty; }
/* A régua da nota: sem JS fica à mostra; o roteiro (WAAPI) acende. */
.nb-regua { position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--tinta); transform-origin: 50% 0; }
.nb-env-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-media); }
.nb-esquema { padding: 3px 9px; border: 1px dashed rgba(31, 42, 32, .5); border-radius: 999px; font-size: 12px; letter-spacing: .01em; text-transform: none; color: var(--tinta-suave); }
.nb-env { position: relative; width: 100%; max-width: 280px; aspect-ratio: 300 / 240; }
.nb-env svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nb-env path { stroke: var(--tinta); stroke-width: var(--nb-traco); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* O envelope fica sempre aberto, com a borda da carta à mostra: o espaço de cima nunca fica vazio. */
.nb-carta-janela { position: absolute; left: 0; right: 0; top: 0; height: 97.9%; overflow: hidden; }
.nb-carta {
  position: absolute; left: 13%; width: 74%; top: 50.2%; height: 59.1%;
  padding: 13px 12px 9px; border: 2px solid var(--tinta); border-radius: 6px; background: #fffdf8;
  transform: translateY(-84%); /* sem JS: a carta fora do envelope, o estado final */
}
.nb-carta-quem { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11px; color: var(--nb-app-hora); font-variant-numeric: tabular-nums; }
.nb-carta-quem i { font-style: normal; }
.nb-carta-fala { margin: 0; font-size: 13.5px; line-height: 1.38; color: var(--nb-app-texto); }

/* A fita crepe (ideia 4): cobre o nome, não a história. Depois de a carta subir (o gesto de
   sempre), a fita desce sobre o nome com aperto de carimbo, a história ganha o sublinhado à
   mão e o "vai junto" (notebook.js). Sem JS, e no fim: a fita no lugar e o nome embaixo dela. */
/* Nome e fita empilhados na mesma célula: a linha já tem a largura da fita e não pula. O nome
   vem marcado (o programa acha o nome antes de cobrir), com a marca da célula inteira. */
.nb-nome { display: inline-grid; flex: none; }
.nb-nome > * { grid-area: 1 / 1; justify-self: center; align-self: center; }
.nb-nome b {
  justify-self: stretch; padding: 0 2px; border-radius: 4px; background: #dfe7da; color: #2f4a36;
  font-size: 11px; font-weight: 500; line-height: 17px; text-align: center;
  opacity: 0; /* o estado final: embaixo da fita */
}
.nb-fita {
  position: relative; padding: 1px 6px; transform: rotate(-2deg);
  font-size: 10.5px; line-height: 17px; font-weight: 600; letter-spacing: .02em; color: #2f4a36; white-space: nowrap;
}
.nb-fita > span { position: relative; }
/* papel, aguada deslocada e traço por cima: a ordem do desenho da sala */
.nb-carta .nb-papel { fill: #eee3c3; stroke: none; }
.nb-carta .nb-aguada { fill: #e2d3a6; opacity: .9; stroke: none; }
.nb-carta .nb-l { fill: none; }
.nb-carta .nb-fita .nb-l { stroke-width: 1.2px; }
/* o sublinhado à mão embaixo da história, e o "vai junto" logo depois dela */
.nb-sub { position: relative; white-space: nowrap; }
.nb-carta .nb-sub svg { inset: auto; left: -3px; bottom: -3px; width: calc(100% + 7px); height: 7px; stroke-dasharray: 1 1; }
.nb-carta .nb-sub .nb-l { stroke-width: 2px; }
.nb-junto {
  display: inline-block; margin-left: 6px; padding: 0 7px 1px; border-radius: 999px;
  background: var(--tinta); color: var(--creme);
  font-size: 10.5px; line-height: 14px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; vertical-align: 1px;
  transform-origin: 0 50%;
}
/* o tremor do traço: três variantes (notebook.js monta v1 e v2); parado, só a v0 */
.nb-carta .v1, .nb-carta .v2 { visibility: hidden; }
.nb-legenda { max-width: 280px; margin: 10px 0 0; font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--tinta-media); text-align: center; text-wrap: balance; }

.nb-linha {
  max-width: var(--nb-largura); margin: 30px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(31, 42, 32, .12);
  font-size: 16px; line-height: 1.5; color: var(--tinta-suave); text-wrap: pretty;
}
.nb-so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Palco largo: com o quadro grande, a coluna do lado vai para o meio da altura dele ---------- */
@container nb (min-width: 1400px) {
  .nb-palco { align-items: center; }
  .nb-lado { padding-top: 0; }
}

/* ---------- Palco mais estreito: o lado desce para baixo do quadro ---------- */
/* 1180, e não 1040: abaixo disso o quadro ao lado da coluna ficaria com menos de
   860 px, e os três cards lado a lado não cabem mais na altura do 16:10. */
@container nb (max-width: 1180px) {
  .nb-palco { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nb-lado { padding-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px) minmax(0, 1fr); gap: 24px 28px; align-items: center; }
  /* Aqui as notas ficam ABAIXO do quadro e dá para lê-las com o quadro fora da tela, e aí a
     revelação (e o fim do esmaecido) não chega: a .38 elas cairiam para 1,7:1. Sem esmaecer. */
  .notebook[data-estado="desenho"] .nb-lado { opacity: 1; }
}

/* ---------- Quadro estreito: os cards empilham e o quadro cresce com eles ---------- */
/* Abaixo de 860 px de quadro, a letra chegaria ao piso antes de a composição caber
   no 16:10. O quadro passa a ter a altura da tela do programa, e o desenho se ajusta
   a ela (notebook.js escolhe o enquadramento pela proporção). */
@container nb (max-width: 859px) {
  .nb-quadro { aspect-ratio: auto; }
  .nb-replica { position: relative; inset: auto; font-size: 14px; gap: .8em; padding: 1.1em 1em 1.1em; }
  .nb-cards { grid-template-columns: minmax(0, 1fr); gap: .75em; }
  .nb-card { gap: .5em; }
}
@container nb (max-width: 640px) {
  .nb-lado { display: flex; gap: 18px; }
  /* No celular o quadro inteiro precisa caber numa tela: saem de vista os temas do
     resumo, o "Onde o caso parou" do briefing, a linha do prontuário estruturado e o
     "sessão encerrada" do alto, que o "Gerado ao encerrar a sessão" já diz (tudo
     continua para o leitor de tela). */
  .nb-longo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .nb-replica { padding: 1.05em .8em .9em; }
  .nb-t-topo { gap: .6em; }
  .nb-card { padding: .8em .85em .85em; gap: .45em; }
  .nb-secoes { gap: .36em; }
  .nb-secao { padding: .42em .65em .46em; }
  .nb-sob { margin-top: 10px; }
  .nb-pausa { min-height: 34px; font-size: 12.5px; }
}

/* Movimento parado (o sistema ou a pausa global): nada de transição de CSS.
   O JS cuida do resto: sem mergulho, sem roteiro sozinho, o estado final parado. */
/* (Menos quem retomou pelo botão da barra: data-movimento="livre". :where() não soma especificidade.) */
@media (prefers-reduced-motion: reduce) {
  :where(:root:not([data-movimento="livre"])) .nb-lado,
  :where(:root:not([data-movimento="livre"])) .nb-pausa { transition: none; }
}
:root[data-movimento="pausado"] .nb-lado { transition: none; }