/* ── Bases 3 — Estatística ── */

/* Destaque para conceitos importantes */
.conceito {
  background-color: #e8f4f8;
  border-left: 4px solid #2196F3;
  padding: 1em 1.2em;
  margin: 1em 0;
  border-radius: 0 4px 4px 0;
}

/* Caixa de exemplo */
.exemplo {
  background-color: #f0f7ee;
  border-left: 4px solid #4CAF50;
  padding: 1em 1.2em;
  margin: 1em 0;
  border-radius: 0 4px 4px 0;
}

/* ── Lista de estados do widget de aparo (seção 1.3) ──
   Os 27 estados, ordenados por população. Os descartados pelo aparo ficam em
   vermelho. Quebra em várias linhas em telas estreitas — a ordem de leitura se
   mantém, então os cortados continuam sendo os do começo e os do fim da fila. */
.aparo-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  justify-content: center;
  margin: 1.2em 0 0.6em;
}

.aparo-item {
  min-width: 3.4em;
  padding: 0.3em 0.25em;
  text-align: center;
  line-height: 1.3;
  border-radius: 4px;
  background-color: #eef2f6;
  transition: background-color 0.12s, color 0.12s;
}

.aparo-item .sigla {
  display: block;
  font-weight: 700;
  font-size: 0.76em;
  letter-spacing: 0.04em;
}

.aparo-item .valor {
  display: block;
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}

/* Descartado pelo aparo */
.aparo-item.cortado {
  background-color: #fbe4e1;
  color: #c0392b;
}

.aparo-legenda {
  text-align: center;
  font-size: 0.85em;
  color: #666;
}

.quarto-dark .aparo-item {
  background-color: #223244;
  color: #dce8f5;
}

.quarto-dark .aparo-item.cortado {
  background-color: #40222a;
  color: #ff8a80;
}

.quarto-dark .aparo-legenda {
  color: #9fb3c8;
}

/* ── Diagramas Graphviz — escala total ── */
.cell-output-display svg,
.quarto-figure svg {
  max-width: 100%;
  height: auto;
}

/* ── Spoiler (ofuscação, não proteção) ── */
.spoiler {
  display: none;
}

.spoiler-content {
  display: none;
}

.spoiler-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 1.5em;
  border: 1px dashed #aaa;
  border-radius: 6px;
  background-color: #f5f5f5;
  text-align: center;
}

.spoiler-icon {
  font-size: 2em;
}

.spoiler-hint {
  margin: 0;
  color: #555;
  font-size: 0.95em;
}

.spoiler-input-group {
  display: flex;
  gap: 0.4em;
}

.spoiler-input {
  padding: 0.4em 0.7em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95em;
  width: 180px;
}

.spoiler-btn {
  padding: 0.4em 1em;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95em;
}

.spoiler-btn:hover {
  background-color: #1976D2;
}

.spoiler-error {
  display: none;
  color: #c0392b;
  font-size: 0.88em;
  margin: 0;
}

/* Dark mode */
.quarto-dark .spoiler-lock {
  background-color: #1a2f3e;
  border-color: #3a5a70;
}

.quarto-dark .spoiler-hint {
  color: #aac4d8;
}

.quarto-dark .spoiler-input {
  background-color: #0f1e2e;
  border-color: #3a5a70;
  color: #dce8f5;
}

/* ── Dark mode ── */

/* Caixas .conceito e .exemplo no tema escuro */
.quarto-dark .conceito {
  background-color: #1a2f3e;
  border-left-color: #60a5fa;
  color: #dce8f5;
}

.quarto-dark .exemplo {
  background-color: #162a1e;
  border-left-color: #4ade80;
  color: #dce8f5;
}

/* Código inline (backticks) no tema escuro */
.quarto-dark code {
  background-color: #1e3a50;
  color: #93c5fd;
}

/* Tabelas no tema escuro */
.quarto-dark .table th {
  background-color: #1a2f3e;
  color: #dce8f5;
}

/* ── Tabelas (light) ── */
.table th {
  background-color: #2c3e50;
  color: white;
}

/* Cabeçalho do livro */
#quarto-cover-image {
  max-width: 200px;
}

/* Sidebar */
.sidebar-title {
  font-weight: 700;
}

/* ── Modo leitura: esconde as duas barras e centraliza o texto ──
   Só no desktop (≥992px), onde o Quarto sempre mostra o sidebar. No celular o
   próprio Quarto já recolhe o menu num botão, então aqui vira no-op. */
@media (min-width: 992px) {
  html.modo-leitura #quarto-sidebar,
  html.modo-leitura #quarto-margin-sidebar {
    display: none !important;
  }
  /* As barras ocupam colunas do grid do Quarto; escondê-las não basta —
     o conteúdo precisa passar a ocupar a largura toda e se recentralizar. */
  html.modo-leitura #quarto-document-content {
    grid-column: 1 / -1 !important;
  }
  html.modo-leitura #quarto-document-content .content,
  html.modo-leitura main.content {
    /* Cresce com a tela, mas com piso e teto: nunca mais estreito que 900px,
       nunca mais largo que 1400px (acima disso a linha fica longa demais para
       ler com conforto). Entre os dois, acompanha 80% da largura da janela. */
    max-width: clamp(900px, 80vw, 1400px);
    margin-inline: auto;
  }
}

/* Botão flutuante do modo leitura */
.btn-modo-leitura {
  position: fixed;
  bottom: 1.3rem;
  right: 1.3rem;
  z-index: 1080;
  display: none;                 /* só no desktop (regra @media abaixo) */
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.8em;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #ffffff;
  color: #2c3e50;
  cursor: pointer;
  font-size: 0.85em;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

.btn-modo-leitura:hover {
  background-color: #f2f6fa;
}

@media (min-width: 992px) {
  .btn-modo-leitura {
    display: inline-flex;
  }
}

/* Tema escuro */
.quarto-dark .btn-modo-leitura {
  background-color: #1a2f3e;
  color: #dce8f5;
  border-color: #3a5a70;
}

.quarto-dark .btn-modo-leitura:hover {
  background-color: #223c4e;
}