/* Controle de 3 botões (−1 / 0 / +1) que ACRESCENTAM uma nota (D-SAFI-09), com a soma e a quantidade logo abaixo.
   Cor de apoio: +1 verde, 0 cinza azulado, −1 coral. Cada botão diz a nota por texto; a cor nunca vai sozinha.
   Célula sem nenhuma nota = contorno tracejado ("ainda não avaliado"). */
.nota-bloco { display: grid; justify-items: center; gap: 4px; min-width: 0; }

.nota {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--borda-controle);
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie);
  flex: none;
}
.nota[data-vazio="true"] { border-style: dashed; background: var(--superficie-suave); }
.nota[data-fechado="true"] { border-color: var(--linha); }

.nota-op {
  display: grid; place-items: center;
  min-width: var(--nota-largura); min-height: var(--alvo-minimo);
  margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--linha); border-radius: 0;
  background: transparent;
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: var(--tam-2);
  color: var(--texto-suave);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.nota-op:first-child { border-left: 0; }
.nota-op > span { display: block; transition: transform var(--tempo-toque) var(--curva-saida); }
.nota-op:active > span { transform: scale(0.9); }

/* clarão curto depois de acrescentar: confirma o toque sem depender de cor (a soma também muda) */
.nota-op--mais.nota-op--ok { background: var(--positivo-fundo); color: var(--positivo-texto); box-shadow: inset 0 0 0 2px var(--positivo-borda); }
.nota-op--zero.nota-op--ok { background: var(--neutra-fundo); color: var(--neutra-texto); box-shadow: inset 0 0 0 2px var(--neutra-borda); }
.nota-op--menos.nota-op--ok { background: var(--negativo-fundo); color: var(--negativo-texto); box-shadow: inset 0 0 0 2px var(--negativo-borda); }

/* O anel de foco fica por dentro: a caixa corta o que sai dela. Contraste >= 3:1 com o fundo de cada estado (A09). */
.nota-op:focus-visible { outline: 3px solid var(--foco-nota); outline-offset: -5px; }
.nota-op--menos.nota-op--ok:focus-visible { outline-color: var(--neutro-0); }

@media (hover: hover) and (pointer: fine) {
  .nota-op:not(:disabled):hover { color: var(--texto-forte); }
  .nota-op--mais:not(:disabled):hover { background: var(--positivo-fundo); }
  .nota-op--zero:not(:disabled):hover { background: var(--neutra-fundo); }
  .nota-op--menos:not(:disabled):hover { background: var(--negativo-fundo); }
}

.nota-op:disabled { cursor: default; opacity: 0.55; }
.nota-op:disabled:active > span { transform: none; }

/* Soma e quantidade ("+3 · 4 notas") e o "Desfazer" */
.nota-resumo { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: var(--tam-1); line-height: 1.2; }
.nota-soma, .nota-desfazer {
  margin: 0; padding: 0 4px; min-height: 28px;
  border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: var(--tam-1);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nota-soma { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texto-forte); text-decoration: underline dotted; text-underline-offset: 3px; }
.nota-soma[data-sinal="neg"] { color: var(--negativo-tinta); }
.nota-soma[data-sinal="vazio"] { color: var(--texto-suave); font-weight: 400; text-decoration: none; cursor: default; }
.nota-desfazer { color: var(--texto-suave); text-decoration: underline; text-underline-offset: 3px; }
.nota-soma:disabled, .nota-desfazer:disabled { cursor: default; }
.nota-desfazer:disabled { opacity: 0.4; text-decoration: none; }
.nota-soma:focus-visible, .nota-desfazer:focus-visible { outline: 3px solid var(--foco-nota); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .nota-soma:not(:disabled):hover, .nota-desfazer:not(:disabled):hover { background: var(--superficie-suave); color: var(--texto-forte); }
}
@media (pointer: coarse) {
  .nota-soma, .nota-desfazer { min-height: var(--alvo-minimo); padding: 0 8px; }
}

/* Lista das notas de um tópico (abre ao tocar na soma) */
.notas-lista {
  position: fixed; z-index: 30;
  width: min(92vw, 360px); max-height: min(70vh, 460px); overflow: auto;
  padding: var(--esp-3);
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda-controle); border-radius: var(--raio-2);
  box-shadow: 0 8px 28px rgb(9 59 106 / 0.22);
}
.notas-lista[hidden] { display: none; }
.notas-lista:focus { outline: none; }
.nl-cabeca h3 { font-size: var(--tam-2); color: var(--texto-forte); overflow-wrap: anywhere; }
.nl-soma { margin: 2px 0 var(--esp-2); font-size: var(--tam-1); color: var(--texto-suave); }
.nl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nl-item { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; align-items: center; gap: var(--esp-2); padding: 4px 0; border-top: 1px solid var(--superficie-suave); }
.nl-valor { font-weight: 700; font-size: var(--tam-3); color: var(--texto-forte); }
.nl-valor[data-v="-1"] { color: var(--negativo-tinta); }
.nl-info { font-size: var(--tam-1); color: var(--texto-suave); overflow-wrap: anywhere; }
.nl-tirar {
  min-height: 32px; padding: 0 10px; border: 1px solid var(--borda-controle); border-radius: 8px;
  background: var(--superficie); color: var(--texto); font: inherit; font-size: var(--tam-1); cursor: pointer;
}
.nl-tirar:focus-visible { outline: 3px solid var(--foco-nota); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .nl-tirar:hover { background: var(--negativo-fundo); color: var(--negativo-texto); } }
@media (pointer: coarse) { .nl-tirar { min-height: var(--alvo-minimo); } }
.nl-rodape { margin-top: var(--esp-3); display: flex; justify-content: flex-end; }