@charset "utf-8";
/* CSS Document */


  #grafico {
	display: none;  
    max-width: 500px;  
    max-height: 400px;  
  }

    .quiz-container {
      max-width: 100%;
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.32);
	  margin-top: 50px;
	  margin-bottom: 30px;
    }
 
    .question {
      margin: 15px 0 5px;
      font-weight: bold;
	  color: #181818;
	  font-size: 1.2rem;
		text-align: left;
    }
    .options {
      margin-bottom: 20px;
	  color: #181818;
	  font-size: 1.2rem;
	  text-align: left;
    }

    label {
      display: block;
      margin-bottom: 6px;
      cursor: pointer;
	  font-weight: 400;
    }
  
    .result {
	  width: 80%;
	  margin-left: auto;
	  margin-right: auto;
      margin-top: 30px;
      padding: 20px;
      border-radius: 10px;
      background: #2b2b2b;
      font-size: 1.4rem;
	  font-weight: 400;
      text-align: center;
	  color: #fff;
    }
    canvas {
      margin-top: 25px;
    }



/* TESTE POLITICO */

.container{max-width:900px;margin:0 auto}

input[type=radio]{accent-color:var(--accent); margin-right:6px}

input[type=radio]:checked + span{font-weight:600;color:var(--accent)}

.controls{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}

.button{background:#82c4f1;border:none;color:#181818;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.button:hover {
  opacity: 1;
  background-color: #29E45A;
}

.bt_secondary{background:#181818;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}

.result2{margin-top:16px;padding:14px;border-radius:10px;background:linear-gradient(180deg, rgba(72,72,72,0.03), rgba(6,182,212,0.01)); color:#181818;}

.bar{height:14px;background:rgba(0,0,0,0.1);border-radius:999px;position:relative;margin-top:20px}

.marker{position:absolute;top:-6px;width:2px;height:26px;background:#181818;left:50%}

.label-row{display:flex;justify-content:space-between;margin-top:8px;color:#181818;font-size:1rem}

.rp{margin-top:18px;color:#181818;font-size:13px}


/* TIPOS PSICOLOGICOS */

.opts{display:flex; gap:12px; flex-wrap:wrap}

legend{padding:0 8px; color:#2b2b2b}

fieldset{border:1px dashed #181818; border-radius:16px; padding:16px 16px 8px}

label.opt{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid ; border-radius:12px; cursor:pointer}

 input[type="radio"]{accent-color:#60a5fa}

.item{display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:12px}

.item:hover{background:rgba(0,0,0,.1)}

.progress{height:10px; background:#0b1224; border:1px solid #181818; border-radius:999px; overflow:hidden; margin:16px 0}

.grid{display:grid; gap:16px}

.q{flex:1}

@media(min-width:860px){ .grid-2{grid-template-columns:1fr 1fr} }