@font-face {
  font-family: "Newsreader";
  src: url("./assets/fonts/newsreader-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --papel:       #F7F8FA;   /* fundo do quadro */
  --superficie:  #FFFFFF;   /* cards, barras, gaveteiro */
  --linha:       #E2E6EC;
  --tinta:       #171A1F;
  --tinta-suave: #5A6270;
  --apagado:     #8A94A4;   /* item já feito */
  --caneta:      #3A6EA5;   /* o acento, cor de caneta esferográfica */
  --marca:       #E8C547;   /* marca-texto e notas */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--papel);
  color: var(--tinta);
  /* Fonte do sistema: não baixa nada e pinta na primeira passada. */
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Impede o "puxar para atualizar" e o zoom por toque duplo do iOS. */
  overscroll-behavior: none;
  -webkit-touch-callout: none;
}

.tela { position: fixed; inset: 0; }
.tela[hidden] { display: none; }

/* --- senha --- */
.cartao-senha {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(20rem, 88vw);
  display: flex; flex-direction: column; gap: .75rem;
  text-align: center;
}
.cartao-senha h1 {
  font: italic 700 2.5rem Newsreader, Georgia, serif;
  margin: 0;
}
.cartao-senha .sub { margin: 0 0 1rem; color: var(--tinta-suave); font-size: .9rem; }
.cartao-senha input {
  padding: .9rem; font-size: 1.1rem; text-align: center;
  border: 1px solid #D8DEE6; border-radius: .6rem; background: #fff;
}
.cartao-senha button {
  padding: .9rem; font-size: 1rem; border: 0; border-radius: .6rem;
  background: var(--caneta); color: #fff; cursor: pointer;
}
.erro { color: #b3261e; font-size: .9rem; margin: 0; }

/* --- quadro --- */
#tela-quadro {
  background-color: var(--papel);
  background-image: radial-gradient(circle, #DCE1E8 1px, transparent 1px);
  background-size: 24px 24px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#tela-quadro canvas, #camada-cards {
  position: absolute; inset: 0;
}
#camada-cards { transform-origin: 0 0; }
#tinta-ativa { pointer-events: none; }

.estado {
  position: fixed; right: .75rem; bottom: .75rem;
  padding: .35rem .7rem; border-radius: 1rem;
  background: rgba(255,255,255,.9); font-size: .78rem;
  color: var(--tinta-suave);
}

.card {
  position: absolute;
  background: #fff;
  border: 1px solid #E2E6EC;
  border-radius: .7rem;
  box-shadow: 0 2px 10px rgba(23,26,31,.07);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.card.selecionado { border-color: var(--caneta); }
.card-barra {
  height: 1.6rem; flex: none;
  background: #EDF0F4; cursor: grab;
  display: flex; justify-content: flex-end; align-items: center;
  touch-action: none;
}
.card-barra:active { cursor: grabbing; }
.card-apagar {
  border: 0; background: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 .5rem; color: var(--tinta-suave);
}
.card-corpo { flex: 1; padding: .6rem .7rem; overflow: auto; }
.card-texto { outline: none; min-height: 100%; white-space: pre-wrap; }

.lista-titulo { font-weight: 600; margin-bottom: .4rem; outline: none; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; gap: .5rem; align-items: flex-start; padding: .18rem 0; }
.lista li span { outline: none; flex: 1; }
.lista li.feito span { text-decoration: line-through; color: #8A94A4; }
.lista li input { margin-top: .35rem; width: 1.05rem; height: 1.05rem; accent-color: var(--caneta); }
.lista-add {
  border: 0; background: none; color: var(--tinta-suave);
  cursor: pointer; padding: .3rem 0; font-size: .85rem;
}
.card[data-tipo="sticky"] .card-corpo { color: #fff; }
.card-texto, .lista li span, .lista-titulo { -webkit-user-select: text; user-select: text; }
.card-redimensionar {
  position: absolute; right: 0; bottom: 0;
  width: 2.25rem; height: 2.25rem; z-index: 5;
  cursor: nwse-resize; touch-action: none;
  border: 0; border-radius: .7rem 0 0 0;
  background: rgba(255,255,255,.92);
  box-shadow: -1px -1px 0 var(--linha);
}
.card-redimensionar::after {
  content: ""; position: absolute; right: .45rem; bottom: .45rem;
  width: .72rem; height: .72rem;
  border-right: 3px solid var(--caneta);
  border-bottom: 3px solid var(--caneta);
}
.card-redimensionar:hover { background: #EDF3FA; }

.botao-flutuante {
  position: fixed; top: .75rem; left: .75rem; z-index: 30;
  width: 2.6rem; height: 2.6rem; border-radius: .7rem;
  border: 1px solid #E2E6EC; background: #fff;
  font-size: 1.1rem; cursor: pointer;
}
#gaveta-quadros {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: min(17rem, 80vw); padding: 1rem;
  background: #fff; border-right: 1px solid #E2E6EC;
  box-shadow: 4px 0 18px rgba(23,26,31,.08);
  overflow: auto;
}
#gaveta-quadros[hidden] { display: none; }
#gaveta-quadros h2 { font: italic 700 1.4rem Newsreader, Georgia, serif; margin: .2rem 0 1rem; }
#lista-quadros { list-style: none; margin: 0 0 1rem; padding: 0; }
#lista-quadros li { padding: .55rem .6rem; border-radius: .5rem; cursor: pointer; }
#lista-quadros li.ativo { background: #EDF0F4; font-weight: 600; }
#novo-quadro {
  border: 1px dashed #CDD5DF; background: none; width: 100%;
  padding: .6rem; border-radius: .5rem; cursor: pointer; color: var(--tinta-suave);
}

#barra-ferramentas {
  position: fixed; bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  z-index: 30; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  width: min-content; max-width: calc(100vw - 1rem);
}
.grupo-ferramentas, .opcoes-tinta, .opcoes-borracha {
  display: flex; gap: .25rem; padding: .35rem;
  background: #fff; border: 1px solid #E2E6EC; border-radius: .8rem;
  box-shadow: 0 3px 14px rgba(23,26,31,.1);
  max-width: calc(100vw - 1rem); overflow-x: auto;
}
.opcoes-tinta[hidden], .opcoes-borracha[hidden] { display: none; }
.grupo-ferramentas button, .opcoes-tinta button, .opcoes-borracha button {
  min-width: 2.75rem; height: 2.75rem; border: 0; border-radius: .55rem;
  background: none; cursor: pointer; font-size: .72rem; padding: 0 .45rem;
  white-space: nowrap;
}
.grupo-ferramentas button.ativo { background: #EDF0F4; }
.grupo-ferramentas button:disabled { opacity: .28; cursor: default; }
.grupo-ferramentas [data-ferramenta] { width: 3.125rem; min-width: 3.125rem; }
.grupo-ferramentas .botao-historico {
  font-size: 1.35rem; width: 2.25rem; min-width: 2.25rem;
}
.grupo-ferramentas .botao-novo {
  color: var(--caneta); font-weight: 650; width: 3rem; min-width: 3rem;
}
.bolha-cor {
  width: 1.75rem !important; min-width: 1.75rem !important;
  height: 1.75rem !important; border-radius: 50% !important;
}
.bolha-cor.ativo { outline: 2px solid var(--tinta); outline-offset: 2px; }
.bolha-espessura { width: 2.3rem; min-width: 2.3rem !important; }
.bolha-espessura.ativo { background: #EDF0F4; }
.opcoes-borracha button { min-width: 7rem; font-size: .78rem; }
.opcoes-borracha button.ativo { background: #EDF0F4; color: var(--caneta); font-weight: 650; }
.menu-novo {
  position: fixed; bottom: 4.6rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #E2E6EC; border-radius: .7rem; overflow: hidden;
  box-shadow: 0 4px 18px rgba(23,26,31,.12);
}
.menu-novo button {
  border: 0; background: none; padding: .6rem 1.6rem;
  cursor: pointer; text-align: left; font-size: .95rem;
}
.menu-novo button:hover { background: #EDF0F4; }

@media (max-width: 500px) {
  #barra-ferramentas { width: calc(100vw - 1rem); }
  .grupo-ferramentas, .opcoes-tinta, .opcoes-borracha { width: 100%; }
  .opcoes-borracha { justify-content: center; }
  .grupo-ferramentas { justify-content: space-between; gap: 0; }
}