/* Manual de uso · Volume 2 · Entre nós — sistema visual "manual técnico" */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --papel: #f6f3ec;
  --papel-2: #efebe1;
  --grade: rgba(31, 58, 95, 0.075);
  --tinta: #1f3a5f;
  --tinta-2: #46658a;
  --tinta-3: rgba(31, 58, 95, 0.55);
  --tinta-4: rgba(31, 58, 95, 0.28);
  --tinta-5: rgba(31, 58, 95, 0.12);
  --laranja: #e0651f;
  --laranja-2: rgba(224, 101, 31, 0.12);
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --largura: 44rem;
  --raio: 2px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background-color: var(--papel);
  background-image:
    linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 8px 8px;
  min-height: 100vh;
}
[hidden] { display: none !important; }
a { color: inherit; }
em { font-style: italic; }
button { font: inherit; color: inherit; }
::selection { background: var(--laranja-2); }

.mono { font-family: var(--mono); }
.rotulo {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* ---------- casca ---------- */
.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 1.25rem;
  background: rgba(246, 243, 236, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--tinta-5);
}
.topo .marca { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; }
.topo .marca strong { font-family: var(--mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.topo .marca span { font-family: var(--mono); font-size: 0.72rem; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .acoes { display: flex; gap: 0.4rem; flex-shrink: 0; }

.btn {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em;
  padding: 0.5rem 0.9rem; border: 1px solid var(--tinta); background: transparent;
  color: var(--tinta); border-radius: var(--raio); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1.2;
}
.btn:hover { background: var(--tinta); color: var(--papel); }
.btn:focus-visible, input:focus-visible, textarea:focus-visible, .aba:focus-visible, .chip:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.btn.cheio { background: var(--tinta); color: var(--papel); }
.btn.cheio:hover { background: var(--tinta-2); border-color: var(--tinta-2); }
.btn.fino { border-color: var(--tinta-4); color: var(--tinta-2); }
.btn.fino:hover { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.btn.laranja { border-color: var(--laranja); color: var(--laranja); }
.btn.laranja:hover { background: var(--laranja); color: var(--papel); }
.btn[disabled] { opacity: 0.4; cursor: default; }
.btn[disabled]:hover { background: transparent; color: var(--tinta); }

.moldura { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: calc(100vh - 3rem); }
.moldura.sem-abas { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .moldura { grid-template-columns: 1fr; } }

/* ---------- abas do fichário ---------- */
.abas {
  border-right: 1px solid var(--tinta-5);
  padding: 1.5rem 0 2rem;
  position: sticky; top: 3rem; align-self: start; max-height: calc(100vh - 3rem); overflow: auto;
}
.abas ol { list-style: none; margin: 0; padding: 0; }
.aba {
  display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; gap: 0.25rem;
  width: 100%; text-align: left; padding: 0.55rem 1rem 0.55rem 1.25rem;
  border: 0; border-left: 3px solid transparent; background: transparent; cursor: pointer;
  color: var(--tinta-3); font-size: 0.86rem; line-height: 1.3;
}
.aba .n { font-family: var(--mono); font-size: 0.72rem; }
.aba:hover { color: var(--tinta); background: var(--papel-2); }
.aba.atual { color: var(--tinta); border-left-color: var(--laranja); background: var(--papel-2); }
.aba.atual .n { color: var(--laranja); }
.aba.feita .n::after { content: " ·"; }
.abas .legenda { padding: 1rem 1.25rem 0; font-family: var(--mono); font-size: 0.7rem; color: var(--tinta-3); line-height: 1.5; }
@media (max-width: 860px) {
  .abas { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--tinta-5); padding: 0.4rem 0.5rem; overflow-x: auto; }
  .abas ol { display: flex; gap: 0.15rem; }
  .aba { grid-template-columns: auto; padding: 0.4rem 0.6rem; border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .aba span:last-child { display: none; }
  .aba.atual { border-bottom-color: var(--laranja); }
  .abas .legenda { display: none; }
}

/* ---------- tela ---------- */
.palco { padding: 2.5rem 1.5rem 5rem; }
.tela { max-width: var(--largura); margin: 0 auto; }
.tela .cabeca { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.25rem; }
.tela .cabeca .texto { flex: 1; min-width: 0; }
.tela .numero { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--laranja); margin-bottom: 0.4rem; }
.tela .numero .sec { color: var(--tinta-3); }
.tela h1 { font-size: 1.85rem; font-weight: 600; line-height: 1.15; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.tela h1.grande { font-size: 2.6rem; }
.tela .objeto { width: 8.5rem; flex-shrink: 0; margin-top: 0.2rem; }
.tela .objeto svg { width: 100%; height: auto; display: block; }
@media (max-width: 600px) {
  .tela .cabeca { flex-direction: column-reverse; gap: 0.75rem; }
  .tela .objeto { width: 6.5rem; }
  .tela h1 { font-size: 1.5rem; }
  .tela h1.grande { font-size: 2rem; }
  body { font-size: 16px; }
}
.tela p { margin: 0 0 1rem; max-width: 38rem; }
.tela p.grande { font-size: 1.15rem; }
.corpo { animation: surgir 0.35s ease-out; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .corpo { animation: none; } * { transition: none !important; } }

.lado-fora {
  border: 1px dashed var(--tinta-4); padding: 1.25rem 1.25rem 0.5rem; margin: 1rem 0 1.5rem; position: relative;
  background: rgba(255, 255, 255, 0.35);
}
.lado-fora::before {
  content: "para compartilhar";
  position: absolute; top: -0.65rem; left: 1rem; background: var(--papel);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); padding: 0 0.4rem;
}

.nota {
  display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.5rem; align-items: start;
  font-size: 0.9rem; color: var(--tinta-2); margin: 0.5rem 0 1.25rem; max-width: 38rem;
}
.nota::before { content: ""; height: 1px; background: var(--tinta-4); margin-top: 0.8rem; position: relative; }
.nota::after { content: ""; }
.nota .ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-2); position: absolute; }
.nota p { margin: 0; }

/* ---------- fichas ---------- */
.fichas { margin: 1.5rem 0 0.5rem; display: grid; gap: 1.25rem; max-width: 38rem; }
.ficha { position: relative; }
.ficha .rotulo { display: block; margin-bottom: 0.35rem; }
.ficha .rotulo::before { content: "▸ "; color: var(--laranja); }
.ficha input[type="text"], .ficha textarea, .ficha input[type="time"] {
  width: 100%; border: 0; border-bottom: 1px solid var(--tinta-4); background: transparent;
  font-family: var(--sans); font-size: 1.02rem; line-height: 1.5; color: var(--laranja); padding: 0.35rem 0;
  border-radius: 0;
}
.ficha input[type="text"]::placeholder, .ficha textarea::placeholder { color: var(--tinta-4); font-style: italic; }
.ficha textarea { resize: vertical; min-height: 4.2rem; background-image: repeating-linear-gradient(transparent 0, transparent calc(1.5rem * 1.02 - 1px), var(--tinta-5) calc(1.5rem * 1.02 - 1px), var(--tinta-5) calc(1.5rem * 1.02)); background-attachment: local; }
.ficha input:focus, .ficha textarea:focus { border-bottom-color: var(--laranja); outline: none; }
.ficha .exemplo { font-size: 0.82rem; color: var(--tinta-3); font-style: italic; margin-top: 0.3rem; }
.ficha .exemplo::before { content: "ex. "; font-style: normal; font-family: var(--mono); font-size: 0.7rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  font-family: var(--mono); font-size: 0.78rem; padding: 0.35rem 0.7rem; border: 1px solid var(--tinta-4); background: transparent;
  color: var(--tinta-2); border-radius: 999px; cursor: pointer; line-height: 1.2;
}
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { border-color: var(--laranja); color: var(--laranja); background: var(--laranja-2); }

.lista3 { display: grid; gap: 0.4rem; }
.lista3 .linha { display: grid; grid-template-columns: 1.5rem 1fr; align-items: baseline; gap: 0.5rem; }
.lista3 .linha .n { font-family: var(--mono); font-size: 0.75rem; color: var(--tinta-3); }

.horarios { display: grid; gap: 0.9rem; }
.horarios .slot { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: 0.75rem; align-items: end; }
.horarios .slot .rotulo { grid-column: 1 / -1; }
.horarios .slot .rotulo::before { content: ""; }
@media (max-width: 480px) { .horarios .slot { grid-template-columns: 1fr; } }

/* ---------- navegação da tela ---------- */
.nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--tinta-5); max-width: 38rem; }
.nav .meio { font-family: var(--mono); font-size: 0.72rem; color: var(--tinta-3); text-align: center; }

/* ---------- capa ---------- */
.capa { max-width: 58rem; margin: 0 auto; padding: 3rem 0 2rem; }
.capa .serie { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3); }
.capa h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; margin: 0.4rem 0 0.2rem; }
.capa .volume { font-family: var(--mono); font-size: 1rem; color: var(--laranja); margin-bottom: 2rem; }
.capa .volume .n { letter-spacing: 0.1em; }
.capa .desc { font-size: 1.25rem; max-width: 34rem; line-height: 1.45; margin-bottom: 2.25rem; }
.capa .objeto { width: 100%; max-width: 22rem; margin: 2rem 0 1.5rem; }
.capa .objeto svg { width: 100%; height: auto; }
.capa .entradas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.5rem; }
.capa .rodape { font-family: var(--mono); font-size: 0.7rem; color: var(--tinta-4); letter-spacing: 0.04em; }
.capa .retomar { margin-bottom: 1rem; }
.capa .grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; }
@media (max-width: 700px) { .capa .grid2 { grid-template-columns: 1fr; } .capa .objeto { order: -1; } }

/* ---------- revisão / gerar ---------- */
.revisao .bloco { margin: 0 0 1.5rem; }
.revisao h2 { font-size: 0.78rem; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--tinta-5); }
.revisao .item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; margin-bottom: 0.7rem; }
.revisao .item .q { font-size: 0.85rem; color: var(--tinta-3); }
.revisao .item .r { color: var(--laranja); white-space: pre-wrap; }
.revisao .item .r.vazio { color: var(--tinta-4); font-style: italic; }
.revisao .item a { font-family: var(--mono); font-size: 0.7rem; color: var(--tinta-3); text-decoration: none; }
.revisao .item a:hover { color: var(--laranja); }
.entra label { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--tinta-5); cursor: pointer; }
.entra input { accent-color: var(--laranja); width: 1.1rem; height: 1.1rem; }
.entra .n { font-family: var(--mono); font-size: 0.75rem; color: var(--tinta-3); width: 2rem; }
.gerar .opcoes { display: grid; gap: 1rem; margin: 1.5rem 0; }
.gerar .opcao { border: 1px solid var(--tinta-4); padding: 1.25rem; display: grid; gap: 0.6rem; max-width: 38rem; }
.gerar .opcao h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.gerar .opcao p { margin: 0; font-size: 0.95rem; color: var(--tinta-2); }
.gerar .opcao .btn { justify-self: start; }
.aviso { font-size: 0.85rem; color: var(--tinta-3); max-width: 38rem; }

.fontes ol { padding-left: 1.2rem; font-size: 0.92rem; color: var(--tinta-2); }
.fontes li { margin-bottom: 0.8rem; }
.assinatura { margin-top: 2rem; font-family: var(--mono); font-size: 0.7rem; color: var(--tinta-3); line-height: 1.6; max-width: 38rem; }

.modal-fundo { position: fixed; inset: 0; background: rgba(31, 58, 95, 0.35); z-index: 20; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal { background: var(--papel); border: 1px solid var(--tinta); padding: 1.5rem; max-width: 26rem; width: 100%; }
.modal p { margin: 0 0 1rem; }
.modal .acoes { display: flex; gap: 0.5rem; justify-content: flex-end; }

.selo-curto {
  font-family: var(--mono); font-size: 0.7rem; color: var(--laranja); border: 1px solid var(--laranja); padding: 0.15rem 0.5rem; border-radius: 999px; letter-spacing: 0.06em;
}

/* ---------- impressão ---------- */
#impressao { display: none; }
@media print {
  @page { size: A4; margin: 16mm 16mm 18mm; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .topo, .moldura { display: none !important; }
  #impressao { display: block !important; font-family: var(--sans); color: #111; }
  #impressao .cab { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid #1f3a5f; padding-bottom: 6pt; margin-bottom: 14pt; }
  #impressao .cab strong { font-family: var(--mono); font-size: 9pt; letter-spacing: 0.12em; text-transform: uppercase; color: #1f3a5f; }
  #impressao .cab span { font-family: var(--mono); font-size: 8pt; color: #555; }
  #impressao h1 { font-size: 22pt; font-weight: 600; margin: 0 0 4pt; color: #1f3a5f; letter-spacing: -0.01em; }
  #impressao .sub { font-size: 11pt; color: #444; margin-bottom: 18pt; }
  #impressao h2 { font-family: var(--mono); font-size: 8.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: #1f3a5f; border-bottom: 0.75px solid #9aa9bb; padding-bottom: 3pt; margin: 16pt 0 8pt; break-after: avoid; }
  #impressao .item { margin: 0 0 7pt; break-inside: avoid; }
  #impressao .item .q { font-size: 8.5pt; color: #666; margin-bottom: 1pt; }
  #impressao .item .r { font-size: 11pt; white-space: pre-wrap; color: #111; }
  #impressao .item .r.vazio { color: #999; font-style: italic; }
  #impressao .lado { border: 0.75px dashed #9aa9bb; padding: 8pt 10pt 2pt; margin: 8pt 0; position: relative; }
  #impressao .lado::before { content: "para compartilhar"; font-family: var(--mono); font-size: 7pt; letter-spacing: 0.1em; text-transform: uppercase; color: #666; display: block; margin-bottom: 4pt; }
  #impressao .rodape { margin-top: 22pt; border-top: 0.75px solid #9aa9bb; padding-top: 6pt; font-family: var(--mono); font-size: 7pt; color: #666; line-height: 1.5; }
  /* cartão */
  #impressao.cartao .grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10pt 14pt; }
  #impressao.cartao .bloco { border: 0.75px solid #1f3a5f; padding: 7pt 9pt; min-height: 52pt; break-inside: avoid; }
  #impressao.cartao .bloco.largo { grid-column: 1 / -1; }
  #impressao.cartao .bloco h2 { border: 0; margin: 0 0 4pt; padding: 0; }
  #impressao.cartao .bloco .r { font-size: 10.5pt; white-space: pre-wrap; }
  #impressao.cartao .bloco .r.vazio { color: #aaa; font-style: italic; }
  #impressao.cartao .bloco ol { margin: 0; padding-left: 14pt; font-size: 10.5pt; }
  #impressao.cartao h1 { font-size: 16pt; }
  #impressao.cartao .sub { margin-bottom: 10pt; font-size: 9.5pt; }
}

/* ---------- ajustes de tela estreita ---------- */
@media (max-width: 480px) {
  .topo .marca span { display: none; }
  .nav { flex-wrap: wrap; }
  .nav .meio { order: -1; width: 100%; margin-bottom: 0.5rem; }
  .nav .btn { flex: 1; justify-content: center; white-space: nowrap; }
  .capa .entradas .btn { width: 100%; justify-content: center; }
}