/* ===== FONT ===== */
@font-face{
  font-family:"DejaVu Serif Custom";
  src:url("https://linoguerreiro.com/wp-content/uploads/2026/02/DejaVuSerif.ttf") format("truetype");
  font-display:swap;
}

/* ===== BASE ===== */
#intervalos-quiz {
  --bg:#fff; --ink:#0f1114; --muted:#6e7379; --line:#e6e9ec;
  --radius:14px; --shadow:0 2px 8px rgba(0,0,0,.06);
  --cp-bg:#e8f1ff; --cp-bd:#b9d2ff; --cp-ink:#0b3b8f;
  --ci-bg:#e9f9f0; --ci-bd:#bdebd4; --ci-ink:#0e6a3a;
  --d2-bg:#fff7e6; --d2-bd:#ffe1a8; --d2-ink:#7a4a00;
  --d7-bg:#ffe9ea; --d7-bd:#ffc8cc; --d7-ink:#8a1020;
  --do-bg:#efe9ff; --do-bd:#d7c8ff; --do-ink:#3b168a;
--trit-bg:#FECACA;
--trit-bd:#F87171;
--trit-ink:#7F1D1D;
  --pill-bg:#f6f8fb; --pill-bd:#e6e9ec; --pill-ink:#101315; --pill-on:#F5C84C;

  /* 🔥 fonte nova */
  font-family:"DejaVu Serif Custom", "DejaVu Serif", Georgia, serif;

  /* 🔥 escala maior (ajustada para serif) */
  font-size:18px;
  line-height:1.55;

  color:var(--ink);
  background:var(--bg);
  box-sizing:border-box;
}

#intervalos-quiz *{box-sizing:border-box}

#intervalos-quiz{
  max-width:clamp(1200px, 92vw, 1400px);
  margin:0 auto;
  padding:16px;
}

#intervalos-quiz .iq-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:10px;
}

#intervalos-quiz .iq-badge{
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 12px;
  background:#f8fafc;
  font-weight:800;
}

#intervalos-quiz .iq-meta{margin-top:10px}

/* layout */
#intervalos-quiz .iq-row{
  display:grid;
  gap:16px;
  align-items:stretch;
}

#intervalos-quiz .iq-row-top{grid-template-columns:1fr 1fr}
#intervalos-quiz .iq-row-theory{
  grid-template-columns:1fr 1fr;
}

/* pauta */
#intervalos-quiz .iq-paperBox{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

#intervalos-quiz #iq-paper{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  border:1px dashed var(--line);
  border-radius:12px;
  padding:4px;
  background:#fcfcfc;
}

#intervalos-quiz #iq-paper svg{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  margin:0 auto;
}

/* meta */

#intervalos-quiz .iq-metaPane{
  display:flex;
  height:100%;
}

#intervalos-quiz .iq-scoreBox{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  width:100%;
  height:100%;

  padding:6px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:#fcfcfc;
  text-align:center;
}

#intervalos-quiz .iq-scoreBox .iq-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
}

#intervalos-quiz .iq-scoreBox .iq-badge{
  font-size:1.25rem;
  padding:12px 24px;
  border-width:2px;
}

/* feedback */
#intervalos-quiz #iq-feedback{
  position:static;
  margin-top:10px;
  min-height:40px;
  font-size:1.2rem;
  font-weight:800;
  pointer-events:none;
  text-align:center;
}

#intervalos-quiz [data-state="ok"] .iq-badge{
  box-shadow:0 0 18px rgba(16,185,129,.35);
}

#intervalos-quiz [data-state="err"] .iq-badge{
  box-shadow:0 0 18px rgba(239,68,68,.35);
}

/* toggle idioma */
#intervalos-quiz .iq-lang-row{
  display:flex;
  justify-content:center;
  align-items:center;
}

#intervalos-quiz .iq-pill{
  --h:36px;
  --w:140px;
  --pad:4px;

  position:relative;
  width:var(--w);
  height:var(--h);

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:var(--pad);
  gap:6px;

  background:linear-gradient(#f7f9fc,#f2f5f9);
  border:1px solid var(--pill-bd);
  border-radius:999px;

  box-shadow:0 2px 10px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.7);

  cursor:pointer;
  user-select:none;
  outline:0;

  margin:0 auto;
}

#intervalos-quiz .iq-pill .iq-opt{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1.2rem;
  color:#6b7280;
  z-index:2;
}

#intervalos-quiz .iq-pill .iq-thumb{
  position:absolute;
  top:var(--pad);
  left:var(--pad);

  width:calc(50% - var(--pad));
  height:calc(var(--h) - var(--pad)*2);

  background:var(--pill-on);
  border-radius:999px;

  transition:transform .18s ease;
}

#intervalos-quiz .iq-pill[data-lang="en"] .iq-thumb{
  transform:translateX(100%);
}

#intervalos-quiz .iq-pill[data-lang="pt"] .iq-opt[data-k="pt"],
#intervalos-quiz .iq-pill[data-lang="en"] .iq-opt[data-k="en"]{
  color:var(--pill-ink);
}

/* =========================
   CABEÇALHOS
========================= */

#intervalos-quiz .iq-grid-headers{
  display:grid;
  gap:8px;
  grid-template-columns:1fr 1fr;
  margin:16px 0 8px;
}

#intervalos-quiz .iq-titlePanel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  font-weight:800;
  font-size:1.2rem;
  text-align:center;
}

#intervalos-quiz .iq-title-cp{
  background:var(--cp-bg);
  border-color:var(--cp-bd);
  color:var(--cp-ink);
}

#intervalos-quiz .iq-title-ci{
  background:var(--ci-bg);
  border-color:var(--ci-bd);
  color:var(--ci-ink);
}

#intervalos-quiz .iq-title-dis{
  grid-column:1 / -1;
  background:linear-gradient(
    90deg,
    var(--d2-bg) 0 34%,
    var(--d7-bg) 34% 67%,
    var(--do-bg) 67% 100%
  );
  color:var(--ink);
}

/* =========================
   CHIPS (RESPOSTAS)
========================= */

#intervalos-quiz .iq-grid-answers{
  display:grid;
  gap:16px;
  grid-template-columns:1fr 1fr;
  margin:8px 0 16px;
}

/* linha dissonâncias */
#intervalos-quiz .iq-dis-row{
  grid-template-columns:1fr;
}

/* grupo dissonâncias */
#intervalos-quiz .iq-dis-group{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* chips base */
#intervalos-quiz .iq-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

#intervalos-quiz .iq-chip{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:800;
  font-size:1.2rem;
  text-align:center;
  transition:box-shadow .15s, transform .02s;
  color:var(--ink);
  flex:1 1 100px;
  min-width:100px;
}

/* estados */
#intervalos-quiz .iq-chip.ok{
  box-shadow:0 0 0 4px rgba(16,185,129,.18);
}

#intervalos-quiz .iq-chip.err{
  box-shadow:0 0 0 4px rgba(239,68,68,.18);
}

/* cores por tipo */
#intervalos-quiz .iq-chip.cp{
  background:var(--cp-bg);
  border-color:var(--cp-bd);
  color:var(--cp-ink);
}

#intervalos-quiz .iq-chip.ci{
  background:var(--ci-bg);
  border-color:var(--ci-bd);
  color:var(--ci-ink);
}

#intervalos-quiz .iq-chip.dis2{
  background:var(--d2-bg);
  border-color:var(--d2-bd);
  color:var(--d2-ink);
}

#intervalos-quiz .iq-chip.dis7{
  background:var(--d7-bg);
  border-color:var(--d7-bd);
  color:var(--d7-ink);
}

#intervalos-quiz .iq-chip.diso{
  background:var(--do-bg);
  border-color:var(--do-bd);
  color:var(--do-ink);
}

#intervalos-quiz .iq-chip.tritone{
  background:var(--trit-bg);
  border-color:var(--trit-bd);
  color:var(--trit-ink);
}

/* =========================
   TEORIA
========================= */

#intervalos-quiz .iq-theoryCard{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:#fcfcfc;
}

#intervalos-quiz .iq-theoryCard h3{
  margin:0 0 6px;
  font-size:1.2rem;
}

#intervalos-quiz .iq-theoryCard p{
  margin:0 0 4px;
  color:var(--muted);
  font-size:1.2rem;
}

#intervalos-quiz .iq-pillTag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

#intervalos-quiz .iq-tag{
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 8px;
  font-weight:800;
  font-size:1.2rem;
}

#intervalos-quiz .iq-fw600{font-weight:600}
#intervalos-quiz .iq-mt4{margin-top:4px}
#intervalos-quiz .iq-mt6{margin-top:6px}

/* =========================
   MODAL
========================= */

#intervalos-quiz .iq-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;

  align-items:center;
  justify-content:center;

  pointer-events:none;
}

#intervalos-quiz .iq-modal.is-open{
  display:flex;
  pointer-events:auto;
}

/* backdrop */
#intervalos-quiz .iq-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);

  opacity:0;
  transition:opacity .25s ease;
}

#intervalos-quiz .iq-modal.is-open .iq-modal-backdrop{
  opacity:1;
}

/* conteúdo */
#intervalos-quiz .iq-modal-content{
  position:relative;

  width:min(900px, 92vw);
  max-height:80vh;
  overflow-y:auto;

  background:#fff;
  border:1px solid var(--line);

  border-radius:18px;
  padding:18px;

  box-shadow:
    0 20px 60px rgba(0,0,0,.25);

  transform:translateY(10px) scale(.96);
  opacity:0;

  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}

#intervalos-quiz .iq-modal.is-open .iq-modal-content{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* =========================
   CARDS COM COR 🔥
========================= */

/* bloco A — conceitos */
#intervalos-quiz #iq-theoA{
  background:linear-gradient(180deg, var(--cp-bg), #ffffff 70%);
  border:1px solid var(--cp-bd);
}

/* bloco B — regras */
#intervalos-quiz #iq-theoB{
  background:linear-gradient(180deg, var(--ci-bg), #ffffff 70%);
  border:1px solid var(--ci-bd);
}

/* títulos com cor */
#intervalos-quiz #iq-theoA h3{
  color:var(--cp-ink);
  border-bottom:2px solid var(--cp-bd);
}

#intervalos-quiz #iq-theoB h3{
  color:var(--ci-ink);
  border-bottom:2px solid var(--ci-bd);
}

/* =========================
   TAGS COLORIDAS
========================= */

#intervalos-quiz .iq-tag.dis2{
  background:var(--d2-bg);
  border-color:var(--d2-bd);
  color:var(--d2-ink);
}

#intervalos-quiz .iq-tag.dis7{
  background:var(--d7-bg);
  border-color:var(--d7-bd);
  color:var(--d7-ink);
}

#intervalos-quiz .iq-tag.diso{
  background:var(--do-bg);
  border-color:var(--do-bd);
  color:var(--do-ink);
}

#intervalos-quiz .iq-tag.tritone{
  background:var(--trit-bg);
  border-color:var(--trit-bd);
  color:var(--trit-ink);

  box-shadow:0 0 12px rgba(249,115,22,.4);
}

/* =========================
   BOTÃO FECHAR
========================= */

#intervalos-quiz .iq-modal-close{
  position:absolute;
  top:10px;
  right:10px;

  width:34px;
  height:34px;

  border:none;
  border-radius:999px;

  background:var(--pill-on);
  color:#111;

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

  cursor:pointer;
  font-weight:800;

  box-shadow:0 4px 12px rgba(0,0,0,.25);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    color .15s ease;
}

#intervalos-quiz .iq-modal-close:hover{
  transform:scale(1.1);
  box-shadow:0 8px 18px rgba(0,0,0,.3);
}

/* 🔥 opcional — estado ativo igual ao lápis */
#intervalos-quiz .iq-modal-close:active{
  background:#111;
  color:#fff;
}

/* =========================
   BOTÃO DOCK (ESQUERDA)
========================= */

#intervalos-quiz #dock-toggle{
  position:fixed;
  top:80px;
  left:24px;

  z-index:10000;

  width:40px;
  height:40px;
  border-radius:50%;

  background:var(--pill-on);
  color:#111;

  border:none;
  font-size:1.2rem;
  cursor:pointer;

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

  box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* hover */
#intervalos-quiz #dock-toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}

/* ativo */
#intervalos-quiz #dock-toggle.is-active{
  background:#111;
  color:#fff;
}

/* wrapper do toggle (dentro do aside) */
#intervalos-quiz .iq-lang-dock{
  position:static;
  margin-bottom:12px;

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

/* opcional — ligeiro scale */
#intervalos-quiz .iq-lang-dock .iq-pill{
  transform:scale(.95);
}

/* =========================
   LAYOUT INTERNO MODAL
========================= */

#intervalos-quiz .iq-modal-content .iq-row-theory{
  grid-template-columns:1fr;
  gap:12px;
}

/* =========================
  MOBILE
========================= */

@media (max-width:600px){

  /* 1 coluna real */
  #intervalos-quiz .iq-row-top,
  #intervalos-quiz .iq-row-theory,
  #intervalos-quiz .iq-grid-headers,
  #intervalos-quiz .iq-grid-answers{
    grid-template-columns:1fr;
  }

  /* só o botão flutuante */
  #intervalos-quiz #dock-toggle{
    left:12px;
  }

  /* modal confortável */
  #intervalos-quiz .iq-modal-content{
    width:95vw;
  }
	
  #intervalos-quiz #iq-feedback{
    min-height:32px;
  }

  #intervalos-quiz #iq-feedback .iq-badge{
    font-size:0.85rem;
    padding:8px 12px;
  }
}