/* ============================================================
   PALETA GLOBAL — UNIFICADA
============================================================ */
:root {
  /* Nova paleta base */
  --brand:       #12b3b6;
  --brand-soft:  #e6f6f7;
  --accent:      #f5c84c;

  --bg:          #f6f8fa;
  --panel:       #ffffff;
  --ink:         #0f172a;
  --muted:       #5b6570;
  --line:        #e2e8f0;

  /* Compatibilidade semântica (mapeamento antigo → novo) */
  --teal:        var(--brand);
  --teal-light:  #2fbfc2;          /* brand ligeiramente mais claro */
  --teal-soft:   var(--brand-soft);

  --gray-0:      #ffffff;
  --gray-1:      #f4f6f8;
  --gray-2:      var(--line);
  --gray-3:      #cbd5e1;

  --text-main:   var(--ink);
  --text-soft:   var(--muted);

  --radius:      12px;
  --shadow:      0 10px 30px rgba(0,0,0,0.08);
}

/* =========================================================
   LARGURA EDITORIAL DA APP
========================================================= */
#poly-app{
  max-width: 1200px;   /* ajusta aqui */
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   🔘 BOTÃO TOC — LAYOUT TEXTURAS
============================================================ */
#toc-toggle {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 99998;

  width: 40px;
  height: 40px;

  background: var(--panel);
  color: var(--ink);
  font-size: 20px;

  border: 2px solid var(--brand);
  border-radius: var(--radius);
  cursor: pointer;

  box-shadow: var(--shadow);
  transition: all .25s ease;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ícone */
#toc-toggle{
  line-height:1;
}

/* hover */
#toc-toggle:hover{
  background: var(--brand);
  color:#fff;
}

/* focus acessível */
#toc-toggle:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.6),
    0 0 0 6px rgba(18,179,182,.45);
}

/* ============================================================
   📋 TOC — PAINEL LATERAL
============================================================ */
#pa-toc {
  position: fixed;
  top: 50px;
  left: 70px;
  width: 300px;
  height: 55vh;
  border-radius: var(--radius);

  background: var(--panel);
  border-right: 3px solid var(--brand);
  box-shadow: 0 0 40px rgba(0,0,0,.08);

  padding: 28px 22px;
  overflow-y: auto;
  z-index: 99997;

  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

/* estado aberto */
#pa-toc.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   📦 TOC — CONTEÚDO
============================================================ */
#pa-toc .toc-box {
  all: unset;
  display: block;
}

/* ============================================================
   TOC — LISTAS
============================================================ */
#pa-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#pa-toc li {
  margin: 0;
  padding: 0;
}

/* ============================================================
   🔗 LINKS DO TOC
============================================================ */
#pa-toc a {
  display: block;
  margin-bottom: 14px;

  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);

  padding: 4px 0;
  border-left: 3px solid transparent;
  transition: all .2s ease;
}

#pa-toc a:hover {
  color: var(--brand);
  border-left-color: var(--brand);
}

#pa-toc a.active,
#pa-toc a[aria-current="true"] {
  color: var(--brand);
  font-weight: 700;
  border-left-color: var(--brand);
}

/* ============================================================
   TÍTULOS / TEXTO
============================================================ */
.pa-header h1 {
  margin: 0;
  font-size: 30px;
  color: var(--brand);
}

.pa-header .pa-sub {
  margin-top: 4px;
  font-size: 20px;
  color: var(--muted);
}

.pa-section h3 {
  margin: 40px 0 16px;
  padding-left: 10px;

  font-size: 22px;
  font-weight: 700;
  color: var(--brand);

  border-left: 3px solid var(--brand);
}

.pa-section p {
  margin-bottom: 20px;
  font-size: 20px;
  color: var(--muted);

  /* 👇 JUSTIFY */
  text-align: justify;
  text-justify: inter-word;

  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}


/* ============================================================
   CARDS
============================================================ */
.pa-card {
  margin: 22px 0;
  padding: 16px 20px;

  background: var(--gray-1);
  border: 1px solid var(--gray-2);
  border-left: 3px solid var(--brand);
  border-radius: 6px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.pa-card h4 {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--brand);
}

/* ============================================================
   TABELAS
============================================================ */
.pa-table {
  width: 100%;
  margin: 26px 0;

  background: var(--gray-0);
  border: 1px solid var(--gray-2);
  border-radius: 6px;
  overflow: hidden;
}

.pa-table .row.head {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

.pa-table .row > div {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-2);
}

.pa-table .row:nth-child(even):not(.head) {
  background: var(--gray-1);
}

.pa-table .row:hover:not(.head) {
  background: var(--brand-soft);
}

.pa-table.cols-2 .row,
.pa-table.cols-2 .row.head {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.pa-table.cols-3 .row,
.pa-table.cols-3 .row.head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pa-table.cols-4 .row,
.pa-table.cols-4 .row.head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* ============================================================
   ABCJS
============================================================ */
.abc-example {
  margin: 30px 0;
  padding: 18px;

  background: var(--panel);
  border: 1px solid var(--gray-2);
  border-left: 3px solid var(--brand);
  border-radius: 6px;

  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.abc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.abc-label {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--brand);
}

.abc-play-btn {
  padding: 7px 13px;
  border: none;
  border-radius: 6px;

  background: var(--brand);
  color: #fff;
  font-weight: 600;
  cursor: pointer;

  transition: background .15s ease;
}

.abc-play-btn:hover {
  background: var(--teal-light);
}

/* =========================================================
   TOC — MOBILE 
========================================================= */
@media (max-width: 900px){

  #toc-toggle {
    left: 12px;
  }

  #pa-toc {
    position: fixed;
    top: 0;
    left: 55px;

    width: calc(100% - 55px);
    height: 100vh;

    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    background: var(--panel);
    border-right: 3px solid var(--brand);
    box-shadow: 0 0 40px rgba(0,0,0,.18);

    z-index: 99999;

    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
  }

  #pa-toc.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .pa-section p {
    font-size: 16px;
  }
}