/* ============================================
   TABELAS DE CRUZAMENTO ILUSTRADAS
   Layout das artes do criatório, em vetor.
   Carregado por inc/cruzamento-tabelas.php
   ============================================ */

.ab-tabela { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 14px; padding: 1.5rem 1.2rem 1.1rem; margin: 2rem 0; }
.ab-tabela-titulo {
  display: block; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; color: var(--ab-accent, var(--accent));
  text-transform: uppercase; line-height: 1.25; margin-bottom: 1.4rem;
}
.ab-tabela-fonte { display: block; text-align: center; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 1rem; }

.ab-grade { display: grid; grid-template-columns: repeat(3, 1fr); }
.ab-cruz { padding: 1rem 0.7rem 1.2rem; border-left: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.ab-cruz:nth-child(3n+1) { border-left: 0; }
.ab-cruz:nth-last-child(-n+3) { border-bottom: 0; }

.ab-cruz-titulo {
  display: block; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 0.8rem; line-height: 1.3;
}
.ab-cruz-pais, .ab-cruz-prole { display: flex; justify-content: center; align-items: flex-end; gap: 4px; flex-wrap: wrap; }

.ab-ave { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 88px; }
.ab-ave-svg { width: 100%; height: auto; display: block; }
.ab-ave-nome { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); text-align: center; line-height: 1.25; }
.ab-ave-pct { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.78rem; font-weight: 800; color: var(--ab-accent, var(--gold-dark)); }

.ab-cruz-seta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0.5rem 0 0.7rem; }
.ab-cruz-regua { display: block; width: 78%; height: 2px; background: var(--ab-accent, var(--gold)); opacity: 0.55; }
.ab-cruz-seta svg { width: 18px; height: 18px; fill: var(--ab-accent, var(--gold)); }

@media (max-width: 860px) {
  .ab-grade { grid-template-columns: repeat(2, 1fr); }
  .ab-cruz { border-left: 0; }
  .ab-cruz:nth-child(2n) { border-left: 1px solid var(--rule-2); }
  .ab-cruz:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule-2); }
  .ab-cruz:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 520px) {
  .ab-tabela { padding: 1.2rem 0.8rem 0.9rem; }
  .ab-grade { grid-template-columns: 1fr; }
  .ab-cruz { border-left: 0 !important; border-bottom: 1px solid var(--rule-2) !important; }
  .ab-cruz:last-child { border-bottom: 0 !important; }
  .ab-ave { max-width: 76px; }
}