@import "tailwindcss";

:root {
  color-scheme: light;
}

body {
  min-height: 100vh;
  background: #f7f7fb;
  color: #111827;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================
   A folha de escrita do boletim
   ------------------------------------------------------------
   A tipografia aqui e a MESMA da pagina publicada. E o ponto do
   editor: o que se ve escrevendo e o que sai no endereco.
   ============================================================ */

.boletim-folha {
  font-size: 17px;
  line-height: 1.75;
  color: #4a4a63;
}

.boletim-folha:focus { outline: none; }

/* A folha em branco precisa dizer o que fazer. `::before` em vez de
   placeholder porque `contenteditable` nao tem placeholder. */
.boletim-folha[data-vazio="1"]::before {
  content: "Comece a escrever. Use a barra de cima para título, lista, imagem ou botão.";
  color: #c2c2d4;
  pointer-events: none;
}

.boletim-folha p { margin: 0 0 20px; }

.boletim-folha h2 {
  margin: 36px 0 14px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: #1a1a2b;
}

.boletim-folha h3 {
  margin: 28px 0 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1a1a2b;
}

/* Marcador explicito: o preflight do Tailwind zera, e a folha de escrita tem
   de mostrar a lista igual a pagina publicada. */
.boletim-folha ul { margin: 0 0 20px; padding-left: 22px; list-style: disc; }
.boletim-folha ol { margin: 0 0 20px; padding-left: 24px; list-style: decimal; }
.boletim-folha li::marker { color: #8f6bf1; }
.boletim-folha li { margin-bottom: 6px; }

.boletim-folha blockquote {
  margin: 0 0 22px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid #8f6bf1;
  font-style: italic;
}

.boletim-folha a { color: #5f31d6; text-decoration: underline; text-underline-offset: 3px; }

.boletim-folha hr { border: 0; border-top: 1px solid #e7e7f0; margin: 30px 0; }

.boletim-folha figure { margin: 0 0 22px; }
.boletim-folha figure img { display: block; width: 100%; border-radius: 10px; }

.boletim-folha figcaption {
  margin-top: 9px;
  font-size: 13px;
  color: #8a8aa3;
  text-align: center;
  outline: none;
}

/* O botao, escrito dentro do texto, ja aparece com a cara que vai ter. */
.boletim-folha .boletim-botao { margin: 0 0 22px; }

.boletim-folha .boletim-botao a {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: #5f31d6;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

/* Os blocos ricos, na folha de escrita. Mesmo desenho da pagina publicada,
   so um pouco menor: e o ponto do editor, o que se ve e o que sai. */

.boletim-folha .boletim-precos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.boletim-folha .boletim-preco {
  position: relative;
  padding: 18px 16px;
  border-radius: 16px;
  border: 1px solid #e7e7f0;
  background: #fff;
}

.boletim-folha .boletim-preco-destaque {
  border-color: transparent;
  background: linear-gradient(135deg, #5228bd, #7346e8);
  color: #fff;
}

.boletim-folha .boletim-preco-nome {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #5f31d6;
}
.boletim-folha .boletim-preco-destaque .boletim-preco-nome { color: rgba(255,255,255,.82); }

.boletim-folha .boletim-preco-antes {
  display: block; margin-top: 8px; font-size: 14px; color: #8a8aa3; text-decoration: line-through;
}
.boletim-folha .boletim-preco-destaque .boletim-preco-antes { color: rgba(255,255,255,.62); }

.boletim-folha .boletim-preco-valor {
  display: block; margin-top: 2px; font-size: 30px; font-weight: 800;
  letter-spacing: -.035em; line-height: 1.1; color: #1a1a2b;
}
.boletim-folha .boletim-preco-destaque .boletim-preco-valor { color: #fff; }

.boletim-folha .boletim-preco-nota {
  display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: #8a8aa3;
}
.boletim-folha .boletim-preco-destaque .boletim-preco-nota { color: rgba(255,255,255,.8); }

.boletim-folha .boletim-selo {
  position: absolute; top: -10px; right: 16px; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: #15c5c5; color: #06373b;
}

.boletim-folha .boletim-tabela { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14px; }
.boletim-folha .boletim-tabela th {
  text-align: left; padding: 9px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #8a8aa3; border-bottom: 1px solid #e7e7f0;
}
.boletim-folha .boletim-tabela td { padding: 10px; border-bottom: 1px solid rgba(231,231,240,.7); }
.boletim-folha .boletim-tabela tr:last-child td { border-bottom: 0; }
.boletim-folha .boletim-tabela td:first-child { font-weight: 700; color: #1a1a2b; }

.boletim-folha .boletim-barras { margin: 22px 0; display: grid; gap: 12px; }
.boletim-folha .boletim-barra {
  display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
}
.boletim-folha .boletim-barra-rotulo { font-size: 13.5px; font-weight: 700; color: #1a1a2b; }
.boletim-folha .boletim-barra-trilho {
  display: block; height: 13px; border-radius: 999px; background: #eeecfa; overflow: hidden;
}
.boletim-folha .boletim-barra-preenche {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #5f31d6, #8f6bf1);
}
.boletim-folha .boletim-barra-valor { font-size: 13.5px; font-weight: 800; color: #1a1a2b; font-variant-numeric: tabular-nums; }