#nombre-box {
        width: 500px;
        background: #ffffff;
        padding: 20px;
        border-radius: 12px;
        border: 1px solid #ddd;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        margin: 20px auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    #nombre-box h3 {
        margin: 0 !important;
    }

    #nombreUsuario {
        width:100%;
        padding:12px;
        border-radius:8px;
        border:1px solid #ddd;
      }
    
      #cedulaUsuario {
        width:100%;
        padding:12px;
        border-radius:8px;
        border:1px solid #ddd;
      }
    
      #btnIniciar{
        padding:12px 20px; 
        background:#2C1A46; 
        color:white; 
        border:none; 
        border-radius:8px; 
        cursor:pointer;
      }

    #quiz {
        width: 700px;
        height: auto;
        background: #ffffff;
        padding: 2rem;
        border-radius: 12px;
        border: 1px solid #ddd;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
    }

    #quiz h3 {
        text-align: center;
    }

    #result p {
        margin: 0 !important;
    }

    .question {
        display: none;
        width: 100%;
    }

    .active {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        order: 1;
    }

    .option-box {
        padding: 14px 16px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: 0.15s ease;
        user-select: none;
    }

    .option-box:hover {
        background: #f3f4f6;
    }

    .option-box input[type="radio"] {
        transform: scale(1.2);
        accent-color: #2563eb;
    }

    #result {
        display: none;
        padding: 2rem;
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #ddd;
        width: 700px;
        margin: 30px auto;
        text-align: center;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    /* Smartphones pequeños (≤ 767px) */
    @media (max-width: 767px) {

        #result,
        #quiz,
        #nombre-box {
            max-width: 100%;
        }
    }

    @media print {
        #btnImprimir {
            display: none;
        }
    }