:root {
  --fundo: #f5f5f3;
  --cartao: #ffffff;
  --tinta: #0b0b0b;
  --tinta-suave: #555555;
  --linha: #d6d6d2;
  --acento: #c200c7;
  --lima: #eeff01;
  --bom: #e3f6e6;
  --bom-tinta: #14632a;
  --ruim: #fbe7e7;
  --ruim-tinta: #9b1c1c;
  --meio: #fff6d6;
  --raio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f0f0e;
    --cartao: #1c1c1a;
    --tinta: #f2f2ef;
    --tinta-suave: #a8a8a3;
    --linha: #34342f;
    --acento: #f06af3;
    --bom: #12301b;
    --bom-tinta: #8be0a0;
    --ruim: #3a1616;
    --ruim-tinta: #f2a3a3;
    --meio: #332c10;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
[hidden] { display: none !important; }
h1, h3, h4 { margin: 0 0 8px; letter-spacing: -0.01em; }
h3 { margin-top: 32px; font-size: 19px; }
h4 { margin-top: 12px; font-size: 14px; }
a { color: var(--acento); }
.apoio { color: var(--tinta-suave); font-size: 13px; }
.erro { color: var(--ruim-tinta); min-height: 1.2em; }
.nota { max-width: 760px; margin-top: 16px; }

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
button {
  cursor: pointer;
  border: 0;
  border-radius: 6px;
  padding: 7px 14px;
  background: var(--tinta);
  color: var(--fundo);
}
button.secundario { background: transparent; color: var(--tinta); border: 1px solid var(--linha); }
button.perigo { background: transparent; color: var(--ruim-tinta); border: 1px solid var(--linha); }
button.link { background: none; color: var(--tinta-suave); padding: 2px 4px; text-decoration: underline; }
button.link.perigo { border: 0; color: var(--ruim-tinta); }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; }
summary { cursor: pointer; font-weight: 600; }

/* entrada */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrar { width: min(360px, 100%); display: grid; gap: 12px; padding: 24px; }
.entrar label { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-suave); }
.entrar h1 { font-size: 32px; }
.entrar h1::after { content: ""; display: block; width: 48px; height: 6px; background: var(--lima); margin-top: 8px; }

/* topo */
.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--fundo); border-bottom: 1px solid var(--linha);
}
.marca { font-size: 20px; border-bottom: 4px solid var(--lima); }
.abas { display: flex; gap: 4px; }
.abas button { background: none; color: var(--tinta-suave); padding: 6px 12px; }
.abas button[aria-selected="true"] { background: var(--tinta); color: var(--fundo); }
.quem { margin-left: auto; font-size: 13px; color: var(--tinta-suave); }
main { padding: 16px 24px 64px; max-width: 1500px; }

/* cenários */
.cenarios { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--cartao); color: var(--tinta); border: 1px solid var(--linha); border-radius: 999px; padding: 5px 12px; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.editor { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.cabeca-cenario { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.nome-cenario { font-size: 20px; font-weight: 600; flex: 1 1 280px; border-color: transparent; background: transparent; }
.nome-cenario:hover { border-color: var(--linha); }
.acoes { display: flex; gap: 6px; }
.grade-premissas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; margin: 0; }
legend { font-weight: 600; padding: 0 4px; }
.campo { display: grid; grid-template-columns: 1fr 150px; gap: 8px; align-items: center; margin: 6px 0; font-size: 14px; }
.campo select { width: 100%; }
.campo:has(select) { grid-template-columns: 1fr; gap: 2px; }
.entrada-num { display: flex; align-items: center; gap: 4px; }
.entrada-num input { width: 80px; text-align: right; }
.entrada-num small { color: var(--tinta-suave); font-size: 11px; line-height: 1.1; }
.calculado { margin: 8px 0 0; font-size: 14px; }
table.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mini th { text-align: left; font-weight: 500; color: var(--tinta-suave); }
table.mini input { width: 100%; text-align: right; }

/* planilhas */
.rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); }
table.planilha { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.planilha th, .planilha td { padding: 6px 10px; border-bottom: 1px solid var(--linha); text-align: right; white-space: nowrap; vertical-align: middle; }
.planilha th { font-weight: 600; font-size: 12px; color: var(--tinta-suave); background: var(--fundo); position: sticky; top: 0; white-space: normal; }
.planilha tbody th { text-align: left; color: var(--tinta); background: transparent; position: static; font-size: 13.5px; }
.planilha .celula { width: 100px; text-align: right; border-color: transparent; background: transparent; }
.planilha .celula:hover { border-color: var(--linha); }
.planilha tr.atual th { box-shadow: inset 4px 0 0 var(--lima); }
tr.extrapolado td, tr.extrapolado .celula { font-style: italic; }
td.ruim { background: var(--ruim); color: var(--ruim-tinta); }

/* livros */
.fontes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 8px 0; }
.fonte { display: grid; gap: 2px; }
.fonte p { margin: 0; }
.fonte .link { justify-self: start; padding: 0; }
.linha-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.linha-form input { flex: 1 1 180px; }
.pilha { display: grid; gap: 8px; margin-top: 10px; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 16px 0; align-items: start; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 8px; }
.filtros input[type="search"] { flex: 1 1 220px; }
.livros td, .livros th { text-align: left; }
.livros .celula { width: 100%; min-width: 160px; text-align: left; }
.livros .celula.curta { min-width: 70px; width: 80px; }
.livros .celula.larga { min-width: 220px; }
.livros select.celula { min-width: 110px; }
.voto { background: var(--cartao); color: var(--tinta-suave); border: 1px solid var(--linha); padding: 3px 9px; }
.voto[aria-pressed="true"] { background: var(--lima); color: #0b0b0b; border-color: #0b0b0b; }
.selo { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--fundo); color: var(--tinta-suave); }
.selo.dp-sim { background: var(--bom); color: var(--bom-tinta); }
.selo.dp-nao { background: var(--meio); }
.etiquetas { white-space: nowrap; }
.mais { display: block; margin: 12px auto 0; }
.etiqueta {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 7px; margin-right: 4px; border-radius: 4px;
  background: var(--fundo); color: var(--tinta); border: 1px solid var(--linha);
}
.etiqueta .pos { font-weight: 400; margin-left: 4px; opacity: 0.75; }
.etiqueta.ativa { background: var(--lima); color: #0b0b0b; border-color: #0b0b0b; }
.fonte.ativa { outline: 2px solid var(--acento); }
.fonte-cabeca { display: flex; gap: 8px; align-items: center; }
.fonte-cabeca .sigla { width: 58px; font-size: 12px; font-weight: 700; text-align: center; padding: 3px 4px; }
.fonte-acoes { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.fonte-acoes .secundario { padding: 3px 10px; font-size: 13px; }
tr.status-escolhido td:first-child { box-shadow: inset 4px 0 0 var(--acento); }
tr.status-descartado { opacity: 0.5; }
tr.status-lista-curta td:first-child { box-shadow: inset 4px 0 0 var(--lima); }

/* plano de 10 anos */
@font-face { font-family: "Neue Haas Display"; src: url(fontes/NeueHaasDisplay-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Editorial New"; src: url(fontes/PPEditorialNew-Regular.otf) format("opentype"); font-weight: 400; font-display: swap; }
.subabas { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--linha); }
.subabas button { background: none; color: var(--tinta-suave); border-radius: 0; padding: 8px 4px; margin-right: 16px; border-bottom: 3px solid transparent; }
.subabas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--lima); }
.ano { margin: 0 0 24px; }
.ano-cabeca { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ano-nome { font-size: 18px; font-weight: 600; border-color: transparent; background: transparent; padding: 2px 4px; width: 220px; }
.ano-nome:hover { border-color: var(--linha); }
.ano-livros { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .ano-livros { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ano-livros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.espaco { position: relative; aspect-ratio: 2 / 3; border-radius: 4px; cursor: pointer; }
.espaco:not(.cheio) { border: 1px dashed var(--linha); display: grid; place-items: center; }
.espaco:not(.cheio):hover { border-color: var(--acento); }
.vazio { font-size: 22px; color: var(--tinta-suave); }
.mes { position: absolute; left: 4px; bottom: -18px; font-size: 11px; color: var(--tinta-suave); }
.espaco.cheio { cursor: grab; }
.capa {
  position: absolute; inset: 0; border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 9% 9% 11%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(128, 128, 128, 0.25);
}
.capa-autor { font: 500 9px/1.15 "Neue Haas Display", "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.capa-titulo { font: 400 17px/1.02 "Editorial New", Georgia, serif; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.capa-titulo.medio { font-size: 14px; }
.capa-titulo.pequeno { font-size: 11px; }
.tira { position: absolute; top: 3px; right: 3px; display: none; padding: 0 6px; font-size: 14px; line-height: 20px; background: rgba(11, 11, 11, 0.75); color: #fff; border-radius: 10px; }
.espaco.cheio:hover .tira { display: block; }
.no-plano { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--tinta); color: var(--fundo); }
.escolha { width: min(560px, calc(100vw - 32px)); max-height: 80vh; padding: 16px; color: var(--tinta); }
.escolha::backdrop { background: rgba(0, 0, 0, 0.45); }
.escolha-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.escolha input { width: 100%; }
.escolha-lista { list-style: none; padding: 0; margin: 10px 0 0; max-height: 55vh; overflow: auto; }
.escolha-lista button { display: grid; gap: 2px; width: 100%; text-align: left; background: none; color: var(--tinta); border-bottom: 1px solid var(--linha); border-radius: 0; padding: 8px 4px; }
.escolha-lista button:hover { background: var(--fundo); }

/* atividade */
.log { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

@media (max-width: 640px) {
  .topo, main { padding-left: 16px; padding-right: 16px; }
  .campo { grid-template-columns: 1fr; }
}