/* VA Ciclo de Quintas — UI moderna (scoped + theme-proof) */
.va-cq, .va-cq * { box-sizing: border-box; }
.va-cq{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 18px 0 30px; }
.va-cq button{ font: inherit; }

.va-cq .va-cq-toolbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  margin: 0 0 14px;
}

.va-cq .va-cq-btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .15s ease;
}
.va-cq .va-cq-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.08); }
.va-cq .va-cq-btn:active{ transform: translateY(0); }
.va-cq .va-cq-btn.primary{
  background:#111;
  color:#fff;
  border-color:#111;
}

.va-cq .va-cq-wheel-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items:start;
}

.va-cq .va-cq-wheel{
  width: min(780px, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  padding: 14px;
}

.va-cq .va-cq-info{
  width: min(780px, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  padding: 14px 16px;
}

.va-cq .va-cq-info .line{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
}
.va-cq .va-cq-info .title{
  font-weight:900;
  font-size:18px;
}
.va-cq .va-cq-info .meta{
  opacity:.75;
  font-weight:650;
  font-size:13px;
}

.va-cq .va-cq-panel{
  width: min(780px, 100%);
  margin: 0 auto;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius:18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  padding: 14px 16px;
}

.va-cq .va-cq-kv{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.va-cq .va-cq-kv .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.05);
}
.va-cq .va-cq-kv .label{ font-weight:800; opacity:.8; }
.va-cq .va-cq-kv .value{ font-weight:750; }

.va-cq .va-cq-table-title{
  font-weight:900;
  margin: 8px 0 10px;
  font-size: 16px;
}

.va-cq .va-cq-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden; /* ok no desktop */
}

.va-cq .va-cq-table th,
.va-cq .va-cq-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align:center;
}

.va-cq .va-cq-table th{
  background: rgba(0,0,0,.03);
  font-weight:900;
  font-size: 13px;
}

.va-cq .va-cq-table td{
  font-weight:800;
}

.va-cq .va-cq-table tr:last-child td{ border-bottom:0; }

.va-cq .va-cq-sub{
  font-weight:650;
  opacity:.72;
  font-size: 12px;
}

/* SVG styling */
.va-cq svg{ width:100%; height:auto; display:block; }
.va-cq .wedge{ cursor:pointer; }
.va-cq .wedge:hover{ filter: brightness(0.98); }
.va-cq .wedge.is-selected{ filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
.va-cq .label{ font-weight:900; letter-spacing:.2px; }
.va-cq .label.small{ font-weight:850; opacity:.85; }
.va-cq .acc{ font-weight:900; opacity:.75; }
.va-cq .ringHint{ opacity:.5; font-weight:800; }

@media print{
  /* Print-friendly PDF */
  .va-cq .va-cq-toolbar{ display:none !important; }
  .va-cq .va-cq-wheel, .va-cq .va-cq-info, .va-cq .va-cq-panel{
    box-shadow:none !important;
    border: 1px solid #ddd !important;
  }
  body{ background:#fff !important; }
}

/* ====== Selected wedge contrast ====== */
.va-cq .wedge.is-selected { filter: none !important; }
.va-cq .wedge.is-dim { opacity: .78; }
.va-cq .wedge.is-selected.major { fill: #2f2f2f !important; }
.va-cq .wedge.is-selected.minor { fill: #e7e7e7 !important; }

/* ====== Degree badges (yellow icons) ====== */
.va-cq .deg-badge circle{
  fill: #F6C54A;
  stroke: rgba(255,255,255,.95);
  stroke-width: 4;
}
.va-cq .deg-badge text{
  fill: #111;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .3px;
}

/* ===== Remover UI que você não quer ===== */

/* Remove botão Mostrar armações */
.va-cq .va-cq-toolbar button:first-child {
  display: none !important;
}
/* Remove texto Armadura */
.va-cq .va-cq-info .meta {
  display: none !important;
}
/* Remove botão Salvar como PDF */
.va-cq .va-cq-toolbar .va-cq-btn.primary {
  display: none !important;
}

/* =========================================================
   MOBILE FIXES
   1) Roda maior/mais visível
   2) Tabela não estoura (scroll horizontal no painel)
   ========================================================= */
@media (max-width: 640px){

  /* mais espaço útil pro ciclo */
  .va-cq{
    padding: 10px 0 18px;
  }

  /* roda maior: menos padding no card */
  .va-cq .va-cq-wheel{
    width: 100%;
    padding: 8px;
    border-radius: 16px;
  }

  .va-cq .va-cq-info,
  .va-cq .va-cq-panel{
    width: 100%;
    padding: 12px;
    border-radius: 16px;
  }

  .va-cq .va-cq-info .title{
    font-size: 16px;
  }

  /* ===== tabela: scroll no painel ===== */
  .va-cq .va-cq-panel{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* no mobile, não pode ter overflow hidden na tabela, senão corta */
  .va-cq .va-cq-table{
    overflow: visible;
  }

  /* força largura suficiente pra existir scroll */
  .va-cq table.va-cq-table{
    width: max-content;
    min-width: 560px;
  }
}