/* ==========================================================================
   PiraNOT — Hub Jogo do Bicho · Design System (protótipo final)
   Vocabulário único · mobile-first · sem dependências · pronto p/ WordPress
   Páginas: index.html · estado.html · data.html · states.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #143d8a;
  --color-primary-dark: #0e2c63;
  --color-primary-light: #e8eefb;
  --color-accent: #1466c4;

  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-border: #e2e6ec;
  --color-border-strong: #cfd5de;

  --color-text: #1a1d21;
  --color-text-muted: #5b6470;
  --color-text-soft: #828b97;
  --color-on-primary: #ffffff;

  --color-success: #1c7c43;
  --color-success-bg: #e6f4ec;
  --color-success-bd: #bfe2cd;
  --color-warning: #9a6700;
  --color-warning-bg: #fdf3da;
  --color-warning-bd: #f2dfac;
  --color-neutral: #515b66;
  --color-neutral-bg: #eceff3;
  --color-neutral-bd: #d6dbe1;
  --color-info: #1466c4;
  --color-info-bg: #e6f0fb;
  --color-info-bd: #bcd6f4;
  --color-danger: #b3261e;
  --color-danger-bg: #fbe9e8;
  --color-danger-bd: #f0c6c3;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 29, 48, .06);
  --shadow: 0 2px 10px rgba(20, 29, 48, .07);

  --container: 1120px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 700; color: var(--color-text); }
p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }
ol, ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 8px; top: -48px;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 10px 16px; border-radius: var(--radius-sm); z-index: 50; transition: top .2s;
}
.skip-link:focus { top: 8px; }
.icon { flex: 0 0 auto; }

/* Wrapper de rolagem horizontal para tabelas (mobile) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}
.page-wrapper { padding-block: 20px 48px; }

.layout-with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.main-content { min-width: 0; }
/* Neutraliza a regra global do SmartMag em .main-content:not(.main),
   que subtrai a largura da sidebar do tema mesmo dentro do grid do hub. */
.jogo-do-bicho .layout-with-sidebar > .main-content {
  width: auto;
}
@media (min-width: 1024px) {
  .layout-with-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
}

.sidebar { display: grid; gap: 20px; align-content: start; }
@media (min-width: 1024px) { .sidebar { position: sticky; top: 16px; } }

/* --------------------------------------------------------------------------
   4. Aviso editorial + cabeçalho
   -------------------------------------------------------------------------- */
.editorial-notice {
  background: var(--color-primary-light);
  border-bottom: 1px solid #d4ddf3;
  color: var(--color-primary-dark);
  font-size: .82rem;
  line-height: 1.45;
}
.editorial-notice .container { display: flex; align-items: flex-start; gap: 8px; padding-block: 9px; }
.editorial-notice p { margin: 0; display: flex; align-items: flex-start; gap: 8px; }
.editorial-notice .icon { margin-top: 2px; color: var(--color-primary); }

.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.site-header .container { padding-block: 14px; }
.site-logo { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--color-primary); }
.site-logo:hover { text-decoration: none; color: var(--color-primary-dark); }

/* --------------------------------------------------------------------------
   5. Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb { margin-bottom: 16px; font-size: .8rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--color-text-soft); }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--color-border-strong); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero { margin-bottom: 20px; }
.hero h1 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.hero__subtitle { margin: 8px 0 0; color: var(--color-text-muted); font-size: 1rem; max-width: 60ch; }

/* Bloco hero → resultado.
   Mobile (<640px): o card de resultado vem ANTES do anúncio e da date-nav,
   trazendo o número/milhar para a primeira dobra. Tablet/desktop mantêm a
   ordem natural do DOM (anúncio → date-nav → card). Sem duplicar slot, sem CLS. */
.lead-block { display: flex; flex-direction: column; }
@media (max-width: 639px) {
  .lead-block > .date-nav { order: 2; }
  .lead-block > .ad-slot--leaderboard { order: 3; }
}

/* --------------------------------------------------------------------------
   7. Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1;
  padding: 12px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.btn--small { padding: 9px 14px; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 20px;
}
.card--hero { border-color: #c5d2ee; box-shadow: var(--shadow); }
.card--compact { padding: 16px; margin-bottom: 16px; }

/* Variantes de estado do card de resultado */
.card--waiting { border-color: var(--color-warning-bd); background: #fffdf6; }
.card--checking { border-color: var(--color-info-bd); background: #f7faff; }
.card--corrected { border-color: var(--color-danger-bd); background: #fffaf9; }

.card__header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
@media (min-width: 560px) {
  .card__header { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
.card__title { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.card__title--small { font-size: 1rem; }
.card__header .card__title { margin-bottom: 0; }
.card__subtitle { color: var(--color-text-muted); font-size: .9rem; margin: -2px 0 14px; }
.card__date { display: block; margin: 4px 0 0; color: var(--color-text-muted); font-size: .88rem; }
.card__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.card__footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.card__source { margin: 0; font-size: .8rem; color: var(--color-text-soft); }
.card__note { margin-top: 12px; font-size: .8rem; color: var(--color-text-soft); }
.card__link { display: inline-block; margin-top: 14px; font-weight: 600; font-size: .92rem; }

/* Título de seção fora de card */
.section-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 14px; letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   9. Badges
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.badge--success   { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-bd); }
.badge--warning   { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-bd); }
.badge--neutral   { background: var(--color-neutral-bg); color: var(--color-neutral); border-color: var(--color-neutral-bd); }
.badge--info      { background: var(--color-info-bg);    color: var(--color-info);    border-color: var(--color-info-bd); }
.badge--corrected { background: var(--color-danger-bg);  color: var(--color-danger);  border-color: var(--color-danger-bd); }

/* --------------------------------------------------------------------------
   10. Slots de anúncio
   -------------------------------------------------------------------------- */
.ad-slot {
  background: repeating-linear-gradient(45deg, #f1f3f6 0 10px, #eef0f4 10px 20px);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  text-align: center;
  margin-bottom: 20px;
  padding: 14px;
}
.ad-slot__label {
  display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-soft); margin-bottom: 8px;
}
.ad-slot__placeholder {
  display: flex; align-items: center; justify-content: center; min-height: 90px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-text-soft);
  font-family: var(--font-mono); font-size: .85rem;
}
.ad-slot--leaderboard .ad-slot__placeholder { min-height: 90px; }
.ad-slot--box .ad-slot__placeholder,
.ad-slot--sidebar .ad-slot__placeholder { min-height: 250px; }

/* --------------------------------------------------------------------------
   11. Extrações (tabela desktop + lista mobile)
   -------------------------------------------------------------------------- */
.extractions { margin-bottom: 4px; }

.extractions__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.extractions__table th {
  text-align: left; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 10px 12px;
  border-bottom: 2px solid var(--color-border-strong); white-space: nowrap;
}
.extractions__table td { padding: 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.extractions__table tbody tr:last-child td { border-bottom: 0; }
.extractions__table tbody tr:nth-child(even) { background: var(--color-surface-alt); }
.extractions__table--desktop { display: none; }

.extractions__list { display: grid; gap: 10px; }
.extractions__item {
  background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 12px 14px; display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "meta number" "meta group";
  align-items: center; column-gap: 14px; row-gap: 2px;
}
.extractions__meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.extractions__time { font-size: .78rem; color: var(--color-text-muted); }
.extractions__number {
  grid-area: number; font-family: var(--font-mono); font-weight: 700;
  font-size: 1.45rem; letter-spacing: .08em; text-align: right; color: var(--color-text);
}
.extractions__group { grid-area: group; font-size: .82rem; color: var(--color-text-muted); text-align: right; }

@media (min-width: 640px) {
  .extractions__table--desktop { display: table; }
  .extractions__list { display: none; }
}

/* Tag de extração + milhar (compartilhados) */
.extraction-tag {
  display: inline-block; font-family: var(--font-mono); font-weight: 700;
  font-size: .72rem; letter-spacing: .03em; color: var(--color-primary);
  background: var(--color-primary-light); border: 1px solid #cfdbf5;
  border-radius: var(--radius-sm); padding: 3px 7px;
}
.milhar { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; color: var(--color-text); }

/* Concurso: 1 bloco por concurso, cada um com seus 7 prêmios.
   Escopado sob .jogo-do-bicho para não colidir com classes genéricas do tema. */
.jogo-do-bicho .contest { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--color-border); }
.jogo-do-bicho .contest:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.jogo-do-bicho .contest__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.jogo-do-bicho .contest__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; }
.jogo-do-bicho .contest__label { font-weight: 700; font-size: .95rem; color: var(--color-text); }
.jogo-do-bicho .contest__time { font-size: .8rem; color: var(--color-text-muted); }
.jogo-do-bicho .contest__status { flex: 0 0 auto; }
.jogo-do-bicho .contest__waiting { margin: 0; padding: 14px 16px; background: var(--color-surface-alt); border: 1px dashed var(--color-border-strong); border-radius: var(--radius); color: var(--color-text-muted); font-size: .9rem; }

/* --------------------------------------------------------------------------
   12. Tabela de horários (schedule)
   -------------------------------------------------------------------------- */
.schedule { width: 100%; border-collapse: collapse; font-size: .92rem; }
.schedule th {
  text-align: left; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 10px 12px;
  border-bottom: 2px solid var(--color-border-strong); white-space: nowrap;
}
.schedule td { padding: 12px; border-bottom: 1px solid var(--color-border); }
.schedule tbody tr:last-child td { border-bottom: 0; }
.schedule tbody tr:nth-child(even) { background: var(--color-surface-alt); }

/* --------------------------------------------------------------------------
   13. Resultados recentes
   -------------------------------------------------------------------------- */
.recent-results { display: grid; gap: 8px; }
.recent-results__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--color-surface-alt);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  color: var(--color-text); transition: border-color .15s, background .15s;
}
.recent-results__item:hover { border-color: var(--color-accent); background: #fff; text-decoration: none; }
.recent-results__date { font-size: .82rem; color: var(--color-text-muted); min-width: 84px; }
.recent-results__number { font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; }
.recent-results__group { flex: 1; font-size: .82rem; color: var(--color-text-muted); }
.recent-results__icon { color: var(--color-text-soft); }
/* Deixa explícito que o número é só o 1º prêmio de referência, não o resultado completo da data. */
.jogo-do-bicho .recent-results__ref { display: flex; flex-direction: column; line-height: 1.15; }
.jogo-do-bicho .recent-results__label { font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-soft); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Cards de estado (hub)
   -------------------------------------------------------------------------- */
.states-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
@media (min-width: 560px) { .states-grid { grid-template-columns: 1fr 1fr; } }

.state-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm);
  color: var(--color-text); transition: border-color .15s, box-shadow .15s, transform .1s;
}
.state-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-1px); }
.state-card--featured { border-color: #c5d2ee; background: linear-gradient(180deg, #fbfcff, #f4f7fe); }
.state-card__watermark {
  position: absolute; right: 10px; bottom: -8px; font-family: var(--font-mono); font-weight: 700;
  font-size: 3.2rem; color: var(--color-primary); opacity: .07; pointer-events: none;
}
.state-card__content { flex: 1; min-width: 0; position: relative; z-index: 1; }
.state-card__name { font-size: 1.05rem; font-weight: 700; }
.state-card__info { margin: 4px 0 8px; font-size: .82rem; color: var(--color-text-muted); }
.state-card__arrow { color: var(--color-text-soft); }

/* --------------------------------------------------------------------------
   15. Formulário de busca
   -------------------------------------------------------------------------- */
.search-form { display: grid; gap: 14px; }
@media (min-width: 640px) {
  .search-form:not(.search-form--vertical) { grid-template-columns: 1fr 1fr auto; align-items: end; }
}
.search-form__field { display: flex; flex-direction: column; gap: 6px; }
.search-form__field label { font-size: .8rem; font-weight: 600; color: var(--color-text-muted); }
.search-form select,
.search-form input {
  width: 100%; font-family: inherit; font-size: .95rem; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); padding: 11px 12px; transition: border-color .15s, box-shadow .15s;
}
.search-form select:focus,
.search-form input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(20, 102, 196, .18); }

.search-form__field--error input { border-color: var(--color-danger); background: var(--color-danger-bg); }
.search-form__error {
  display: flex; align-items: center; gap: 6px; margin: 6px 0 0;
  color: var(--color-danger); font-size: .8rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   16. Navegação entre dias
   -------------------------------------------------------------------------- */
.date-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; margin-bottom: 20px; }
.date-nav__btn {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius); color: var(--color-text); font-size: .85rem; font-weight: 600;
  box-shadow: var(--shadow-sm); transition: background .15s, border-color .15s;
}
.date-nav__btn:hover { background: var(--color-surface-alt); border-color: var(--color-accent); text-decoration: none; }
.date-nav__btn--prev { justify-content: flex-start; }
.date-nav__btn--next { justify-content: flex-end; }
.date-nav__btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.date-nav__dir { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-soft); font-weight: 600; }
.date-nav__day { display: flex; flex-direction: column; line-height: 1.2; }
.date-nav__current {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 8px 16px; background: var(--color-primary-light); border: 1px solid #cfdbf5;
  border-radius: var(--radius); min-width: 96px;
}
.date-nav__current-label { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); font-weight: 700; }
.date-nav__current-date { font-weight: 700; font-size: .95rem; color: var(--color-primary-dark); }

/* Mobile pequeno (<420px): empilha a data atual em cima, anterior/próximo lado a lado.
   Evita o overflow horizontal do layout de 3 colunas em 375px. */
@media (max-width: 419px) {
  .date-nav { grid-template-columns: 1fr 1fr; grid-template-areas: "current current" "prev next"; }
  .date-nav__current { grid-area: current; min-width: 0; }
  .date-nav__btn--prev { grid-area: prev; }
  .date-nav__btn--next { grid-area: next; }
}

/* --------------------------------------------------------------------------
   17. Links internos + nav lateral + link de texto
   -------------------------------------------------------------------------- */
.related-links { display: grid; gap: 8px; }
.related-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius); color: var(--color-text); font-weight: 600; font-size: .9rem;
  transition: border-color .15s, background .15s;
}
.related-link:hover { border-color: var(--color-accent); background: #fff; text-decoration: none; }
.related-link .icon { color: var(--color-text-soft); }

.sidebar-nav { display: grid; gap: 2px; }
.sidebar-nav__link { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-text); font-size: .9rem; font-weight: 500; }
.sidebar-nav__link:hover { background: var(--color-primary-light); color: var(--color-primary-dark); text-decoration: none; }

/* --------------------------------------------------------------------------
   18. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-alt); overflow: hidden; }
.faq__item[open] { background: var(--color-surface); border-color: var(--color-border-strong); }
.faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; font-weight: 600; font-size: .95rem; cursor: pointer; list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__icon { color: var(--color-text-soft); transition: transform .2s; }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__answer { padding: 0 16px 16px; color: var(--color-text-muted); font-size: .92rem; }
.faq__answer p { margin: 0; }

/* --------------------------------------------------------------------------
   19. Empty-state / Alert-state
   -------------------------------------------------------------------------- */
.empty-state { text-align: center; padding: 32px 20px; background: var(--color-surface-alt); border: 1px dashed var(--color-border-strong); border-radius: var(--radius); }
.empty-state__icon { color: var(--color-text-soft); margin-bottom: 12px; }
.empty-state__title { font-size: 1.05rem; margin-bottom: 6px; }
.empty-state__text { color: var(--color-text-muted); font-size: .9rem; max-width: 42ch; margin-inline: auto; }

.alert-state {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border: 1px solid; border-radius: var(--radius); font-size: .9rem; margin-bottom: 16px;
}
.alert-state__icon { margin-top: 1px; }
.alert-state__body { flex: 1; }
.alert-state__title { font-weight: 700; margin-bottom: 2px; font-size: .92rem; }
.alert-state__text { margin: 0; }
.alert-state--info    { background: var(--color-info-bg);    border-color: var(--color-info-bd);    color: #0f4a93; }
.alert-state--success { background: var(--color-success-bg); border-color: var(--color-success-bd); color: var(--color-success); }
.alert-state--warning { background: var(--color-warning-bg); border-color: var(--color-warning-bd); color: var(--color-warning); }
.alert-state--danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-bd);  color: var(--color-danger); }

/* --------------------------------------------------------------------------
   20. Rodapé editorial
   -------------------------------------------------------------------------- */
.editorial-footer {
  margin-top: 32px; padding: 24px 0 8px; border-top: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: .82rem;
}
.editorial-footer__content { display: grid; gap: 12px; }
.editorial-footer p { margin: 0; max-width: 68ch; }
.editorial-footer nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.editorial-footer nav a { color: var(--color-text-muted); font-weight: 500; }
.editorial-footer__sep { color: var(--color-border-strong); }

/* --------------------------------------------------------------------------
   21. Laboratório de estados (states.html)
   -------------------------------------------------------------------------- */
.states-lab__intro { margin-bottom: 24px; }
.lab-section { margin-bottom: 28px; }
.lab-section__title { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; padding-bottom: 8px; border-bottom: 2px solid var(--color-border); }
.lab-section__hint { font-size: .82rem; color: var(--color-text-soft); margin-bottom: 14px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lab-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .lab-grid { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------------
 * Guard AdSense/Auto Ads: NUNCA anúncio dentro do bloco de concurso/prêmios.
 * O portal serve Auto Ads/GAM nas páginas indexáveis; esta trava impede que o
 * posicionamento automático (client-side) caia no meio da tabela de resultados.
 * ------------------------------------------------------------------------- */
.jogo-do-bicho .extractions .google-auto-placed,
.jogo-do-bicho .extractions ins.adsbygoogle,
.jogo-do-bicho .extractions .gpt-ad,
.jogo-do-bicho .contest .google-auto-placed,
.jogo-do-bicho .contest ins.adsbygoogle,
.jogo-do-bicho .contest .gpt-ad,
.jogo-do-bicho .table-wrap .google-auto-placed,
.jogo-do-bicho .table-wrap ins.adsbygoogle,
.jogo-do-bicho .recent-results .google-auto-placed,
.jogo-do-bicho .recent-results ins.adsbygoogle {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * QA — acessibilidade/UX (2026-06-16): nome acessível de tabela (caption oculta),
 * alvos de toque >= ~44px e micro-labels úteis mais legíveis no mobile.
 * ------------------------------------------------------------------------- */
.jogo-do-bicho .visuallyhidden,
.jogo-do-bicho caption.visuallyhidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.jogo-do-bicho .sidebar-nav__link { padding-top: 12px; padding-bottom: 12px; min-height: 44px; box-sizing: border-box; }
.jogo-do-bicho .btn--small { padding-top: 11px; padding-bottom: 11px; min-height: 44px; }
.jogo-do-bicho .recent-results__label,
.jogo-do-bicho .date-nav__current-label { font-size: .7rem; }