/* =====================================================================================================
   The student's world: THE NOTEBOOK. Warmer and more personal than the teacher's board: the page itself is the
   product — a real notebook you can write in. Same bones as the teacher world (sistema.css).
   ===================================================================================================== */
.mundo-aluno { background: var(--papel) radial-gradient(color-mix(in srgb, var(--pauta) 30%, transparent) 1.1px, transparent 1.4px) 0 0 / 26px 26px; }
.hero-aluno { align-items: start; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); }
.hero-aluno h1 { font-size: clamp(2.3rem, 1.2rem + 3.7vw, 4.3rem); }
@media (max-width: 920px) { .hero-aluno { grid-template-columns: 1fr; } }
.hero-aluno h1 mark { background: linear-gradient(transparent 50%, #ffd6e2 50%, #ffd6e2 90%, transparent 90%); }
:root[data-tema-ativo="escuro"] .hero-aluno h1 mark { background: #ffb8cb; color: #17191e; }
.hero-caderno { display: grid; gap: 12px; scroll-margin-top: 90px; }
.caderno-nota { max-width: 40em; }

/* ---------- the notebook app ---------- */
.caderno-app { display: grid; gap: 14px; }
.caderno-barra { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 14px; background: var(--folha); border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra); }
.caderno-grupo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.caderno-grupo > span { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin-right: 2px; }
.caderno-acoes { margin-left: auto; }
.amostra { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--linha-forte); cursor: pointer; padding: 0; position: relative; }
.amostra[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--folha), 0 0 0 4px var(--caneta); }
.amostra::after { content: ""; position: absolute; inset: -8px; } /* 46 px touch target around a 30 px swatch */
.ferramenta { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--linha-forte); background: var(--papel); cursor: pointer; display: grid; place-items: center; padding: 0; }
.ferramenta i { display: block; width: 9px; height: 24px; border-radius: 2px 2px 5px 5px; transform: rotate(35deg); }
.f-lapis i { background: linear-gradient(#e98fa0 0 18%, #f5c542 18% 78%, #f1d9b5 78% 92%, #3b3b40 92%); }
.f-azul i { background: linear-gradient(#2544a8 0 30%, #e9eef8 30% 86%, #2544a8 86%); }
.f-vermelha i { background: linear-gradient(#c8372d 0 30%, #f6e9e8 30% 86%, #c8372d 86%); }
.f-marca i { width: 12px; background: linear-gradient(#f5c542 0 70%, #e0a800 70%); border-radius: 2px; }
.f-borracha i { width: 14px; height: 20px; background: linear-gradient(#e8577a 0 55%, #2544a8 55%); border-radius: 3px; }
.ferramenta[aria-pressed="true"] { border-color: var(--caneta); background: var(--caneta-claro); box-shadow: 0 0 0 1px var(--caneta); }
.botao-pequeno { min-height: 40px; min-width: 40px; padding: 6px 12px; border-radius: 10px; border: 1.5px solid var(--linha-forte); background: var(--papel); font-weight: 700; font-size: .92rem; cursor: pointer; }
.botao-pequeno:hover { border-color: var(--caneta); }
.capa-azul { background: #2544a8; } .capa-coral { background: #e8705a; } .capa-verde { background: #2f7a52; } .capa-grafite { background: #3d4048; }
.papel-pautado.amostra { background: #fffefa repeating-linear-gradient(transparent 0 6px, #a9c7e8 6px 7px); }
.papel-amarelo.amostra { background: #fdf3b8 repeating-linear-gradient(transparent 0 6px, #c5b56b 6px 7px); }
.papel-quadriculado.amostra { background: linear-gradient(#a9c7e8 1px, transparent 1px) 0 0 / 7px 7px, linear-gradient(90deg, #a9c7e8 1px, transparent 1px) 0 0 / 7px 7px, #fffefa; }
.papel-pontilhado.amostra { background: #fffefa radial-gradient(#8f9aa8 1px, transparent 1.3px) 0 0 / 7px 7px; }

/* the book: hard cover edge, a spiral on the left, and the page */
.caderno-livro { position: relative; padding: 14px 14px 14px 30px; border-radius: 10px 18px 18px 10px; box-shadow: var(--sombra-forte); transition: background .3s; perspective: 1600px; }
.caderno-livro::before { content: ""; position: absolute; z-index: 3; left: 10px; top: 4%; bottom: 4%; width: 26px; pointer-events: none; background:
  radial-gradient(ellipse 9px 6px at 13px 50%, #d9dde3 0 45%, #8b9098 55%, transparent 62%) 0 0 / 26px 4.2%,
  radial-gradient(circle at 20px 50%, rgb(0 0 0 / .45) 0 2.6px, transparent 3px) 0 0 / 26px 4.2%; background-repeat: repeat-y; }
.caderno-pagina { position: relative; aspect-ratio: 4 / 3.15; border-radius: 3px 10px 10px 3px; overflow: hidden; transform-origin: left center; box-shadow: inset 8px 0 12px -8px rgb(0 0 0 / .25); }
.papel-pautado { background: linear-gradient(90deg, transparent 0 9%, #e06a63 9% calc(9% + 2px), transparent calc(9% + 2px)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0.98H100M0 1.98H100M0 2.98H100M0 3.98H100M0 4.98H100M0 5.98H100M0 6.98H100M0 7.98H100M0 8.98H100M0 9.98H100M0 10.98H100M0 11.98H100M0 12.98H100M0 13.98H100' stroke='%23a9c7e8' stroke-width='1' vector-effect='non-scaling-stroke' shape-rendering='crispEdges' fill='none'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, #fffefa; }
.papel-amarelo { background: linear-gradient(#b6463f 0 2.2%, rgb(0 0 0 / .12) 2.2% 2.5%, transparent 2.5%), linear-gradient(90deg, transparent 0 9%, #d4524a 9% calc(9% + 1.5px), transparent calc(9% + 1.5px) calc(9% + 4px), #d4524a calc(9% + 4px) calc(9% + 5.5px), transparent calc(9% + 5.5px)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0.98H100M0 1.98H100M0 2.98H100M0 3.98H100M0 4.98H100M0 5.98H100M0 6.98H100M0 7.98H100M0 8.98H100M0 9.98H100M0 10.98H100M0 11.98H100M0 12.98H100M0 13.98H100' stroke='%2390a4c4' stroke-width='1' vector-effect='non-scaling-stroke' shape-rendering='crispEdges' fill='none'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, repeating-linear-gradient(97deg, rgb(150 120 30 / .035) 0 2px, transparent 2px 5px), linear-gradient(#fbee9e, #f8e68a); }
/* graph paper: a fine 5 mm grid and a stronger line every 4 squares, like a real squared notebook */
.papel-quadriculado { background: linear-gradient(#9dbde3 1px, transparent 1px) 0 0 / 18% 24%, linear-gradient(90deg, #9dbde3 1px, transparent 1px) 0 0 / 18% 24%, linear-gradient(#cfdff1 1px, transparent 1px) 0 0 / 4.5% 6%, linear-gradient(90deg, #cfdff1 1px, transparent 1px) 0 0 / 4.5% 6%, #fffefa; }
.papel-pontilhado { background: radial-gradient(#9aa6b5 1.1px, transparent 1.5px) 0 0 / 4.5% 6%, #fffefa; }
:root[data-tema-ativo="escuro"] .caderno-livro { filter: brightness(.9) sepia(.12); } /* the whole book under one desk lamp: page and turning sheet share one tone */
:root[data-tema-ativo="escuro"] .caderno-app[data-estilo="limpo"] .caderno-livro { filter: none; }
.caderno-tinta { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: url("/img/cursor-lapis.svg") 7 25, crosshair; z-index: 1; }
.caderno-tinta[data-ferramenta="azul"], .caderno-tinta[data-ferramenta="vermelha"], .caderno-tinta[data-ferramenta="marca"] { cursor: url("/img/cursor-marcador.svg") 6 26, crosshair; }
.caderno-tinta[data-ferramenta="borracha"] { cursor: cell; }
.caderno-vazio { position: absolute; left: 13%; top: 8%; right: 6%; z-index: 0; transition: opacity .45s ease, translate .45s ease; color: rgb(59 59 64 / .35); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); line-height: 1.1; pointer-events: none; }
.caderno-itens { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.item { position: absolute; pointer-events: auto; transform: rotate(var(--rot, 0deg)) scale(var(--esc, 1)); transform-origin: top left; touch-action: none; cursor: grab; }
.item-redim { position: absolute; right: -8px; bottom: -8px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #2544a8; box-shadow: 0 2px 4px rgb(0 0 0 / .25); cursor: nwse-resize; opacity: 0; transition: opacity .2s; }
.item:hover .item-redim, .item:focus-within .item-redim, .item.pegando .item-redim { opacity: 1; }
@media (hover: none) { .item-redim { opacity: .8; } }
.item.pegando { cursor: grabbing; z-index: 5; filter: drop-shadow(0 12px 10px rgb(0 0 0 / .25)); }
.item-postit { width: 30%; min-height: 26%; padding: 16px 12px 12px; background: #ffe680; color: #3b3320; box-shadow: 0 8px 14px -8px rgb(0 0 0 / .4); }
.item-postit::before { content: ""; position: absolute; top: -8px; left: 50%; width: 46%; height: 16px; transform: translateX(-50%) rotate(-2deg); background: rgb(255 255 255 / .55); }
.postit-texto { outline: none; font-size: clamp(1rem, .7rem + 1vw, 1.45rem); line-height: 1.15; min-height: 2em; cursor: text; overflow-wrap: anywhere; }
.item-adesivo { width: 12%; aspect-ratio: 1; filter: drop-shadow(0 3px 2px rgb(0 0 0 / .2)); }
.item-adesivo svg { width: 100%; height: 100%; display: block; }
.item-fechar { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--tinta); color: var(--papel); font: 700 1rem/1 var(--texto); cursor: pointer; opacity: 0; transition: opacity .15s; }
.item:hover .item-fechar, .item:focus-within .item-fechar { opacity: 1; }
@media (pointer: coarse) { .item-fechar { opacity: .85; } }
.caderno-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.caderno-contador { font-weight: 700; color: var(--suave); min-width: 9ch; text-align: center; }
@media (max-width: 720px) { .caderno-acoes { margin-left: 0; } .caderno-barra { gap: 8px 12px; } }

/* ---------- two versions ---------- */
.versoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.versao { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 22px; background: var(--folha); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.versao > p { color: var(--suave); }
.mod-exemplo { position: absolute; top: 18px; right: 18px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.mod-cartoes { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.mod-cartoes li { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--papel); border: 1px solid var(--linha); }
.mod-cartoes span { font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--caneta-forte); }
.mod-cartoes strong { font: 650 1.2rem var(--titulo); } .mod-cartoes small { color: var(--suave); }
.mini-caderno { position: relative; margin-top: 10px; min-height: 230px; padding: 6px 18px 18px 52px; border-radius: 4px 14px 14px 4px; color: #3b3b40;
  background: linear-gradient(90deg, transparent 0 38px, #e06a63 38px 40px, transparent 40px), linear-gradient(transparent 33px, #c9b867 33px) 0 0 / 100% 34px, #fdf3b8; box-shadow: inset 6px 0 10px -6px rgb(0 0 0 / .2); }
.mini-caderno p { font-size: 1.5rem; line-height: 34px; }
.mini-postit { position: absolute; right: 16px; bottom: 16px; width: 44%; padding: 14px 12px; background: #ffe680; color: #3b3320; transform: rotate(3deg); box-shadow: 0 8px 14px -8px rgb(0 0 0 / .4); font-size: 1.25rem; line-height: 1.1; }
.mini-adesivo { position: absolute; left: 50%; bottom: 22px; font-size: 2.2rem; color: #f5c542; transform: rotate(-12deg); text-shadow: 0 2px 0 #b98a12; }
@media (max-width: 860px) { .versoes { grid-template-columns: 1fr; } }

/* ---------- 02/10 v4: typing, drawers, real page turn, two styles ---------- */
.f-texto i { width: auto; height: auto; transform: none; background: none; font: 800 1rem/1 var(--titulo); color: var(--tinta); }
.f-texto i::before { content: "Aa"; }
.chip-estilo { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--linha-forte); background: var(--papel); color: var(--tinta); font-weight: 700; font-size: .88rem; cursor: pointer; }
.chip-estilo[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.botao-pequeno { color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.botao-pequeno svg { width: 20px; height: 20px; flex: none; }
.ic-linha { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.botao-icone:hover svg { animation: balanco .5s; }
@keyframes balanco { 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg); } }
.botao-pequeno[aria-expanded="true"] { border-color: var(--caneta); background: var(--caneta-claro); }

/* the drawers under the toolbar */
.caderno-gaveta { display: grid; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--folha); border: 1px solid var(--linha-forte); box-shadow: var(--sombra); animation: gaveta .22s ease-out; }
@keyframes gaveta { from { opacity: 0; transform: translateY(-6px); } }
.gaveta-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gaveta-grupo > span { min-width: 6.5em; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.gaveta-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.gaveta-op { min-height: 36px; min-width: 40px; padding: 4px 12px; border-radius: 10px; border: 1.5px solid var(--linha-forte); background: var(--papel); color: var(--tinta); font-weight: 700; font-size: .9rem; cursor: pointer; }
.gaveta-op[aria-pressed="true"] { border-color: var(--caneta); box-shadow: 0 0 0 2px var(--caneta); }
.gaveta-op.op-cor { width: 36px; padding: 0; border-radius: 50%; }
.gaveta-previa { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.postit-amostra { position: relative; width: 120px; min-height: 0; aspect-ratio: 1; transform: rotate(-2deg); font-size: 1.1rem; }
.adesivos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.adesivo-opcao { width: 56px; height: 56px; padding: 6px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--papel); cursor: pointer; transition: transform .15s; }
.adesivo-opcao:hover { transform: scale(1.12) rotate(-6deg); border-color: var(--caneta); }
.adesivo-opcao svg, .adesivo-opcao img { width: 100%; height: 100%; display: block; object-fit: contain; }
.gaveta-foto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.foto-botao { position: relative; min-height: 44px; cursor: pointer; }
.foto-botao svg { width: 22px; height: 22px; }
.foto-botao input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.foto-botao:focus-within { outline: 3px solid var(--caneta); outline-offset: 3px; }
.tirar-fundo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .94rem; }
.tirar-fundo input { width: 20px; height: 20px; accent-color: var(--caneta); }
.gaveta-foto .nota { flex-basis: 100%; }

/* sticky notes: color, size, shape, how they are held */
.item-postit.postit-amarelo, .gaveta-op.postit-amarelo { background: #ffe680; }
.postit-rosa { background: #ffb8cf; } .postit-azul { background: #a9dcff; } .postit-verde { background: #b8f0a8; } .postit-laranja { background: #ffc58a; }
.item-postit { color: #3b3320; }
.item-postit.postit-p { width: 20%; min-height: 0; aspect-ratio: 1; padding: 10px 8px 8px; }
.item-postit.postit-p .postit-texto { font-size: clamp(.8rem, .6rem + .6vw, 1.05rem); }
.item-postit.postit-m { width: 28%; aspect-ratio: 1; min-height: 0; }
.item-postit.postit-g { width: 38%; aspect-ratio: 1; min-height: 0; }
.item-postit.postit-retangulo { aspect-ratio: 1.7; }
.item-postit.postit-redondo { border-radius: 50%; padding-inline: 14%; display: grid; place-items: center; text-align: center; }
.item-postit.postit-rasgado { clip-path: polygon(0 0, 100% 0, 100% 90%, 94% 96%, 86% 90%, 78% 97%, 70% 91%, 62% 98%, 54% 90%, 46% 97%, 38% 91%, 30% 98%, 22% 90%, 14% 97%, 6% 91%, 0 96%); }
.item-postit.postit-fix-alfinete::before { width: 16px; height: 16px; top: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8f8f, #c8372d 60%, #8f1f17); transform: translateX(-50%); box-shadow: 0 3px 3px rgb(0 0 0 / .3); }
.item-postit.postit-fix-nada::before { display: none; }
.item-postit.postit-redondo::before { top: -4px; }

/* typed lines: the text sits ON the rule, in the student's handwriting font */
.item-texto { display: flex; align-items: flex-end; transform: none; cursor: text; pointer-events: auto; }
.caderno-app:not([data-ferramenta="texto"]) .item-texto { pointer-events: none; } /* pencil, pen and eraser act ON the words; only the keyboard tool edits them */
.caderno-selecao { position: absolute; z-index: 3; border: 2px dashed #2544a8; background: rgb(37 68 168 / .08); border-radius: 6px; pointer-events: none; }
.caderno-apagar-sel { position: absolute; right: -2px; top: calc(100% + 6px); display: none; pointer-events: auto; font: 700 .8rem var(--texto); color: #fff; background: #c2413a; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; box-shadow: 0 6px 14px -6px rgb(0 0 0 / .5); white-space: nowrap; }
.caderno-selecao.com-algo .caderno-apagar-sel { display: block; }
.item.selecionado { outline: 2px solid rgb(37 68 168 / .55); outline-offset: 2px; border-radius: 4px; }
.texto-linha { flex: 0 1 auto; min-width: 2ch; padding-right: .35em !important; /* the last glyph (an "!", an italic f) is never clipped */ font: 600 clamp(1rem, .55rem + 1.6vw, 1.75rem)/1 var(--mao); color: #2c2c66; padding: 0 0 .14em; outline: none; white-space: nowrap; overflow: hidden; caret-color: #2544a8; }
.texto-linha:focus { background: linear-gradient(transparent 85%, rgb(37 68 168 / .15) 85%); }
.item-foto { width: 15%; aspect-ratio: 1; filter: drop-shadow(0 4px 3px rgb(0 0 0 / .25)); }
.item-foto img { width: 100%; height: 100%; display: block; pointer-events: none; }

/* the page turn: the sheet is a chain of thin strips hinged to each other (caderno.mjs bends them frame by frame) */
.folha-virando { position: absolute; z-index: 4; pointer-events: none; perspective: 2200px; perspective-origin: 0 50%; transform-style: preserve-3d; filter: drop-shadow(-10px 14px 18px rgb(0 0 0 / .22)); }
.fv-tira { position: absolute; top: 0; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.fv-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fv-pagina { position: absolute; top: 0; }
.fv-pagina .folha-tinta { position: absolute; inset: 0; width: 100%; height: 100%; }
.fv-verso { transform: rotateY(180deg); background: linear-gradient(transparent calc(100% - 1px), color-mix(in srgb, #a9c7e8 45%, var(--caderno, #fffefa)) calc(100% - 1px)) 0 0 / 100% calc(100% / 14), var(--caderno, #fffefa); filter: brightness(.97); }
.fv-luz { position: absolute; inset: 0; opacity: 0; background: #1b1d26; }
.fv-verso .fv-luz { background: #fff; }
@keyframes luz-folha { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
/* the page underneath catches the shadow of the sheet passing over it */
.caderno-pagina.sob-folha::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / .22), transparent 60%); animation: luz-folha 1s ease both; }

/* "Limpo": the same notebook, flat and modern — white card, no spiral, no tilt, a clean font */
.caderno-app[data-estilo="limpo"] .caderno-livro { background: var(--folha); padding: 10px; border: 1px solid var(--linha); border-radius: 18px; box-shadow: var(--sombra); }
.caderno-app[data-estilo="limpo"] .caderno-livro::before { display: none; }
.caderno-app[data-estilo="limpo"] .caderno-pagina { border-radius: 12px; box-shadow: none; }
.caderno-app[data-estilo="limpo"] .papel-pautado, .caderno-app[data-estilo="limpo"] .papel-amarelo { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0.98H100M0 1.98H100M0 2.98H100M0 3.98H100M0 4.98H100M0 5.98H100M0 6.98H100M0 7.98H100M0 8.98H100M0 9.98H100M0 10.98H100M0 11.98H100M0 12.98H100M0 13.98H100' stroke='%23eceef3' stroke-width='1' vector-effect='non-scaling-stroke' shape-rendering='crispEdges' fill='none'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, #ffffff; }
.caderno-app[data-estilo="limpo"] .texto-linha, .caderno-app[data-estilo="limpo"] .postit-texto { font-family: var(--texto); font-weight: 500; font-size: clamp(.9rem, .6rem + 1vw, 1.25rem); }
.caderno-app[data-estilo="limpo"] .item-postit { transform: scale(var(--esc, 1)); border-radius: 12px; box-shadow: 0 6px 16px -10px rgb(0 0 0 / .4); }
.caderno-app[data-estilo="limpo"] .item-postit::before { display: none; }
.caderno-app[data-estilo="limpo"] .caderno-vazio { font-family: var(--texto); font-weight: 600; font-size: 1.1rem; }
:root[data-tema-ativo="escuro"] .caderno-app[data-estilo="limpo"] .caderno-pagina { filter: none; }
.caderno-aviso { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fde8e6; color: #7a1d14; border: 1px solid #f0b4ad; font-weight: 600; }

/* ---------- what the student wants to use: notebook, diary, planner, sketchbook, painting canvas, sheet music ---------- */
.caderno-modelos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.modelo { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 12px 5px 6px; border-radius: 12px; border: 1.5px solid var(--linha-forte); background: var(--folha); color: var(--tinta); font: 700 .86rem var(--texto); cursor: pointer; transition: transform .2s, border-color .2s; }
.modelo:hover { transform: translateY(-2px); } .modelo[aria-pressed="true"] { border-color: var(--caneta); background: var(--caneta-claro); color: var(--caneta-forte); }
.modelo i { width: 30px; height: 24px; border-radius: 3px 5px 5px 3px; box-shadow: 0 2px 4px rgb(0 0 0 / .25); flex: none; }
.modelo-caderno i { background: linear-gradient(90deg, #d9dde3 0 4px, #2544a8 4px); }
.modelo-diario i { background: linear-gradient(90deg, transparent 0 70%, #c8372d 70% 80%, transparent 80%), #7a4a32; }
.modelo-agenda i { background: linear-gradient(#f5c542 0 6px, #2f5e4e 6px); }
.modelo-desenho i { background: linear-gradient(#1e1e22 0 5px, #fbfaf6 5px); }
.modelo-tela i { background: #f3ede0; box-shadow: inset 0 0 0 3px #a8743f, 0 2px 4px rgb(0 0 0 / .25); }
.modelo-partitura i { background: repeating-linear-gradient(transparent 0 3px, #3b3b40 3px 4px) 0 4px / 100% 16px no-repeat, #fff; }
.caderno-horas { position: absolute; inset: 0 auto 0 0; width: 11%; z-index: 0; pointer-events: none; display: none; }
.caderno-horas span { position: absolute; right: 8px; translate: 0 -105%; font: 700 clamp(.6rem, .4rem + .5vw, .85rem) var(--texto); color: #6b7a74; }
.caderno-pagina[data-cabeca]:not([data-cabeca=""])::before { content: attr(data-cabeca); position: absolute; z-index: 0; top: 1.2%; left: 6%; font: 700 clamp(.9rem, .6rem + .9vw, 1.35rem) var(--mao); color: #8a6d4a; pointer-events: none; }
.caderno-app:not([data-modelo="caderno"]) :is(.caderno-papeis, .caderno-capas) { display: none; }
/* diary: brown leather with a red ribbon, cream pages with faint rules, no margin */
.caderno-app[data-modelo="diario"] .caderno-livro { background: radial-gradient(120% 90% at 30% 20%, #8c5a3e, #5e3a27); padding-left: 18px; }
.caderno-app[data-modelo="diario"] .caderno-livro::before { display: none; }
.caderno-app[data-modelo="diario"] .caderno-livro::after { content: ""; position: absolute; z-index: 4; top: -6px; right: 6%; width: 14px; height: 44%; background: linear-gradient(90deg, #a82a24, #d0443c 45%, #a82a24); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); box-shadow: 0 2px 4px rgb(0 0 0 / .3); pointer-events: none; }
.caderno-app[data-modelo="diario"] :is(.caderno-pagina, .fv-pagina, .fv-verso) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0.98H100M0 1.98H100M0 2.98H100M0 3.98H100M0 4.98H100M0 5.98H100M0 6.98H100M0 7.98H100M0 8.98H100M0 9.98H100M0 10.98H100M0 11.98H100M0 12.98H100M0 13.98H100' stroke='%23dccaa6' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, #f7eedb; }
/* planner: green cover, a column of hours, a yellow band with the weekday */
.caderno-app[data-modelo="agenda"] .caderno-livro { background: linear-gradient(135deg, #34675a, #234c40); }
.caderno-app[data-modelo="agenda"] :is(.caderno-pagina, .fv-pagina, .fv-verso) { background: linear-gradient(90deg, transparent 0 11%, #e0b23c 11% calc(11% + 2px), transparent calc(11% + 2px)), linear-gradient(rgb(245 197 66 / .35), rgb(245 197 66 / .35)) 0 0 / 100% calc(100% / 14) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0.98H100M0 1.98H100M0 2.98H100M0 3.98H100M0 4.98H100M0 5.98H100M0 6.98H100M0 7.98H100M0 8.98H100M0 9.98H100M0 10.98H100M0 11.98H100M0 12.98H100M0 13.98H100' stroke='%23c9d6cf' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, #fffef8; }
.caderno-app[data-modelo="agenda"] .caderno-horas { display: block; }
.caderno-app[data-modelo="agenda"] .caderno-pagina::before { left: 13%; right: auto; color: #234c40; font-family: var(--texto); font-size: clamp(.75rem, .5rem + .6vw, 1rem); }
/* sketchbook: black cover, thick white paper with grain, no rules */
.caderno-app[data-modelo="desenho"] .caderno-livro { background: #1e1e22; }
.caderno-app[data-modelo="desenho"] :is(.caderno-pagina, .fv-pagina, .fv-verso) { background: radial-gradient(rgb(0 0 0 / .035) 1px, transparent 1.4px) 0 0 / 5px 5px, radial-gradient(rgb(0 0 0 / .025) 1px, transparent 1.6px) 2px 3px / 7px 7px, #fbfaf6; }
/* painting canvas: a wooden stretcher frame, linen weave, no spiral */
.caderno-app[data-modelo="tela"] .caderno-livro { background: linear-gradient(90deg, #b98451, #9a6a3c 50%, #b98451); border-radius: 4px; padding: 16px; box-shadow: var(--sombra-forte), inset 0 0 0 2px rgb(0 0 0 / .15); }
.caderno-app[data-modelo="tela"] .caderno-livro::before { display: none; }
.caderno-app[data-modelo="tela"] :is(.caderno-pagina, .fv-pagina, .fv-verso) { border-radius: 2px; background: repeating-linear-gradient(0deg, rgb(120 100 70 / .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(120 100 70 / .07) 0 1px, transparent 1px 3px), #f3ede0; box-shadow: inset 0 0 18px rgb(0 0 0 / .12); }
/* sheet music: three staves */
.caderno-app[data-modelo="partitura"] .caderno-livro { background: linear-gradient(135deg, #3b3150, #241d33); }
.caderno-app[data-modelo="partitura"] :is(.caderno-pagina, .fv-pagina, .fv-verso) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M4 1.60H96M4 2.10H96M4 2.60H96M4 3.10H96M4 3.60H96M4 6.10H96M4 6.60H96M4 7.10H96M4 7.60H96M4 8.10H96M4 10.60H96M4 11.10H96M4 11.60H96M4 12.10H96M4 12.60H96' stroke='%233b3b40' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Cpath d='M4 1.6V3.6M96 1.6V3.6M4 6.1V8.1M96 6.1V8.1M4 10.6V12.6M96 10.6V12.6' stroke='%233b3b40' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, #fffefa; }

.caderno-vazio.some { opacity: 0; translate: 0 -6px; }
.caderno-app[data-modelo="diario"] .caderno-vazio, .caderno-app[data-modelo="agenda"] .caderno-vazio { top: 16%; }
.caderno-app[data-modelo="agenda"] .caderno-vazio { left: 15%; }
.caderno-app[data-modelo="partitura"] .caderno-vazio { top: 30%; left: 8%; }
.caderno-app[data-modelo="desenho"] .caderno-vazio, .caderno-app[data-modelo="tela"] .caderno-vazio { left: 8%; }
/* the painting row: only where painting makes sense */
.caderno-arte { display: none; }
.caderno-app:is([data-modelo="desenho"], [data-modelo="tela"]) .caderno-arte { display: flex; }
.paleta { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 6px; }
.cor-arte { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgb(0 0 0 / .25); cursor: pointer; padding: 0; }
.cor-arte[aria-pressed="true"] { outline: 3px solid var(--caneta); outline-offset: 2px; }
.cor-d9483b { background: #d9483b; }
.cor-f08a24 { background: #f08a24; }
.cor-f5c542 { background: #f5c542; }
.cor-7cc04b { background: #7cc04b; }
.cor-2f9e6e { background: #2f9e6e; }
.cor-3aa0d8 { background: #3aa0d8; }
.cor-2544a8 { background: #2544a8; }
.cor-7b4fb8 { background: #7b4fb8; }
.cor-e86aa6 { background: #e86aa6; }
.cor-8a5a3b { background: #8a5a3b; }
.cor-1e1e22 { background: #1e1e22; }
.cor-ffffff { background: #ffffff; }
.f-colorir i { background: linear-gradient(var(--cor-arte, #2544a8) 0 70%, #f1d9b5 70% 90%, var(--cor-arte, #2544a8) 90%); }
.f-giz i { width: 12px; border-radius: 3px; background: linear-gradient(var(--cor-arte, #2544a8) 0 12%, #fff 12% 18%, var(--cor-arte, #2544a8) 18%); }
.f-pincel i { width: 7px; background: linear-gradient(var(--cor-arte, #2544a8) 0 22%, #c9c9cf 22% 32%, #b07a45 32%); border-radius: 50% 50% 3px 3px; }
.f-aquarela i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--cor-arte, #2544a8) 45%, #fff), var(--cor-arte, #2544a8)); opacity: .8; }
.f-tinta i { width: 13px; height: 18px; border-radius: 3px 3px 5px 5px; background: linear-gradient(#e9e3d3 0 25%, var(--cor-arte, #2544a8) 25%); }
.caderno-tinta[data-ferramenta="pincel"], .caderno-tinta[data-ferramenta="aquarela"], .caderno-tinta[data-ferramenta="tinta"], .caderno-tinta[data-ferramenta="giz"], .caderno-tinta[data-ferramenta="colorir"] { cursor: crosshair; }

/* ---------- sheet music: the notes drawer and the notes on the staff ---------- */
.caderno-so-partitura { display: none; }
.caderno-app[data-modelo="partitura"] .caderno-so-partitura { display: inline-flex; }
.notas-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.nota-opcao { display: grid; justify-items: center; gap: 2px; width: 74px; padding: 6px 4px; border-radius: 12px; border: 1.5px solid var(--linha-forte); background: #fffdf5; color: #2c2c31; cursor: pointer; font: 700 .72rem var(--texto); }
.nota-opcao i { display: block; width: 22px; height: 44px; }
.nota-opcao i svg { width: 100%; height: 100%; overflow: visible; }
.nota-opcao[aria-pressed="true"] { border-color: var(--caneta); box-shadow: 0 0 0 2px var(--caneta); }
.item-nota { width: auto; height: calc(200% / 14); aspect-ratio: 1 / 2; transform: translate(-50%, -50%) scale(var(--esc, 1)); transform-origin: center; color: #1d2433; filter: none; cursor: grab; }
.item-nota svg { width: 100%; height: 100%; overflow: visible; display: block; }
.nota-clave { font: 400 92px/1 "Segoe UI Symbol", "Noto Music", "Apple Symbols", "Bravura", serif; fill: currentColor; }
.nota-clave-fa { font-size: 58px; }
.nota-nome { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); font: 700 clamp(.6rem, .4rem + .5vw, .85rem) var(--texto); color: #7d62e0; white-space: nowrap; pointer-events: none; }
.item-nota .item-fechar { top: -6px; right: -14px; }
.caderno-app[data-ferramenta="nota"] .caderno-tinta { cursor: copy; }