/* a cópia do Bear (tema Rosé Pine Dawn, letra Aristotelica 30, como no Mac da Dra Lê), 08/10/2026 */
@font-face { font-family: 'Aristotelica'; src: url(fontes/Aristotelica-Pro-Display-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'Aristotelica'; src: url(fontes/Aristotelica-Pro-Display-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap }
@font-face { font-family: 'Arista Alt'; src: url(fontes/Arista-Pro-Alternate-SemiBold-trial.woff2) format('woff2'); unicode-range: U+0000-002F, U+003A-003F, U+0041-2029, U+202B-202F, U+2031-F72F, U+F73A-FFFF; font-weight: 600; font-display: swap }
@font-face { font-family: 'Arista Alt'; src: url(fontes/Arista-Pro-Alternate-Bold-trial.woff2) format('woff2'); unicode-range: U+0000-002F, U+003A-003F, U+0041-2029, U+202B-202F, U+2031-F72F, U+F73A-FFFF; font-weight: 700; font-display: swap }
:root {
  --fundo: #F9F4EE; --lado: #F1E9E1; --texto: #565276; --azul: #3A6880; --cinza: #9793A4; --data: #B4B0BA;
  --pilula: #E1D9D1; --pilula-i: #8E889B; --sel: #E0BDB6; --rosa: #B4637A; --tagi: #D4B5B8; --linha: #E9E3DC;
  --botao: #FBF6F0; --icone: #9A94A8; --marca: #F6D3A8; --ui: 'Avenir Next', 'Avenir', 'Nunito Sans', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0 }
html, body { height: 100%; background: var(--fundo); color: var(--texto); overflow: hidden; -webkit-font-smoothing: antialiased }
a, button, input, select, textarea, [tabindex] { outline: none; -webkit-tap-highlight-color: transparent }
:focus, :focus-visible { outline: none; box-shadow: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0 }
.ico { width: 20px; height: 20px; flex: none }
.ico.pequeno { width: 14px; height: 14px }
.cresce { flex: 1 }
#app .so-cel { display: none }
[hidden] { display: none !important }

#app { display: grid; grid-template-columns: 188px 436px 1fr; height: 100dvh; font-family: var(--ui) }
#app[data-modo="2"] { grid-template-columns: 0 436px 1fr }
#app[data-modo="1"] { grid-template-columns: 0 0 1fr }
#app[data-modo="2"] #lado, #app[data-modo="1"] #lado, #app[data-modo="1"] #lista { visibility: hidden; overflow: hidden }
.topo { height: 60px; display: flex; align-items: center; flex: none }

/* barra lateral */
#lado { background: var(--lado); display: flex; flex-direction: column; min-width: 0; overflow: hidden }
#lado .topo { justify-content: flex-end; padding: 0 12px }
.b-ico { width: 36px; height: 36px; display: grid; place-items: center; color: var(--icone); border-radius: 10px }
.b-ico .ico { width: 22px; height: 22px }
#nav { flex: 1; overflow-y: auto; padding: 4px 8px 32px; scrollbar-width: none }
#nav::-webkit-scrollbar { display: none }
.item { display: flex; align-items: center; gap: 14px; width: 100%; height: 28px; border-radius: 8px; padding: 0 6px 0 calc(28px + var(--n, 0) * 14px); font-size: 15.5px; text-align: left; white-space: nowrap; position: relative }
.item > span:not(.seta):not(.cresce) { overflow: hidden; text-overflow: ellipsis }
.item .ico { color: var(--rosa); opacity: .75; width: 19px; height: 19px }
.item .ico.tagi { color: var(--tagi); opacity: 1 }
.item .ico.cheio { opacity: .8 }
.item.sub { padding-left: 41px }
.item.topo-notas { padding-left: 28px }
.item.topo-notas .ico.pequeno { color: var(--rosa); opacity: .8; width: 15px; height: 15px }
.item.sel { background: var(--sel) }
.item .seta { position: absolute; left: calc(6px + var(--n, 0) * 14px); top: 6px; width: 16px; height: 16px; display: grid; place-items: center; color: var(--rosa); opacity: .8 }
.item .seta .ico { width: 15px; height: 15px; transform: rotate(-90deg); transition: transform .15s }
.item .seta.aberta .ico, #seta-notas:not(.fechada) .ico { transform: none }
#seta-notas.fechada .ico { transform: rotate(-90deg) }
.vao { height: 22px }

/* lista */
#lista { background: var(--fundo); border-right: 1px solid var(--linha); display: flex; flex-direction: column; min-width: 0; overflow: hidden }
#lista .topo { padding: 0 22px 0 24px; gap: 14px; height: 52px }
#titulo-lista { display: flex; align-items: center; gap: 4px; font-size: 19px; font-weight: 700; letter-spacing: -.1px; min-width: 0 }
#titulo-lista span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#titulo-lista .ico { color: var(--icone) }
.redondo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--icone); background: var(--botao); box-shadow: 0 0 0 1px rgba(86,82,118,.07), 0 1px 3px rgba(86,82,118,.06) }
.redondo .ico { width: 19px; height: 19px }
#caixa-busca { padding: 0 24px 12px }
#busca { width: 100%; height: 40px; border-radius: 20px; border: 0; background: var(--lado); padding: 0 24px; font: 16px var(--ui); color: var(--texto); -webkit-appearance: none }
#busca::placeholder { color: var(--data) }
#notas { flex: 1; overflow-y: auto; padding: 0 24px 40px; overscroll-behavior: contain }
.nota { padding: 9px 0 9px; border-bottom: 1px solid var(--linha); cursor: default; position: relative }
.nota::before { content: ''; position: absolute; inset: 1px -20px; border-radius: 10px; z-index: -1 }
.nota.sel::before { background: var(--lado) }
.nota .t { font-size: 16px; font-weight: 600; color: var(--azul); line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.nota .t.sem { color: var(--cinza); font-weight: 500 }
.nota .d { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--data); line-height: 20px }
.nota .d .ico.pino { width: 16px; height: 16px; color: var(--icone) }
.fotos { display: flex; gap: 8px; margin: 8px -24px 6px 0; overflow: hidden }
.fotos img { width: 112px; height: 71px; object-fit: cover; border-radius: 6px; flex: none; background: var(--lado) }
.nada { padding: 48px 0; text-align: center; color: var(--data); font-size: 15px }

/* editor */
#ed { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden }
#ed .topo { position: absolute; inset: 0 0 auto 0; height: 52px; padding: 0 9px 0 12px; z-index: 3; pointer-events: none }
#ed .topo > * { pointer-events: auto }
#b-modo { opacity: 0; transition: opacity .2s }
#ed .topo:hover #b-modo, #app[data-modo="1"] #b-modo { opacity: .7 }
.grupo { display: flex; align-items: center; height: 35px; border-radius: 18px; background: var(--botao); box-shadow: 0 0 0 1px rgba(86,82,118,.08), inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(86,82,118,.04); padding: 0 8px; gap: 2px; color: var(--icone) }
.grupo button { height: 35px; padding: 0 9px; display: flex; align-items: center }
.grupo .ico { width: 20px; height: 20px }
#b-biu { font: 700 17px var(--ui); letter-spacing: .5px; gap: 1px }
#b-biu i { font-weight: 500; font-style: italic; font-family: Georgia, serif }
#b-biu u { font-weight: 500; text-underline-offset: 2px }
#b-mais { padding: 0 6px }
#papel { flex: 1; overflow-y: auto; padding: 51px 48px 40vh; overscroll-behavior: contain }
#papel.trancada #cm { display: none }
#papel.trancada::after { content: 'esta nota está bloqueada'; display: block; text-align: center; color: var(--data); font: 17px var(--ui); padding-top: 30vh }
#cm { max-width: 828px; margin: 0 auto }
#vazio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--linha); pointer-events: none }
#vazio .ico { width: 80px; height: 80px }
#app.com-nota #vazio { display: none }
#app:not(.com-nota) #papel { visibility: hidden }

.cm-editor { font-family: 'Aristotelica', var(--ui); font-size: 30px; line-height: 54px; color: var(--texto); background: none }
.cm-editor.cm-focused { outline: none }
#cm .cm-scroller { font-family: inherit !important; line-height: inherit !important; overflow: visible !important }
.cm-content { -webkit-text-stroke: .4px currentColor; padding: 0; caret-color: var(--texto); white-space: pre-wrap; word-break: break-word }
.cm-line { padding: 0 }
.cm-cursor { border-left: 2.5px solid var(--texto) !important; margin-left: -1px }
.cm-selectionBackground { background: rgba(144,122,169,.18) !important }
.cm-focused .cm-selectionBackground { background: rgba(144,122,169,.26) !important }
.cm-b { font-weight: 700 }
.cm-i { font-style: italic }
.cm-u { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px }
.cm-s { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--cinza) }
.cm-h { background: var(--marca); border-radius: 6px; padding: 2px 0 }
.cm-c { font-family: ui-monospace, Menlo, monospace; font-size: .8em; background: var(--lado); border-radius: 8px; padding: 2px 10px }
.cm-marca { color: var(--data) }
.cm-link { color: var(--azul); text-decoration: underline; text-decoration-color: rgba(58,104,128,.35); text-underline-offset: 6px; text-decoration-thickness: 2px; cursor: pointer }
.cm-wiki { color: var(--azul); cursor: pointer; border-bottom: 2px dotted rgba(58,104,128,.45) }
.cm-l-h1, .cm-l-h2, .cm-l-h3, .cm-l-h4, .cm-l-h5, .cm-l-h6 { font-family: 'Arista Alt', 'Aristotelica', var(--ui); font-weight: 600 }
.cm-l-h1 { font-size: 1.4em; line-height: 1.5 }
.cm-l-h2 { font-size: 1.22em; line-height: 1.5 }
.cm-l-h3 { font-size: 1.1em }
.cm-l-q { border-left: 4px solid var(--pilula); padding-left: 24px !important; color: var(--cinza) }
.cm-l-li { padding-left: 1.1em !important; text-indent: -1.1em }
.cm-bola { display: inline-block; width: 1.1em; text-indent: 0; color: var(--rosa) }
.cm-num { color: var(--rosa) }
.cm-caixa { display: inline-flex; align-items: center; justify-content: center; width: .78em; height: .78em; margin-right: .32em; border: 2.5px solid var(--icone); border-radius: 7px; vertical-align: -0.06em; text-indent: 0; cursor: pointer; color: #fff }
.cm-caixa.feito { background: var(--icone) }
.cm-l-feito { color: var(--data); text-decoration: line-through; text-decoration-thickness: 2px }
.cm-l-hr { color: var(--data) }
.cm-hr { display: inline-block; width: 100%; height: 2px; background: var(--linha); vertical-align: middle }
.cm-l-code { font-family: ui-monospace, Menlo, monospace; font-size: 20px; line-height: 34px; background: var(--lado); padding: 0 24px !important }
.cm-l-cerca { color: var(--data) }
.cm-tag { display: inline-flex; align-items: center; gap: 12px; height: 49px; padding: 0 24px 0 24px; border-radius: 25px; background: var(--pilula); vertical-align: middle; cursor: pointer; line-height: 1; margin: 2.5px 0 }
.cm-tag-i { display: inline-flex; color: var(--pilula-i); font-size: 26px }
.cm-tag-cru { background: var(--pilula); border-radius: 25px; padding: 6px 24px }
.cm-img { display: inline-block; vertical-align: top; padding: 10px 12px 10px 0; line-height: 0; max-width: 100% }
.cm-img img { max-width: 100%; height: auto; border-radius: 6px; display: block }
.cm-img.vazia { height: 120px; border-radius: 6px; background: var(--lado); margin: 10px 0 }
.cm-arq { display: inline-flex; align-items: center; height: 49px; padding: 0 24px; border-radius: 12px; background: var(--lado); color: var(--azul); font: 600 18px var(--ui); text-decoration: none; vertical-align: middle }

/* janelinhas */
.flutua { position: absolute; z-index: 20; background: var(--botao); border-radius: 18px; box-shadow: 0 0 0 1px rgba(86,82,118,.08), 0 12px 32px rgba(86,82,118,.14); padding: 10px; font: 15px var(--ui); color: var(--texto) }
#estilo, #info, #mais { top: 48px; right: 9px }
#estilo { display: grid; grid-template-columns: repeat(5, 48px); gap: 4px }
#estilo button { height: 44px; border-radius: 12px; font: 600 17px var(--ui); color: var(--icone) }
#estilo button:hover, #menu button:hover, #mais button:hover { background: var(--lado) }
#estilo mark { background: var(--marca); color: inherit; border-radius: 4px; padding: 0 3px }
#info { width: 300px; padding: 16px 24px }
#info .linha { display: flex; justify-content: space-between; gap: 24px; padding: 8px 0; border-bottom: 1px solid var(--linha) }
#info .linha:last-child { border: 0 }
#info span { color: var(--cinza) }
#menu, #mais { min-width: 240px; display: flex; flex-direction: column }
#menu { position: fixed }
#menu button, #mais button { text-align: left; padding: 10px 24px; border-radius: 10px }

/* celular: uma tela de cada vez, como no Bear do iPhone */
@media (max-width: 760px) {
  #app .so-cel { display: grid }
  #app, #app[data-modo] { display: block; position: relative }
  #lado, #lista, #ed { position: absolute; inset: 0; visibility: visible !important; overflow: hidden }
  #app #lado, #app #lista, #app #ed { display: none }
  #app[data-tela="lado"] #lado, #app[data-tela="lista"] #lista, #app[data-tela="ed"] #ed { display: flex }
  #lado .topo { justify-content: flex-start; padding: 0 16px }
  #b-lado { display: none }
  .item { height: 44px; font-size: 18px; margin-bottom: 2px }
  #nav { padding: 8px 16px 48px }
  #lista { border: 0 }
  #lista .topo { padding: 0 24px 0 16px; padding-top: env(safe-area-inset-top); height: calc(60px + env(safe-area-inset-top)) }
  #notas { padding: 0 24px 60px }
  #b-modo { display: none }
  #ed .topo { padding-top: env(safe-area-inset-top); height: calc(60px + env(safe-area-inset-top)); background: linear-gradient(var(--fundo) 70%, rgba(249,244,238,0)) }
  #papel { padding: calc(72px + env(safe-area-inset-top)) 24px 50vh }
  .cm-editor { font-size: 21px; line-height: 38px }
  .cm-tag { height: 36px; padding: 0 24px; gap: 8px; border-radius: 18px }
  .cm-tag-i { font-size: 18px }
  .cm-l-code { font-size: 15px; line-height: 26px }
  #estilo { grid-template-columns: repeat(5, 44px) }
  #info { width: calc(100vw - 32px) }
}

/* movimento (09/10/2026, pedido da Dra Lê): tudo responde ao passar por cima e ao clicar */
:root { --mola: cubic-bezier(.2, .9, .25, 1.2); --suave: cubic-bezier(.25, .8, .25, 1) }
#app { transition: grid-template-columns .4s var(--suave) }
#notas { position: relative; z-index: 0 }

/* lista */
.nota > * { transition: transform .28s var(--suave) }
.nota::before { background: var(--lado); opacity: 0; transform: scale(.96); transition: opacity .22s, transform .3s var(--suave) }
.nota.sel::before { opacity: 1; transform: none }
.nota .t { transition: color .2s, transform .28s var(--suave) }
.nota .fotos img { transition: transform .35s var(--suave), box-shadow .35s }
.nota:active > * { transform: translateX(5px) scale(.985) }
.nota:active::before { opacity: 1; transform: scale(.985) }
@media (hover: hover) {
  .nota:hover > * { transform: translateX(5px) }
  .nota:hover::before { opacity: .65; transform: none }
  .nota:hover .fotos img { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(86,82,118,.13) }
}
#notas.entra .nota { animation: sobe .42s var(--suave) both }
#notas.entra .nota:nth-child(2) { animation-delay: .03s } #notas.entra .nota:nth-child(3) { animation-delay: .06s }
#notas.entra .nota:nth-child(4) { animation-delay: .09s } #notas.entra .nota:nth-child(5) { animation-delay: .12s }
#notas.entra .nota:nth-child(6) { animation-delay: .15s } #notas.entra .nota:nth-child(7) { animation-delay: .18s }
#notas.entra .nota:nth-child(8) { animation-delay: .21s } #notas.entra .nota:nth-child(9) { animation-delay: .24s }
#notas.entra .nota:nth-child(10) { animation-delay: .27s } #notas.entra .nota:nth-child(n+11) { animation-delay: .3s }
@keyframes sobe { from { opacity: 0; transform: translateY(12px) } }

/* barra do lado */
.item { transition: background .2s, transform .16s var(--suave) }
.item .ico { transition: transform .35s var(--mola) }
.item:active { transform: scale(.96) }
.item.sel { animation: escolhe .4s var(--mola) }
@keyframes escolhe { from { transform: scale(.93) } }
@media (hover: hover) {
  .item:hover:not(.sel) { background: rgba(224,189,182,.38) }
  .item:hover > .ico:not(.pequeno) { transform: scale(1.14) rotate(-4deg) }
}

/* botões */
.redondo, .b-ico, .grupo button, #titulo-lista, #titulo-lista .ico { transition: transform .18s var(--suave), box-shadow .22s, background .2s, color .2s }
.redondo:active { transform: scale(.88); box-shadow: inset 0 2px 5px rgba(86,82,118,.16), 0 0 0 1px rgba(86,82,118,.08) }
.b-ico:active { transform: scale(.86) }
.grupo { transition: box-shadow .25s, transform .25s var(--suave) }
.grupo button { border-radius: 14px }
.grupo button:active { transform: scale(.82) }
#titulo-lista:active { transform: scale(.96) }
@media (hover: hover) {
  .redondo:hover { transform: translateY(-2px); color: var(--texto); box-shadow: 0 0 0 1px rgba(86,82,118,.09), 0 8px 18px rgba(86,82,118,.13) }
  .redondo:hover:active { transform: scale(.88) }
  .b-ico:hover { background: rgba(86,82,118,.07); color: var(--texto) }
  .grupo:hover { box-shadow: 0 0 0 1px rgba(86,82,118,.1), inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(86,82,118,.1) }
  .grupo button:hover { color: var(--texto); transform: translateY(-1px) }
  .grupo button:hover:active { transform: scale(.82) }
  #titulo-lista:hover .ico { transform: translateY(2px); color: var(--texto) }
}

/* janelinhas */
.flutua:not([hidden]) { animation: abre .24s var(--mola); transform-origin: top right }
#menu:not([hidden]) { transform-origin: top left }
@keyframes abre { from { opacity: 0; transform: scale(.9) translateY(-6px) } }
#estilo button, #menu button, #mais button { transition: background .15s, transform .14s var(--suave), color .15s }
#estilo button:active, #menu button:active, #mais button:active { transform: scale(.92) }
@media (hover: hover) { #estilo button:hover { color: var(--texto); transform: translateY(-1px) } }
#caixa-busca:not([hidden]) { animation: abre .26s var(--mola); transform-origin: top center }

/* a nota */
#cm.entra { animation: sobe .45s var(--suave) }
.cm-tag { transition: background .2s, transform .2s var(--suave), box-shadow .2s }
.cm-tag:active { transform: scale(.94) }
.cm-caixa { transition: background .2s, border-color .2s, transform .22s var(--mola) }
.cm-caixa:active { transform: scale(.78) }
.cm-caixa.feito svg { animation: marca .35s var(--mola) }
@keyframes marca { from { transform: scale(0) } }
.cm-link, .cm-wiki { transition: color .2s, text-decoration-color .2s, border-color .2s }
.cm-img img { transition: transform .35s var(--suave), box-shadow .35s }
@media (hover: hover) {
  .cm-tag:hover { background: #D9CFC6; box-shadow: 0 6px 14px rgba(86,82,118,.1) }
  .cm-caixa:hover { border-color: var(--texto); transform: scale(1.08) }
  .cm-link:hover { text-decoration-color: var(--azul) }
  .cm-img img:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(86,82,118,.15) }
}

/* celular: as telas entram deslizando */
@media (max-width: 760px) {
  #app[data-tela="ed"] #ed { animation: entraDireita .34s var(--suave) }
  #app[data-tela="lista"] #lista, #app[data-tela="lado"] #lado { animation: entraEsquerda .34s var(--suave) }
}
@keyframes entraDireita { from { transform: translateX(28%); opacity: 0 } }
@keyframes entraEsquerda { from { transform: translateX(-10%); opacity: .3 } }

/* gesto de dois dedos (09/10/2026): as colunas abrem e fecham deslizando, como no Bear */
@media (min-width: 761px) {
  #lado, #lista { transition: visibility 0s linear .42s }
  #app[data-modo="3"] #lado, #app[data-modo="3"] #lista, #app[data-modo="2"] #lista { transition-delay: 0s }
  #lado > * { width: 188px; flex: none; transition: transform .42s var(--suave) }
  #lado > #nav { flex: 1 }
  #lista > * { width: 436px; transition: transform .42s var(--suave) }
  #lista > #notas { flex: 1 }
  #app[data-modo="2"] #lado > *, #app[data-modo="1"] #lado > * { transform: translateX(-188px) }
  #app[data-modo="1"] #lista > * { transform: translateX(-436px) }
  #app { transition: grid-template-columns .42s var(--suave) }
}