/* Contenedor general */
    .mi-quiz-wrapper {
      margin: 0 auto;
      padding: var(--container-pad-block) var(--container-pad-inline);
      background: var(--bg-surface);
      border-radius: var(--radius-global);
    }

    /* Pregunta */
    .quiz-question {
      margin-bottom: var(--space-xs);
    }

    .quiz-info {
      font-size: var(--text-xs);
      color: var(--dark-70);
      margin-bottom: var(--space-s);
      font-weight: 600;
    }

    /* Opciones */
    .quiz-options {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }

    /* Cada opción */
    .quiz-option {
      position: relative;
    }

    /* Ocultar input */
    .quiz-option input {
      display: none;
    }

    label {
      font-size: var(--text-s);
      color: var(--text-title);
      text-transform: none;
      font-weight: 400;
    }

    .quiz-user-data {
      padding: var(--space-s) 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    /* Estilo del bloque clickable */
    .quiz-option label {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      background: var(--bg-surface);
      border: var(--border-width) var(--border-style) var(--border-color);
      border-radius: var(--radius-global);
      padding: var(--space-xs) var(--space-s);
      cursor: pointer;
      width: 100%;
      transition: var(--transition-global);
    }

    /* Circulo con letras A, B, C... */
    .quiz-option .quiz-letter {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border: var(--border-width) var(--border-style) var(--border-primary);
      border-radius: var(--radius-full);
      font-weight: 700;
      color: var(--text-title);
      flex-shrink: 0;
    }

    /* Texto */
    .quiz-option .quiz-text {
      flex: 1;
    }

    /* Hover */
    .quiz-option label:hover {
      background: var(--bg-surface);
      border-color: var(--border-primary);
    }

    /* Seleccionado (radio y checkbox) */
    .quiz-option input:checked+label {
      background: var(--primary-20);
      border-color: var(--border-primary);
      color: var(--primary);
      font-weight: 600;
    }

    /* Cambiar color del circulo cuando está seleccionado */
    .quiz-option input:checked+label .quiz-letter {
      background: var(--primary);
      color: var(--light);
      border-color: var(--border-primary);
    }

    #quiz-result {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .resultado-puntuacion {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .resultado-numero {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 3rem;
      aspect-ratio: 1/1;
      padding: .5rem;
      border: var(--border-width) var(--border-style) var(--border-primary);
      color: var(--light);
      background-color: var(--primary);
      border-radius: var(--radius-full);
      font-weight: 700;
      margin: auto;
      font-size: var(--h3);
    }

    /* ==================== */
    /* BOTONES CONTROLES    */
    /* ==================== */
    #quiz-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 25px;
      justify-content: space-evenly;
    }



    #quiz-controls button:disabled {
      background: #aaa;
      cursor: not-allowed;
    }

        /* Contenedor general */
    .mi-quiz-wrapper {
      margin: 0 auto;
      padding: var(--container-pad-block) var(--container-pad-inline);
      background: var(--bg-surface);
      border-radius: var(--radius-global);
    }

    /* Pregunta */
    .quiz-question {
      margin-bottom: var(--space-xs);
    }

    .quiz-info {
      font-size: var(--text-xs);
      color: var(--dark-70);
      margin-bottom: var(--space-s);
      font-weight: 600;
    }

    /* Opciones */
    .quiz-options {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }

    /* Cada opción */
    .quiz-option {
      position: relative;
    }

    /* Ocultar input */
    .quiz-option input {
      display: none;
    }

    label {
      font-size: var(--text-s);
      color: var(--text-title);
      text-transform: none;
      font-weight: 400;
    }

    .quiz-user-data {
      padding: var(--space-s) 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    /* Estilo del bloque clickable */
    .quiz-option label {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      background: var(--bg-surface);
      border: var(--border-width) var(--border-style) var(--border-color);
      border-radius: var(--radius-global);
      padding: var(--space-xs) var(--space-s);
      cursor: pointer;
      width: 100%;
      transition: var(--transition-global);
    }

    /* Circulo con letras A, B, C... */
    .quiz-option .quiz-letter {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border: var(--border-width) var(--border-style) var(--border-primary);
      border-radius: var(--radius-full);
      font-weight: 700;
      color: var(--text-title);
      flex-shrink: 0;
    }

    /* Texto */
    .quiz-option .quiz-text {
      flex: 1;
    }

    /* Hover */
    .quiz-option label:hover {
      background: var(--bg-surface);
      border-color: var(--border-primary);
    }

    /* Seleccionado (radio y checkbox) */
    .quiz-option input:checked+label {
      background: var(--primary-20);
      border-color: var(--border-primary);
      color: var(--primary);
      font-weight: 600;
    }

    /* Cambiar color del circulo cuando está seleccionado */
    .quiz-option input:checked+label .quiz-letter {
      background: var(--primary);
      color: var(--light);
      border-color: var(--border-primary);
    }

    #quiz-result {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .resultado-puntuacion {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .resultado-numero {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 3rem;
      aspect-ratio: 1/1;
      padding: .5rem;
      border: var(--border-width) var(--border-style) var(--border-primary);
      color: var(--light);
      background-color: var(--primary);
      border-radius: var(--radius-full);
      font-weight: 700;
      margin: auto;
      font-size: var(--h3);
    }

    /* ==================== */
    /* BOTONES CONTROLES    */
    /* ==================== */
    #quiz-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 25px;
      justify-content: space-evenly;
    }



    #quiz-controls button:disabled {
      background: #aaa;
      cursor: not-allowed;
    }